【Android - MD】之TabLayout的使用

TabLayout是Android 5.0新特性——Material Design中的一个控件，是一个标签页的导航条，常结合ViewPager完成页面导航。

和其他MD控件一样，使用TabLayout之前需要在gradle文件中声明依赖：

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

1、TabLayout的属性：

        app:tabIndicatorColor：TabLayout下面提示条的颜色
        app:tabIndicatorHeight：TabLayout下面提示条的高度
        app:tabSelectedTextColor：TabLayout中被选中的Tab的文本颜色
        app:tabTextColor：TabLayout中没有被选中的Tab的文本颜色

2、TabLayout和ViewPager结合使用：

TabLayout最常见的用法就是结合ViewPager使用完成页面的导航。使用中需要注意，TabLayout需要先绑定到ViewPager，然后再设置Tab标题，否则会发生Tab标题文本消失的问题。代码如下：

        // 将TabLayout和ViewPager进行绑定
        tabs.setupWithViewPager(vp);
        // TabLayout中Tab的排列方式，FIXED表示平分布局；SCROLLABLE表示线性排列，可滑动
        tabs.setTabMode(TabLayout.MODE_FIXED);
        // 给TabLayout中的Tab添加文本
        for (int i = 0; i < titles.size(); i++) {
            tabs.getTabAt(i).setText(titles.get(i));
        }
        // 为ViewPager添加适配器
        vp.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }

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

3、TabLayout添加图标：

如果是主页面上的TabLayout，那么肯定是有图标的。我们以前会使用RadioGroup来实现这一功能，现在有了TabLayout，就可以更加轻松的实现了。实现方法就是为通过setIcon()方法为每个Tab设置Icon即可。例如：上面的代码可以改成：

        // 将TabLayout和ViewPager进行绑定
        tabs.setupWithViewPager(vp);
        // TabLayout中Tab的排列方式，FIXED表示平分布局；SCROLLABLE表示线性排列，可滑动
        tabs.setTabMode(TabLayout.MODE_FIXED);
        // 给TabLayout中的Tab添加图标和文本
        for (int i = 0; i < titles.size(); i++) {
            tabs.getTabAt(i).setText(titles.get(i)).setIcon(R.mipmap.ic_launcher);
        }
        // 为ViewPager添加适配器
        vp.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }

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

运行结果如图所示：

 

以上就是对TabLayout基本用法的介绍，下面贴出码云中的源码，供大家参考。

DEMO地址