Android:TabLayout+ViewPager+Fragment实现底部导航

前言：最近项目重构，整体架构还是采用的底部导航切换页面实现。之前的一篇文章介绍了kotlin中使用BottomNagivationView实现的底部导航效果，今天记录下TabLayout+ViewPager+Fragment实现底部导航的过程，当然底部导航实现的方式有很多，今天不做过多介绍。

先上效果图：

1.导入依赖

TabLayout是Android Support Design库的新控件（API25）

implementation 'com.android.support:design:26.1.0'

2.布局引用

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="cn.demo.ui.activity.MainActivity">

    <include layout="@layout/toolbar_head"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_50"
        android:layout_marginBottom="@dimen/dp_1"
        android:background="@color/white"
        app:tabTextAppearance="@style/TabLayout_Style"
        app:tabIndicatorHeight="0dp"
        >

    </android.support.design.widget.TabLayout>

</LinearLayout>

3.TabLayout

（1）TabLayout条目布局（tab_item）

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

    <ImageView
        android:id="@+id/iv_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        />

    <TextView
        android:id="@+id/tv_des"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="@dimen/sp_12"
        android:textColor="@drawable/tab_text_selector"
        />

</LinearLayout>

（2）item文字颜色drawable（tab_text_selector）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@color/colorTabClick" />
    <item android:state_selected="false" android:color="@color/colorFont" />
</selector>

（3）item图片drawable（以首页为例：tab_home）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@mipmap/tab_home_pressed" />
    <item android:state_selected="false" android:drawable="@mipmap/tab_home_normal" />
</selector>

（4）设置tabs

/**
 * @description: 设置添加Tab
 * @param tab_titles tab条目名字
 * @param tab_imgs tab上条目上的图片
 */
private void setTabs(String[] tab_titles, int[] tab_imgs){
    for (int i = 0; i < tab_titles.length; i++) {
        //获取TabLayout的tab
        TabLayout.Tab tab = mTabLayout.newTab();
        //初始化条目布局view
        View view = getLayoutInflater().inflate(R.layout.tab_item,null);
        tab.setCustomView(view);
        //tab的文字
        TextView tvTitle = view.findViewById(R.id.tv_des);
        tvTitle.setText(tab_titles[i]);
        //tab的图片
        ImageView imgTab =  view.findViewById(R.id.iv_top);
        imgTab.setImageResource(tab_imgs[i]);
        if (i==0){
            //设置第一个默认选中
            mTabLayout.addTab(tab,true);
        }else {
            mTabLayout.addTab(tab,false);
        }
    }
}

4.ViewPager的adapter

/**
 * Created by ruancw on 2018/5/28.
 * FragmentAdapter
 */

public class FragmentAdapter extends FragmentPagerAdapter {
    private List<Fragment> mFragments;

    public FragmentAdapter(FragmentManager fragmentManager, List<Fragment> mFragments) {
        super(fragmentManager);
        this.mFragments = mFragments;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

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

}

4.TabLayout+ViewPager+Fragment

fragments.add(HomeFragment.newInstance("首页"));
fragments.add(HomeFragment.newInstance("功能"));
fragments.add(HomeFragment.newInstance("学校"));
fragments.add(HomeFragment.newInstance("我"));
tab_titles = new String[]{"首页", "功能", "学校","我"};
tab_imgs=new int[]{R.drawable.tab_home,R.drawable.tab_function,R.drawable.tab_school,R.drawable.tab_mine};
setTabs(tab_titles,tab_imgs);
//设置viewpager的adapter
mViewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), fragments));
//TabLayout与ViewPager的绑定
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
mTabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));

这样就实现了可左右滑动和点击切换页面的底部导航效果，当然，如果你不想要左右滑动切换页面，可以设置onTouchListener事件监听，让其消费掉事件（默认返回false,不消费）。

mViewPager.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        return true;//true:消费事件
    }
});

不足之处，欢迎留言评论！！！