TabLayou踩坑记录

最新推荐文章于 2025-05-15 21:28:39 发布

原创最新推荐文章于 2025-05-15 21:28:39 发布 · 841 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android

android 专栏收录该内容

5 篇文章

订阅专栏

本文记录了在Android开发中使用TabLayout遇到的几个问题及其解决方案，包括：长按Tab显示tab名的Toast，设置Tab之间的间距，以及如何定制字体大小、颜色、字体并切换背景颜色。对于TabLayout的选中状态，还提到了防止字体大小变化的处理方法。

1、tabLayout 长按TAB弹出tab名Toast

  解决方法：tabLayout初始化后

1、 //在创建时立即关闭工具提示文本

  for (int i = 0; i < tabLayout.getTabCount(); i++) {
            if (tabLayout.getTabAt(i) != null) {
                TooltipCompat.setTooltipText(tabLayout.getTabAt(i).view, null);
            }
        }

2、//TabLayout的选中改变监听

TabLayout.OnTabSelectedListener onTabSelectedListener = new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //重复上面的代码——工具提示在任何选项卡重新显示后都会自动重置，所以我必须不断地关闭它们。
                for (int i = 0; i < tabLayout.getTabCount(); i++) {
                    if (tabLayout.getTabAt(i) != null) {
                                   TooltipCompat.setTooltipText(tabLayout.getTabAt(i).view, null);
                    }
                }
            }

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

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

            }
        };
         tabLayout.addOnTabSelectedListener(onTabSelectedListener);

2、tabLayout tab和tab之间设置间距

这里就引用别的大佬的链接了：https://juejin.cn/post/6999807478284173342?share_token=b3ea8902-a879-4142-bed7-ed336b00ec77
最后一个就是

3、tabLayout 设置默认字体大小，颜色，和字体，切换背景颜色

1、设置默认的字体

 

 1. 1、xml

：
   <com.google.android.material.tabs.TabLayout
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_gravity="left|center_vertical"
            android:background="@color/white"
            app:tabSelectedTextColor="@color/white" //选中的字体颜色
            app:tabTextColor="@color/black"//为选中的字体颜色
            app:tabBackground="@drawable/tab_selector" //设置选中和没选中的背景色
            app:tabPaddingStart="0dp"
            app:tabPaddingEnd="0dp"  
            app:tabContentStart="0dp"    //这里当在代码里动态设置字体样式时必须设置，否则有的手机字体会变大，tab内容出现变形
            app:tabIndicatorHeight="0dp" //取消指示器
            app:tabGravity="center"
            app:tabMinWidth="55dp"
            app:tabTextAppearance="@style/TabLayoutUn"
            app:tabRippleColor="#00000000" //点击没有点击的自带阴影效果“
            />

2、切换背景颜

tab_selector.xml
  <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_bg" android:state_selected="true" />
</selector>

tab_bg.xml

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="背景颜色" />
    <corners android:radius="圆角弧度" />

</shape>

style.xml
<style name="TabLayoutUn">
        <item name="android:textSize">16sp</item>
        <item name="android:fontFamily">@font/本地字体</item>
        <item name="android:textColor">#232934</item>
    </style>

4、代码里动态设置选中和未选中的样式，要使这一步再某些机型上字体设置无效（选中后字体变大，一定要设置 TabLayout的 app:tabPaddingStart=“0dp”
app:tabPaddingEnd=“0dp”
app:tabContentStart=“0dp” ）

//TabLayout的选中改变监听
        TabLayout.OnTabSelectedListener onTabSelectedListener = new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                tabLayoutTextSelectedStyle(tab, true)
            }

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

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

            }
        }
        tabLayout.addOnTabSelectedListener(onTabSelectedListener);

//TabLayout选中和未选中的样式
    private void tabLayoutTextSelectedStyle(TabLayout.Tab tab, boolean select) {
        View customView = tab.getCustomView();
        if (customView == null) {
            tab.setCustomView(R.layout.text_layout); //自定义的tab，里面只有一个TextView
        }
        TextView textView = tab.getCustomView().findViewById(android.R.id.text1);//自定义布局里的textview id一定要是text1
        if (select) {
            //选中的title样式
            textView.setTextAppearance(R.style.TabLayoutText);//这里的样式参照3
        } else {
            //没有选中的title样式
            textView.setTextAppearance(R.style.TabLayoutTextUn);
        }

4、tabLayou的指示器设置

 <com.google.android.material.tabs.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="200dp"
                android:layout_height="300dp"
                android:layout_gravity="left|center_vertical"
                android:background="@color/white"
                app:tabContentStart="0dp"
                app:tabGravity="fill"
                app:tabMaxWidth="0dp"
                app:tabRippleColor="@color/transparent"
                app:tabSelectedTextColor="@color/black"
                app:tabTextAppearance="@style/TabLayoutTextUnSelected"
                app:tabTextColor="#7B7E85"
                app:tabIndicatorColor="#E57349"//指示器颜色
                app:tabIndicatorFullWidth="false" //指示器不等于tab的宽
                app:tabIndicatorGravity="bottom" //指示器显示的位置
                app:tabIndicator="@drawable/tab_indicator" //自定义指示器样式
                app:tabPaddingStart="0dp"
                />

tab_indicator.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 若不设置 gravity，则 Indicator 宽度会填满整个 item -->
    <item android:gravity="start" android:start="-2dp">
        <shape>
            <corners android:radius="@dimen/common_dp_2" />
            <size
                android:width="20dp" //指示器宽
                android:height="3dp" /> //指示器高
        </shape>
    </item>
</layer-list>