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

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

先上效果图：

效果图

1.导入依赖

注：TabLayout是Android Support Design库的新控件(API25)

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

2.布局引用

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">

android:id="@+id/view_pager"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

/>

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"

>

3.TabLayout

(1)TabLayout条目布局(tab_item)

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

/>

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"

/>

(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:消费事件

}

});

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