tablayout+viewpager+fragment实现页面底部导航栏

先附上效果图

第一步：书写布局

我的布局文件是这样的

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="9">
    </android.support.v4.view.ViewPager>
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="fill_horizontal|center_horizontal"
        android:background="@color/colorPrimary"
        app:tabTextColor="@color/tabTextColor"
        android:layout_weight="1">
    </android.support.design.widget.TabLayout>
</LinearLayout>

第二步：自定义fragment适配器

package com.example.wf.study;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;
/**
 * Created by WF on 2018/6/29.
 */
public class MyFragmentAdapter extends FragmentPagerAdapter {
    private List<Fragment> mFragmentList;
    public void setFragments(ArrayList<Fragment> fragments) {
        mFragmentList = fragments;
    }

    public MyFragmentAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = mFragmentList.get(position);
        return fragment;
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return super.getPageTitle(position);
    }
}

第三步：书写activity

package com.example.wf.study;

import android.content.res.ColorStateList;
import android.graphics.Typeface;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.wf.study.fragment.FourFragment;
import com.example.wf.study.fragment.OneFragment;
import com.example.wf.study.fragment.ThreeFragment;
import com.example.wf.study.fragment.TwoFragment;

import java.util.ArrayList;

public class TabLayoutActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
    String[] tabName = {"&#xe633", "大厅", "任务", "我的"};
    int[] tab_img = {R.drawable.head4, R.drawable.head2, R.drawable.e4well, R.drawable.cat, R.drawable.head1};


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        tabLayout = findViewById(R.id.tab_layout);
        viewPager = findViewById(R.id.view_pager);
        Typeface iconfont = Typeface.createFromAsset(getAssets(), "fonts/iconfont.ttf");
        // 创建一个集合,装填Fragment
        ArrayList<Fragment> fragments = new ArrayList<>();
        // 装填
        fragments.add(new OneFragment());
        fragments.add(new TwoFragment());
        fragments.add(new ThreeFragment());
        fragments.add(new FourFragment());
        // 创建ViewPager适配器
        MyFragmentAdapter myPagerAdapter = new MyFragmentAdapter(getSupportFragmentManager());
        myPagerAdapter.setFragments(fragments);
        // 给ViewPager设置适配器
        viewPager.setAdapter(myPagerAdapter);
        // 使用 TabLayout 和 ViewPager 相关联
        tabLayout.setupWithViewPager(viewPager);
        // TabLayout 指示器 (记得自己手动创建4个Fragment,注意是 app包下的Fragment 还是 V4包下的 Fragment)
        tabLayout.setTabTextColors(ColorStateList);
        tabLayout.getTabAt(0).setText("主页").setIcon(tab_img[0]);
        tabLayout.getTabAt(1).setText("大厅").setIcon(tab_img[0]);
        tabLayout.getTabAt(2).setText("任务").setIcon(tab_img[0]);
        tabLayout.getTabAt(3).setText("我的").setIcon(tab_img[0]);
        for (int i = 0; i < 4; i++) {
            setTabItem(i);
        }
    }}

注：这里我在将tabLayout与viewPager进行绑定后，直接使用getTabAt()方法获取一个tab,但是我并没有使用addTab()方法来添加过任何一个tab,那为什么能够拿到tab呢？

原因如下：查看TabLayout源码发现这样一个方法

void populateFromPagerAdapter() {
    removeAllTabs();

    if (mPagerAdapter != null) {
        final int adapterCount = mPagerAdapter.getCount();
        for (int i = 0; i < adapterCount; i++) {
            addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
        }

        // Make sure we reflect the currently set ViewPager item
        if (mViewPager != null && adapterCount > 0) {
            final int curItem = mViewPager.getCurrentItem();
            if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
                selectTab(getTabAt(curItem));
            }
        }
    }
}

相信你已经注意到了，在第一个for循环中，它已经根据我已经关联的fragment个数创建了相应个数的tab。再拓展一下，这里他调用了getPageTitle()方法获取并设置tab标题，所以我们可以在自定义的fragment适配器中重写该方法，让他返回一个标题（不然它返回为空字符，你会看不到标题），这样我们就可以不使用setText()方法设置标题了。

二、通过自定义布局文件自定义tab样式

1、自定义一个tab_item.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/tab_img"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:contentDescription="@string/app_name"
        android:scaleType="fitXY"
        android:src="@drawable/selector_tab_image" />

    <TextView
        android:id="@+id/tab_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="儿童"
        android:textColor="@drawable/selector_tab_text" />
</LinearLayout>

这是tab的通用样式，可以通过改变图片和文字来达到显示不同的效果

2、通过activity来配置显示效果

package com.example.wf.study;

import android.content.res.ColorStateList;
import android.graphics.Typeface;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.wf.study.fragment.FourFragment;
import com.example.wf.study.fragment.OneFragment;
import com.example.wf.study.fragment.ThreeFragment;
import com.example.wf.study.fragment.TwoFragment;

import java.util.ArrayList;

public class TabLayoutActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
    String[] tabName = {"主页", "大厅", "任务", "我的"};
    int[] tab_img = {R.drawable.head4, R.drawable.head2, R.drawable.e4well, R.drawable.cat, R.drawable.head1};


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        tabLayout = findViewById(R.id.tab_layout);
        viewPager = findViewById(R.id.view_pager);
        Typeface iconfont = Typeface.createFromAsset(getAssets(), "fonts/iconfont.ttf");
        // 创建一个集合,装填Fragment
        ArrayList<Fragment> fragments = new ArrayList<>();
        // 装填
        fragments.add(new OneFragment());
        fragments.add(new TwoFragment());
        fragments.add(new ThreeFragment());
        fragments.add(new FourFragment());
        // 创建ViewPager适配器
        MyFragmentAdapter myPagerAdapter = new MyFragmentAdapter(getSupportFragmentManager());
        myPagerAdapter.setFragments(fragments);
        // 给ViewPager设置适配器
        viewPager.setAdapter(myPagerAdapter);
        // 使用 TabLayout 和 ViewPager 相关联
        tabLayout.setupWithViewPager(viewPager);
        for (int i = 0; i < 4; i++) {
            setTabItem(i);
        }

    }

    public void setTabItem(int position) {
        View view = LayoutInflater.from(this).inflate(R.layout.tab_item, null);
        TextView textView = (TextView) view.findViewById(R.id.tab_name);
        textView.setText(tabName[position]);
        ImageView imageView=(ImageView)view.findViewById(R.id.tab_img);
        imageView.setImageResource(tab_img[position]);
        tabLayout.getTabAt(position).setCustomView(view);

    }
}

这里通过获取到tab_item布局文件的view对象，通过该对象获取我们定义的ImageView和TextView并设置相关属性，最后通过setCustomView()方法将view传给tab显示。