选项卡布局选项卡样式

Question

我使用来自com.android.support:design库的新TabLayout。我想要更改所选/未选选项卡的背景。

我查看了源代码，只发现tabBackground属性可以更改所有标签的颜色，而无法控制所选标签的颜色。

如何控制所选/未选选项卡的背景？

- IlyaEremin

---

@Doraemon 这篇文章的代码缩进很糟糕，而且没有关于“TabLayout”的任何信息，抱歉。 - IliaEremin

@jlopez并没有重复，他是在询问TabLayout，而不是关于actionBar选项卡的。 - Guilherme Torres Castro

Answer 1

定义：

    <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"
    .... />

- Akshay

---

选定的标签背景在哪里？ - Triet Doan

在 TabLayout 中，选择的选项卡会用 tabIndicatorColor 指示。 - Akshay

那么，在TabLayout中，我们不能更改所选选项卡的背景吗？ - Triet Doan

@AnhTriet 你需要定义一个 drawable-selector，其中包含两种状态：按下和未按下（或选中/未选中，我记不清了，你懂的）。然后将这个选择器设置为 tabBackground。这样就可以控制所选选项卡的背景。 - IliaEremin

有没有办法通过代码来设置选项卡背景选择器（例如控制按下时的效果），而不是XML？ - android developer

Answer 2

如果您查看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"/>

- Michal

Answer 3

我阅读了如何在选定的选项卡上设置ActionBar和选项卡背景样式，并找到了解决方法。这是一个非常相似的问题，但我专门为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具有相同的高度。因此，使用这种方式可以获得漂亮的过渡动画。

- IlyaEremin

---

这个解决方案有一个 bug - 指示器重叠了选项卡文本。 - IliaEremin

Answer 4

我也遇到了这个问题。我在整个项目中搜索了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

- Kevin

---

好的，我会尽力为您进行翻译。为什么说“问题已解决”？从中我们如何设置所选标签的背景？ - Triet Doan