android 顶部导航TabLayout+ViewPager（包含图标文字样式）

一、实现TabLayout顶部导航的效果的步骤：

1、导入Android Design Support Library即在build.gradle中添加

compile 'com.android.support:design:23.4.0'

2、在布局中使用Tablayout和ViewPager

<!--这种写法是文档提供的-->
<android.support.v4.view.ViewPager
android:layout_below="@id/tablayout"
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top">
</android.support.design.widget.TabLayout>

</android.support.v4.view.ViewPager>

3、创建Fragment

需注意的是Fragment一定要是v4包下的

public class MyTablayoutFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

String page = getArguments().getString("page");
TextView textView = new TextView(getActivity());
textView.setText("fragemnt :"+page);
return textView;
}
}

4、创建适配器

适配器为FragmentPageAdapter也是v4包下的

private class MyAdapter extends FragmentPagerAdapter{
public MyAdapter(FragmentManager fm) {
super(fm);
}

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

@Override
public int getCount() {
return mList.size();
}
//说明一下：TabLayout要使用这个方法的时候会先remove掉TabLayout添加的所有Tab，所以有的会看不到内容，看一下TabLayout的源码就会明白了
@Override
public CharSequence getPageTitle(int position) {
return mTitle.get(position);
}
}

mList为放Fragment的list集合，也就是曾现出来的页面；

mTitle为每页上面的标题，通过getTitle方法获取。

5、核心代码

1）首先找到布局中的两个控件TabLayout和ViewPager(通过findViewById);

tablayout = (TabLayout) findViewById(R.id.tablayout);
viewpager = (ViewPager) findViewById(R.id.viewpager);

2）接下来设置tablayout 的样式：

tablayout.setTabMode(TabLayout.MODE_SCROLLABLE);
tablayout.setTabGravity(TabLayout.GRAVITY_CENTER);

Android Material Design 中的TabLayout有两个比较有用的属性 app:tabMode、app:tabGravity，

（1）app:tabMode有两个值：fixed和scrollable。

（2）app:tabGravity有两个值：fill和center。

比较常用的是app:tabMode设置值scrollable，以及app:tabGravity设置值center。

比如，当app:tabMode设置值scrollable表示此TabLayout中当子view超出屏幕边界时候，将提供滑动以便滑出不可见的那些子view。

而app:tabGravity设置值center，在有些情况下，比如TabLayout中子view较少需要居中显示时候的情景。

3）接下来为TabLayout设置标题：

//设置tab的标题，通过adapter中的getTitle
tablayout.setTabsFromPagerAdapter(myAdapter);

4）接下来为viewPager设置适配器：

viewpager.setAdapter(myAdapter);

5）最后将Tab Layout和ViewPager相关联：

//将viewpager与tablayout 相关联
tablayout.setupWithViewPager(viewpager);

注意： 4）和5）的顺序是不能换的，因为从源码可知，tablayout要从viewpager 上获取adapter，若没有找到adapter则会抛异常。

二、实现导航是图标和文字的样式

如果我们要实现的只是文字的导航，就不会有辣么多事了，直接使用ViewPager的getPageTitle就可以完成；但是要想实现微信那样带有图标的底部导航就有一点点问题了。

1、首先看看setupWithViewPager这个方法都干了啥：

public void setupWithViewPager(@NonNull ViewPager viewPager) {
final PagerAdapter adapter = viewPager.getAdapter();
if (adapter == null) {
throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");
}

// First we'll add Tabs, using the adapter's page titles
setTabsFromPagerAdapter(adapter);

// Now we'll add our page change listener to the ViewPager
viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(this));

// Now we'll add a tab selected listener to set ViewPager's current item
setOnTabSelectedListener(new ViewPagerOnTabSelectedListener(viewPager));

// Make sure we reflect the currently set ViewPager item
if (adapter.getCount() > 0) {
final int curItem = viewPager.getCurrentItem();
if (getSelectedTabPosition() != curItem) {
selectTab(getTabAt(curItem));
}
}
}

2、接下来有一个方法应该注意到setTabsFromPagerAdapter

public void setTabsFromPagerAdapter(@NonNull PagerAdapter adapter) {
removeAllTabs();
for (int i = 0, count = adapter.getCount(); i < count; i++) {
addTab(newTab().setText(adapter.getPageTitle(i)));
}
}

看到这里是不是就有点蒙圈了呢，removeAllTabs();他把所有的Tab都remove了，然后自己从adapter中的getPageTitle方法中自己添加Tab，这个是不是让你有点抓狂。

3、救星来了

既然他给我们改了，哪么我们在给它改回来（adapter中不写getPageTitle方法哈），取到没个Tab，然后给他们设置文字和图片（icon注意哈，设置ICON时最好用选择器的方式：为了实现点击效果）

在setupWithViewPager之后写如下代码就可以解决问题了：

for (int i = 0; i < mTitleIcons.length; i++) {

//mTitleIcons[i]和mTitleNames[i]是放图片和文字的资源的数组
tablayout.getTabAt(i).setIcon(mTitleIcons[i]).setText(mTitleNames[i]);

//这个是设置选中和没选中的文字的颜色
tablayout.setTabTextColors( Color.parseColor("#666666"),Color.parseColor("#ff6b00"));

}

这样就实现了

这里补充说明一下：有些人会用到setCustomView去进行设置，但是使用了该方法后他的样式就失效了，看起来怪怪的所以还是按上面的方法吧。

TabLayout使用setupWithViewPager()方法绑定Viewpager后不显示文字