如何创建模仿TabLayout.TabView默认文本样式的自定义Tab布局？

我之前也踩过这个坑！你找对了核心方向——TextAppearance.Design.Tab确实是TabLayout默认TabView用的文本样式，但光设置这个属性还不够，因为默认TabView的样式是多个主题属性+文本外观组合出来的，缺了任何一环都会看起来不一样。下面给你拆解几个关键修复点：

1. 对齐主题中的颜色属性 #

默认TabView的文本颜色不是固定值，而是用了主题里的tabTextColor和tabSelectedTextColor这两个属性。自定义布局时如果没关联这两个属性，颜色就会和默认Tab脱节。

在你的自定义TextView里这么写：

<TextView
    android:id="@+id/custom_tab_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="@style/TextAppearance.Design.Tab"
    android:textColor="?attr/tabTextColor"
    app:textColorSelected="?attr/tabSelectedTextColor" />

注意：app:textColorSelected需要依赖AppCompat库，如果没用到AppCompat，可以自己创建一个ColorStateList资源来处理选中/未选中状态。

2. 匹配默认的内边距 #

TabView默认有一套内边距，是从主题的tabPaddingStart、tabPaddingEnd等属性读取的。自定义布局如果没设置相同的padding，视觉上会和默认Tab的位置、大小不一致。

加上这些padding属性：

android:paddingStart="?attr/tabPaddingStart"
android:paddingEnd="?attr/tabPaddingEnd"
android:paddingTop="?attr/tabPaddingTop"
android:paddingBottom="?attr/tabPaddingBottom"

3. 避免覆盖文本外观的属性 #

有时候自定义TextView会继承其他样式，或者你自己显式设置了textSize、fontFamily、textAllCaps等属性，这些会直接覆盖TextAppearance.Design.Tab的设置。

解决方法：

• 移除自定义TextView上的这些显式属性，让textAppearance完全生效；
• 或者直接复制TextAppearance.Design.Tab的属性到你自己的样式里，避免主题差异：

  <style name="CustomTabText" parent="TextAppearance.Design.Tab">
      <item name="android:textSize">14sp</item>
      <item name="android:textStyle">bold</item>
      <item name="android:textAllCaps">true</item>
  </style>
  

4. 代码层同步选中状态（兜底方案） #

如果上面的方法还是没解决，可能是自定义View没有正确响应Tab的选中状态，可以在代码里手动同步：

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        TextView textView = tab.getCustomView().findViewById(R.id.custom_tab_text);
        TextViewCompat.setTextAppearance(textView, R.style.TextAppearance.Design.Tab);
        textView.setTextColor(ContextCompat.getColorStateList(getContext(), R.color.tab_selected_color));
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        TextView textView = tab.getCustomView().findViewById(R.id.custom_tab_text);
        TextViewCompat.setTextAppearance(textView, R.style.TextAppearance.Design.Tab);
        textView.setTextColor(ContextCompat.getColorStateList(getContext(), R.color.tab_unselected_color));
    }

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

核心思路就是：默认TabView的样式是主题属性+文本外观的组合，自定义布局要完全对齐这些细节，才能和原生Tab保持一致。

内容的提问来源于stack exchange，提问作者Andrew