TabLayout+ViewPager

2017-02-06

ViewPage，这个人人不陌生的滑动导航控件，配合Fragment使用实现底部或顶部的导航菜单，网上也有许许多多关于ViewPage的tab的开源代码，在5.0之前用过ViewPagerIndicator、PagerSlidingTabStrip等各种tab指示器的开源库，但是android5.0给我们带来了design库，里面就有我们今天的主角TabLayout。

如何使用

TabLayout在使用上是非常简单的

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="#ADBE107E"
    app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

属性说明

app:tabMode
tabMode有两个值：fixed和scrollable，表示超过一屏幕时是否可以滚动。fixed表示填充，scrollable表示可以滚动。
app:tabGravity
tabGravity有两个值：fill和center，表示tab在未满一屏时的对齐方式。fill表示填充，center表示居中。
app:tabIndicatorColor
选中时tab下划线的颜色
app:tabSelectedTextColor
选中时tab字体颜色
app:tabTextColor
未选中tab字体颜色

java代码部分则是添加adapter与tab绑定

mTabLayout = (TabLayout) view.findViewById(R.id.tabs);
mViewPager = (ViewPager) view.findViewById(R.id.viewpager);
TabFragmentAdapter adapter = new TabFragmentAdapter(getSupportFragmentManager(), fragments, titles);
mViewPager.setAdapter(adapter);
mTabLayout.setupWithViewPager(mViewPager);

简单的一句setupWithViewPager就可以完成ViewPage与TabLayout的联动，TabLayout也提供了addOnTabSelectedListener来监听tab的选中事件

mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
                
    }
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
    }
    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
});

是不是非常简单的实现了ViewPage的tab问题呢

最后

TabLayout与ViewPage联合很好的解决了指示器的问题，毕竟这是官方的解决方案，一些开源库已经很久没有维护了，而且在使用上是非常简单的。