首页 > 代码库 > 【Android - MD】之TabLayout的使用

【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地址

【Android - MD】之TabLayout的使用