com.google.android.material.tabs.TabLayout自定义样式

446 阅读1分钟

自定义宽度的indicator

image.png

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 注意设置gravity为center,因为默认左对齐 -->
    <item android:gravity="center">
        <shape android:shape="rectangle">
            <size
                android:width="@dimen/m20"
                android:height="@dimen/m2_5" />
        </shape>
    </item>
</layer-list>
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_laout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/transparent"
    app:tabIndicator="@drawable/indicator_circle_shape"/>

TabLayout 设置选中Tab字体加粗

image.png

protected void initViews() {
    ...
    updateBoldTab(viewDataBinding.tabLaout.getTabAt(0), Typeface.BOLD);
    viewDataBinding.tabLaout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            updateBoldTab(tab, Typeface.BOLD);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            updateBoldTab(tab, Typeface.NORMAL);
        }

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

        }
    });
}

/**
 * 设置tab 选中字体加粗,未选中默认 
 * 备注:缺点,滑动时tab字体会闪烁
 * @param tab
 * @param style
 */
private void updateBoldTab(TabLayout.Tab tab, int style) {
    if (tab == null || tab.getText() == null) {
        return;
    }
    String trim = tab.getText().toString().trim();
    SpannableString spStr = new SpannableString(trim);
    StyleSpan styleSpan_B = new StyleSpan(style);
    spStr.setSpan(styleSpan_B, 0, trim.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    tab.setText(spStr);
}

TabLayout 设置选中Tab字体加粗(还有一种方式,就是tab布局完全自定义)

image.png

    private static final String TAB1 = "我是TAB1";
    private static final String TAB2 = "我是TAB2";

    @Override
    protected void initViews() {
       ......
        //这里必须setText,否则字体颜色不会改变
        viewDataBinding.tabLaout.addTab(viewDataBinding.tabLaout.newTab().setText(TAB1));
        viewDataBinding.tabLaout.addTab(viewDataBinding.tabLaout.newTab().setText(TAB2));
        //自定义tab 布局
        initCustomTabView(0, TAB1);
        initCustomTabView(1, TAB2);
        //默认第一个tab字体加粗
        updateBoldTab(viewDataBinding.tabLaout.getTabAt(0), Typeface.BOLD, R.color.common_color_2C78FF);
        viewDataBinding.tabLaout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                updateBoldTab(tab, Typeface.BOLD, R.color.common_color_2C78FF);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                updateBoldTab(tab, Typeface.NORMAL, R.color.common_color_333333);
            }

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

            }
        });
    }
    
    /**
     * 自定义tab 布局
     * @param position
     * @param text
     */
    private void initCustomTabView(int position, String text) {
        TabLayout.Tab tab = viewDataBinding.tabLaout.getTabAt(position);
        if (tab != null) {
            tab.setCustomView(R.layout.main_top_item); // 使用自定义标签布局
            View customTabView = tab.getCustomView();
            assert customTabView != null;
            TextView tabTextView = customTabView.findViewById(R.id.tabTextView);
            //这里必须设置文本,否则字体不显示
            tabTextView.setText(text);
            tab.setTag(position); // 为标签设置索引以便后续使用
        }
    }

    /**
     * 设置tab 选中字体加粗,未选中默认
     *
     * @param tab
     * @param style
     * @param color
     */
    private void updateBoldTab(TabLayout.Tab tab, int style, int color) {
        if (tab == null || tab.getText() == null) {
            return;
        }
        View customTabView = tab.getCustomView();
        if (customTabView != null) {
            TextView tabTextView = customTabView.findViewById(R.id.tabTextView);
            if (tabTextView != null) {
                tabTextView.setTypeface(null, style);
                tabTextView.setTextColor(ContextCompat.getColor(this, color));
            }
        }
    }