Android 设置TabLayout选中后的字体、大小、颜色等设置

原创已于 2022-10-26 15:07:58 修改 · 1.3w 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#android

于 2022-07-26 14:23:28 首次发布

本文介绍了如何在Android TabLayout中设置选中和未选中时的颜色，并动态调整TextView字体大小，以及创建一个封装工具类来简化操作。通过TabLayoutUtil实现颜色和样式定制，包括监听器的设置和字体大小切换。

初始化
1）在xml中设置颜色变化

app:tabTextColor="@color/white_7f"
app:tabSelectedTextColor="@color/white"

其中，tabTextColor未未选中时的颜色，tabSelectedTextColor为选中时的颜色。
2）对已定义好的TabLayout进行处理。

//获取TabLayout设置的字体颜色,包含tabTextColor及tabSelectedTextColor
ColorStateList colorStateList = tabLayout.getTabTextColors();
//对每个Tab 设置customView，设置为TextView，用于设置字体大小等
for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    assert tab != null;
    String tabStr = Objects.requireNonNull(tab.getText()).toString();
    if(tab.getCustomView() == null || !(tab.getCustomView() instanceof TextView)){
         TextView tv = new TextView(tabLayout.getContext());
         tv.setTextColor(colorStateList);
         tv.setText(tabStr);
         tv.setTextSize(tab.isSelected()?selectSize:unSelectSize);
         tab.setCustomView(tv);
    }
}

在监听器中设置样式

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                String tabStr = Objects.requireNonNull(tab.getText()).toString();
                if(onSelectedListener!=null){
                    onSelectedListener.onSelected(tabStr);
                }
                if(enableChangeSize){
                    TextView tv = (TextView) tab.getCustomView();
                    assert tv != null;
                    tv.setTextSize(selectSize);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if(enableChangeSize){
                    TextView tv = (TextView) tab.getCustomView();
                    assert tv != null;
                    tv.setTextSize(unSelectSize);
                }
            }

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

            }
        });

在选中时或未选中时，获取已设置的TextView，然后可以去设置需要的大小、加粗等变化。

我做了一个简单的封装，这里分享一下。


public class TabLayoutUtil {
    private final TabLayout tabLayout;
    private boolean enableChangeSize = false;
    private int unSelectSize = 15,selectSize = 16;

    private TabLayoutUtil(TabLayout tabLayout) {
        this.tabLayout = tabLayout;
    }

    public static TabLayoutUtil build(TabLayout tabLayout){
        return new TabLayoutUtil(tabLayout);
    }

    public TabLayoutUtil enableChangeStyle() {
        this.enableChangeSize = true;
        ColorStateList colorStateList = tabLayout.getTabTextColors();
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            assert tab != null;
            String tabStr = Objects.requireNonNull(tab.getText()).toString();
            if(tab.getCustomView() == null || !(tab.getCustomView() instanceof TextView)){
                TextView tv = new TextView(tabLayout.getContext());
                //使用默认TabItem样式时，需要添加LayoutParams，否则会出现Tab文字不居中问题
                ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(-2,-2);
                tv.setLayoutParams(params);
                tv.setTextColor(colorStateList);
                tv.setText(tabStr);
                tv.setTextSize(tab.isSelected()?selectSize:unSelectSize);
                tab.setCustomView(tv);
            }
        }
        return this;
    }

    public TabLayoutUtil setTextSizes(int selectSize,int unSelectSize) {
        this.selectSize = selectSize;
        this.unSelectSize = unSelectSize;
        return this;
    }


    public TabLayoutUtil setOnSelectedListener(OnSelectedListener onSelectedListener) {
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                String tabStr = Objects.requireNonNull(tab.getText()).toString();
                if(onSelectedListener!=null){
                    onSelectedListener.onSelected(tabStr);
                }
                if(enableChangeSize){
                    TextView tv = (TextView) tab.getCustomView();
                    assert tv != null;
                    tv.setTextSize(selectSize);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if(enableChangeSize){
                    TextView tv = (TextView) tab.getCustomView();
                    assert tv != null;
                    tv.setTextSize(unSelectSize);
                }
            }

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

            }
        });
        return this;
    }

    public interface OnSelectedListener{
        void onSelected(String tabStr);
    }
}