TabLayout 选项卡样式

Question

我使用 com.android.support:design 库中的新 TabLayout。我想更改 selected/unselected 选项卡的背景。我查看了来源，发现只有 tabBackground 属性更改了所有选项卡的颜色并且不控制选定的选项卡颜色。

如何控制 selected/unselected 选项卡背景？

Answer 1

我阅读了 How to Style ActionBar, tab background on selected tab 并弄清楚该怎么做。这确实是类似的问题，但我专门为 TabLayout:

找到了很棒的解决方案

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@color/tab_layout_color"
    app:tabIndicatorHeight="48dp"
    app:tabIndicatorColor="@color/selected_tab_color"
    />

请注意 layout_height 和 tabIndicatorHeight 具有相同的高度。所以你用这种方式得到漂亮的过渡动画。

Answer 2

定义：

    <style name="AppTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabMaxWidth">@dimen/tab_max_width</item>
        <item name="tabIndicatorColor">?attr/colorAccent</item>
        <item name="tabIndicatorHeight">4dp</item>
        <item name="tabPaddingStart">6dp</item>
        <item name="tabPaddingEnd">6dp</item>
        <item name="tabBackground">?attr/selectableItemBackground</item>
        <item name="tabTextAppearance">@style/AppTabTextAppearance</item>
        <item name="tabSelectedTextColor">@color/range</item>
    </style>

    <!-- for text -->
    <style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">12sp</item>
        <item name="android:textColor">@color/orange</item>
        <item name="textAllCaps">false</item>
    </style>

申请：

<android.support.design.widget.TabLayout
    style="@style/AppTabLayout"
    app:tabTextAppearance="@style/AppTabTextAppearance"
    android:layout_width="match_parent"
    .... />

Answer 3

我也遇到了这个问题。我刚刚在整个项目中搜索了tabIndicatorColor，在一些R.java中找到了以下代码：

       @see #TabLayout_tabBackground
       @see #TabLayout_tabContentStart
       @see #TabLayout_tabGravity
       @see #TabLayout_tabIndicatorColor
       @see #TabLayout_tabIndicatorHeight
       @see #TabLayout_tabMaxWidth
       @see #TabLayout_tabMinWidth
       @see #TabLayout_tabMode
       @see #TabLayout_tabPadding
       @see #TabLayout_tabPaddingBottom
       @see #TabLayout_tabPaddingEnd
       @see #TabLayout_tabPaddingStart
       @see #TabLayout_tabPaddingTop
       @see #TabLayout_tabSelectedTextColor
       @see #TabLayout_tabTextAppearance
       @see #TabLayout_tabTextColor

这样问题就解决了。希望这会对你有所帮助。
即我使用 IDEA

Answer 4

如果您查看 TabLayout.class，您会注意到选项卡实际布局的内部 TabView.class。它与任何其他具有 isSelected 属性的布局相同。选择选项卡也会对此产生影响，因此您需要做的就是创建选择器背景可绘制对象

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@color/tab_bg_selected"/>
<item android:drawable="@color/tab_bg_unselected"/></selector>

并将其附加到 tabBackground 属性，例如在 XML 喜欢

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@drawable/tab_bg"
            app:tabIndicatorHeight="4dp"/>

TabLayout 选项卡样式

TabLayout tab style

android

android-design-library