Day3(下) TabLayout的用法大全及其属性详解

通常在ViewPager的上方，我们都会放一个标签指示器与ViewPager进行联动，同样“爱阅”也是遵照这样的设计风格进行设计和实现的。可选择的实现方案其实有很多，比如：TabPageIndicator或者GitHub上的开源框架PagerSlidingTabTrip。但是这些都是第三方的而且也已经比较老了，所以我使用Android自带的控件TabLayout来实现这个效果，而且TabLayout更为强大，因为Tab标签可以使用自定义View并且可以实现多种属性的设置。

首先来看下效果图：

点此进入目录：[干货] 十天 教你从创意到上线APP

一、TabLayout的基本使用

1、在布局中加入该控件

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout_main"
        style="@style/MyCustomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        android:background="#D2A2CC"
        app:tabMode="scrollable" />

2、在代码中找到并设置

    @BindView(R.id.tab_layout_main)
    TabLayout mTabLayout;
    mTabLayout.addTab(tablayout.newTab().setText("新闻"));
    mTabLayout.addTab(tablayout.newTab().setText("天气"));
    mTabLayout.addTab(tablayout.newTab().setText("娱乐"));

显示效果

向上滑动还可收缩成这样：

这样我们就把最简单的用法掌握了，但如果你想要往里面加入一些个性化设置也是可以的，比如你想加入图片的话，可以这么办：

    mTabLayout.addTab(tablayout.newTab().setText("新闻").setIcon(R.mipmap.icon1));
    mTabLayout.addTab(tablayout.newTab().setText("天气").setIcon(R.mipmap.icon2));
    mTabLayout.addTab(tablayout.newTab().setText("娱乐").setIcon(R.mipmap.icon3));

二、结合ViewPager施展魔法

基本的设置结束了，那么这个时候我们要实现最开始的效果 —— 滑动ViewPager的同时改变Tab的状态，要真么办呢？

1、首先要准备好ViewPager的数据

在我们上午实现的ViewPagerAdapter中重写getPageTitle()方法，以此返回每个ViewPager的标题的数据，代码如下：

    @Override
    public CharSequence getPageTitle(int position) {
        return mCategoryList.get(position).getName();
    }

这个方法里对应返回的值就是我们最终想要显示在Tab中的标题，所以你要可以根据你自己的业务场景来进行实现。

2、把ViewPager和TabLayout进行绑定

代码很简单，一行搞定：

    mTabLayout.setupWithViewPager(mViewpager);

没错，setupWithViewPager()是TabLayout自带的方法，就是专门用来和ViewPager视图进行绑定的。如果没有其他问题，你会发现我们的基本视图效果已经实现了，但是如果你想要实现更多的属性效果，可以参看接下来总结的一些常用属性。

三、TabLayout常用属性

1、颜色改变

• 改变选中字体的颜色

app:tabSelectedTextColor="@android:color/holo_orange_light"

• 改变未选中字体的颜色

app:tabTextColor="@color/colorPrimary"

• 改变指示器下标的颜色

app:tabIndicatorColor="@android:color/holo_orange_light"

• 改变整个TabLayout的颜色

app:tabBackground="color"

2、尺寸与图标

• 改变TabLayout内部字体大小

app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"

• 改变指示器下标的高度

app:tabIndicatorHeight="4dp"

• 添加图标

mTabLayout.addTab(tabLayout.newTab().setText("Tab A").setIcon(R.mipmap.ic_launcher));

• 内容的显示模式

app:tabGravity="center"  // 居中，如果是fill，则是充满

3、宽度限制

• 设置最大的tab宽度

app:tabMaxWidth="xxdp"

• 设置最小的tab宽度

app:tabMinWidth="xxdp"

4、TabLayout的监听事件

选中了某个tab的监听事件OnTabSelectedListener()

    tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {

        @Override
        public voidonTabSelected(TabLayout.Tab tab) {
            //选中了tab的逻辑
        }

        @Override
        public voidonTabUnselected(TabLayout.Tab tab) {
            //未选中tab的逻辑
        }

        @Override
        public voidonTabReselected(TabLayout.Tab tab) {
            //再次选中tab的逻辑
        }
    });

至此为止，我们TabLayout的最常用属性就介绍完毕了，如果你还有更复杂的需求，比如：Tab点击缩放的实现，可以参考该链接：TabLayout使用方法详解

联系方式：

简书：WillFlow
优快云：WillFlow
微信公众号：WillFlow