【Android - MD】之TabLayout的使用 - Android

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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();

            }

        });