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

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

先上效果图：

效果图

1.导入依赖

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

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

2.布局引用

3.TabLayout

（1）TabLayout条目布局（tab_item）

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

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

（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 mFragments;    
    public FragmentAdapter(FragmentManager fragmentManager, List 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:消费事件
  }
});

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