Android:TabLayout+ViewPager+Frag

前言：最近项目重构，整体架构还是采用的底部导航切换页面实现。之前的一篇文章介绍了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.helper.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

/**  
* 设置添加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:消费事件
  }
});

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