Android顶部导航之TabLayout和ViewPager的组合，setupWithViewPager有点坑

TabLayout是Android Design Support Library的组件，可以很方便的写出顶部导航栏比以前那个什么TabHost好用多了，因为是Design Support Library下的控件，所以使用它要引入相关依赖

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

**注意**Android studio 3.0以后，引入依赖关键词变成了

implementation

在之前版本的关键词是

compile

本文最终实现的最终效果如下图所示：



使用方法

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

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"

app:tabMode="scrollable" />

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

1.找到相应控件

mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
mViewPager = (ViewPager) findViewById(R.id.viewPager);

2.创建tab项

//使用Tablayout的newTab()创建tab
TabLayout.Tab tab1 = mTabLayout.newTab()
//设置tab项显示的文字
.setText("tab1");
TabLayout.Tab tab2 = mTabLayout.newTab().setText("tab2");
TabLayout.Tab tab3 = mTabLayout.newTab().setText("tab3");

说明: 创建Tab对象不能通过new 对象的方式，而是使用

TabLayout

里面的

newTab()

的方式创建,查看源码就可以知道Tab的构成方法是没有修饰词，也就是默认权限，它所在包以外都没权限访问。

3.将tab项添加到TabLayout中

mTabLayout.addTab(tab1);
mTabLayout.addTab(tab2);
mTabLayout.addTab(tab3);

运行效果如下

4.准备ViewPager数据

使用ViewPager前先要有一个它的适配器

public class TabPageAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;

public TabPageAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}

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

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

向适配器中添加数据

fragments=new ArrayList<>();
//将提前写好三个Fragment添加到集合中
fragments.add(new FirstFragment());
fragments.add(new SecondFragment());
fragments.add(new ThirdFragment());
//创建适配器
TabPageAdapter pageAdapter = new TabPageAdapter(getSupportFragmentManager(), fragments);
//设置ViewPager的适配器
mViewPager.setAdapter(pageAdapter);

把TabLayout和ViewPager组合,使用setupWithViewPager可以让TabLayout和ViewPager联动

mTabLayout.setupWithViewPager(mViewPager);

写到这感觉应可以了吧

什么情况，联动效果出来了，但Tab项的字去哪了

查看

setupWithViewPager

源码发现，在ViewPager适配器不为空的情况下，最终会调用

populateFromPag
4000
erAdapter()

方法

void populateFromPagerAdapter() {
removeAllTabs();//移除tab添加的所有tab项

if (mPagerAdapter != null)
final int adapterCount = mPagerAdapter.getCount();
for (int i = 0; i < adapterCount; i++) {
//创建Tab项，把tab显示的标题设置为从获取适配的getPageTitle的内容
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));
}
}
}
}

从上面可以看出，我们之前向TabLayout添加的Tab项调用这个方法后都被移除了，它会重新创建新的Tab项，tab显示的文字是从适配器

getPageTitle()

获取的 。上面我们写适配器的时候没有重写适配器的

getPageTitle()

方法 ，所以上面效果就是有Tab项但Tab项上没有文字了，解决办法就是重写适配器的

getPageTitle()

方法

public class TabPageAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
private String[] tabNames;//tab选项名字

public TabPageAdapter(FragmentManager fm, List<Fragment> fragments,String[] tabNames) {
super(fm);
this.fragments = fragments;
this.tabNames=tabNames;
}

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

@Override
public int getCount() {
return fragments.size();
}
//重写getPageTitle()方法
@Override
public CharSequence getPageTitle(int position) {
//返回tab选项的名字
return tabNames[position];
}
}

String[] mTabNames=new String[]{"tab1","tab2","tab3"};
TabPageAdapter pageAdapter = new TabPageAdapter(getSupportFragmentManager(), fragments,mTabNames);

这种方式tab选项不是我们自己创建的，如果想对tab项设置一下属性,通过

getTabAt(int index)

方法获取tab对象进行一些设置就可以了

关于TabLayout的属性设置

设置指示器样式（设置颜色和高度）

app:tabIndicatorColor="#1565C0"
app:tabIndicatorHeight="4dp"

设置选择时的字体颜色

app:tabSelectedTextColor="#9C27B0"

- 设置TabLayout显示的模式（fixed or scrollable）

TabLayout默认为fixed模式,将所有tab项都显示出来，占满它的宽度

app:tabMode="fixed"

scrollable 模式，如果TabLayout不能将所有tab显示，就可以滚动查看所有tab项

app:tabMode="scrollable"

TabLayout的监听事件

mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//tab项选中状态时执行
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {
//tab项取消选中状态时执行
}

@Override
public void onTabReselected(TabLayout.Tab tab) {
//tab项选中状态再次点击时执行

}
});

本文代码下载