TabLayout的基础使用

最新推荐文章于 2025-02-03 14:51:47 发布

天府萧炎恋熏儿

最新推荐文章于 2025-02-03 14:51:47 发布

阅读量4.7k

点赞数 2

文章标签： Android

本文链接：https://blog.youkuaiyun.com/tianfuxiaoyan/article/details/51194619

版权

TabLayout

作用：用于显示可切换的标签效果，替代PagerTabStrip的效果，且效果比PagerTabStrip要好看（用于实现类似于ActionBar的Tab导航效果，TabLayout的效果要优良与Tab导航模式）

原因：当前的TabLayout可以任意指定标签的位置，如页面上方或者下方

基本使用

在Project Structure的Denpendencies标签中选择+按钮添加Library：com.android.support:design:23.1.0

(导入design包，design包的全名：com.android.support:design:23.1.0)

在布局文件中添加要显示的TabLayout控件

注意：在设置标签名称时必须设置TabLayout的全路径

在代码中获取TabLayout控件对象
通过以下方式添加标签：

tabLayout.addTab(tabLayout.newTab().setText("Tab"+i));

同时Tab对象也可通过setIcon，setCustomView等方式设置标签中显示的图标或者自定义View视图

TabLayout常用的设置方法：

//设置选中标签下方导航条的颜色
//        tl.setSelectedTabIndicatorColor(Color.GREEN);
        //设置选中标签下方导航条的高度
//        tl.setSelectedTabIndicatorHeight(30);
        /*
        * 设置标签的字体颜色
        * 1.非选中标签的字体颜色
        * 2. 选中标签的字体颜色
        * */
//        tl.setTabTextColors(Color.BLUE,Color.GREEN);

        /*
        * 设置Tab的模式
        * 可选：
        * MODE_FIXED   宽度始终是tl控件指定的宽度，如果标签过多，那么就无限挤压控件
        * MODE_SCROLLABLE 每个标签都保持自身宽度，一旦标签过多，给标题栏提供支持横向滑动的功能
        * */
//        tl.setTabMode(TabLayout.MODE_SCROLLABLE);

        //设置Tab标签的对其方式
        //注意：此条属性必须配合MODE_FIXED进行使用
        /*
        * 可选择的参数值：
        * GRAVITY_FILL   让每个标签平分TabLayout的全部宽度
        * GRAVITY_CENTER   让每个标签显示自身宽度，然后所有标签居中显示
        * */
        tl.setTabGravity(TabLayout.GRAVITY_FILL);

常用属性：

app:tabIndicatorColor tab的指示符颜色
app:tabSelectedTextColor 选择tab的文本颜色
app:tabTextColor 普通tab字体颜色
app:tabMode 模式，可选fixed和scrollable fixed是指固定个数， scrollable是可以横行滚动的（逼格高）
app:tabGravity 对齐方式，可选fill和center

注意：此两种属性值只有在tabMode设置为fixed的情况下有效

监听事件：setOnTabSelectedListener

TabLayout的监听事件：

tl.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    //当标签被选中时运行的方法
    @Override
    public void onTabSelected(TabLayout.Tab tab) {

    }
    //当标签被取消选中时运行的方法
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }
    //当标签被重复选中时运行的方法
    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});

与ViewPager的结合使用

准备一个集合或数组用于存储所有的标题名称
在Viewpager的适配器子类中添加重写的getPageTitle方法，通过修改返回值设置对应position的标签上显示的标题文字
通过tablayout对象调用setUpWithPager方法将tabLayout与viewpager绑定起来

注意：此方法必须在viewpager设置了适配器之后才能调用

TabLayout与Fragment结合使用的方式：

通过以上方式初始化Tablayout的显示
通过设置setonTabSelectedlistener获取标签被选中的时刻
在标签被选中的onTabSelected方法中，获取被选中的标签对应Tag属性值
根据tag属性的值设置Fragment的显示内容

public void onTabSelected(TabLayout.Tab tab) {
    //获取当前被选中的tab标签的tag属性
    int tag = Integer.parseInt(tab.getTag().toString());

    /*
    *
    * */
    Fragment frag = manager.findFragmentByTag(""+tag);
    if (frag == null) {
        //代表没有被添加到屏幕上
        manager.beginTransaction().add(R.id.frameLayout,fragments.get(tag),tag+"").commit();
    }

    FragmentTransaction ft = manager.beginTransaction();
    for (int i=0;i<fragments.size();i++) {
        if (i == tag) {
            ft.show(fragments.get(i));
        } else {
            ft.hide(fragments.get(i));
        }
    }
    ft.commit();

}