关于TabLayout在开发中遇到的一些问题

最新推荐文章于 2022-03-31 19:41:29 发布

一只调皮的皮卡丘

最新推荐文章于 2022-03-31 19:41:29 发布

阅读量743

点赞数

本文链接：https://blog.youkuaiyun.com/u011384042/article/details/79667089

版权

本文介绍了TabLayout组件的常见使用场景及遇到的问题解决方法，包括如何让TabLayout在不同屏幕尺寸下平均分布、自定义Tab样式及实现Tab与ViewPager联动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TabLayout提供了一个水平的布局用来展示Tabs，首先TabLayout一般都是配合Viewpager使用的，Viewpager里的Fragment随着顶部的Tab一起联动。以下在使用TabLayout时遇到一些问题：

依赖：compile 'com.android.support:design:26.+'

1.TabLayout在平板或横屏使用时不能平均分布，会挤在中间，需要在布局文件中加入以下属性

        app:tabGravity="fill"
        app:tabMaxWidth="0dp"
        app:tabMode="fixed"

2.tab.setCustomView()，我们可以自定义tab的样式

public static void setTab(LayoutInflater inflater, TabLayout layout, String title[], int imgs[]) {
        for (int i = 0; i < title.length; i++) {
            TabLayout.Tab tab = layout.newTab();
            View view = inflater.inflate(R.layout.tab_view, null);

            TextView tv = view.findViewById(R.id.tab_tv_title);
            tv.setText(title[i]);
            ImageView img = view.findViewById(R.id.tab_img_icon);
            img.setImageResource(imgs[i]);

            tab.setCustomView(view);
            layout.addTab(tab);
        }
    }

当我们使用自己的布局时，在切换Tab改变字体颜色时，

        app:tabSelectedTextColor="color/holo_orange_light"
        app:tabTextColor="@color/color_red"

这两个属性是不起作用的，就需要我们自己写监听方法

private void changeSelectTab(TabLayout.Tab tab, boolean isSelect) {
        View view = tab.getCustomView();
        TextView tv = view.findViewById(R.id.tab_tv_title);
        ImageView img = view.findViewById(R.id.tab_img_icon);
        String text = tv.getText().toString();
        switch (text) {
            case "首页":
                if (isSelect)
                    img.setImageResource(R.mipmap.ic_user_name);
                else
                    img.setImageResource(R.mipmap.ic_launcher);
                break;
            case "中间":
                if (isSelect)
                    img.setImageResource(R.mipmap.ic_user_name);
                else
                    img.setImageResource(R.mipmap.ic_launcher);
                break;
            case "我的":
                if (isSelect)
                    img.setImageResource(R.mipmap.ic_user_name);
                else
                    img.setImageResource(R.mipmap.ic_launcher);
                break;
        }
        if (isSelect) {
            tv.setTextColor(getResources().getColor(R.color.color_red));
        } else {
            tv.setTextColor(getResources().getColor(R.color.color_tabBg));
        }
    }

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        changeSelectTab(tab,true);
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        changeSelectTab(tab,false);
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});

如果想要设置默认选中，有viewpager的情况下，只设置 tabLayout.getTabAt(0).select(); 是不起作用的，还需要设置 viewPager.setCurrentItem(0);
在这里只需要设置 changeSelectTab(tabLayout.getTabAt(0),true);即可

3.与ViewPager联动，在设置以下方法之后，Tab就消失不见了

tabLayout.setupWithViewPager(viewPager);

具体原因网上也有介绍。

通过调用

        tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

这两个方法也可以实现TabLayout与ViewPager的关联。