TabLayout ：为每个选项卡设置自定义颜色

Question

我看到很多问题都在说如何为选定（活动）和未选定（非活动）选项卡设置不同的颜色。我也知道 google 提供 void setTabTextColors (int normalColor, int selectedColor) 来实现这一点。

我的要求有点不同，我正在开发一个带有 TabLayout 和 CardView 的测验应用程序。 TabLayout 允许用户在问题之间导航，CardView 用于显示问题。

我需要将用户已选择答案的选项卡的颜色设置为不同于用户尚未回答的选项卡的颜色。默认情况下，TextColor 是黑色的，但如果用户选择了一个答案，那么 tabcolor 应该变为蓝色（例如）并且它应该保持这种状态直到用户退出。我有一个名为 Select 的 int 数组，它将保存用户选择的选项的值（值范围在 1 - 4 之间）。在分配 Select 数组时，我还使用 -1 对其进行了初始化。我想设置一个循环，然后如果数组是 -1 则保留选项卡原样或将 tabcolor 设置为蓝色。

我怎样才能实现这个功能？

Answer 1

如果您有兴趣使用某个库来实现此功能，这个库效果很好。

https://github.com/astuetz/PagerSlidingTabStrip

Answer 2

与 doc getTabTextColors() -> Gets the text colors for the different states (normal, selected) used for the tabs. 一样，选项卡只能有 2 个状态。如果继承 Tab class 并添加新状态，则实现您想要的唯一方法，例如：tabAlreadyVisited。然后 @Override 绘制方法根据 tabAlreadyVisited 属性值更改背景颜色。或者使用 setTabTextColors

更改文本颜色

Answer 3

您可以通过查询此子项并手动更改 TextView 来处理 TabLayout 内部结构。当您升级到另一个支持库版本时，这可能会破坏您的代码，但只要您在更新时保持跟踪和测试，它应该可以工作：

private void updateTabTextColors() {
    LinearLayout tabsContainer = (LinearLayout) mTabLayout.getChildAt(0);
    for (int i = 0; i < mTabLayout.getTabCount(); i++) {
        LinearLayout item = (LinearLayout) tabsContainer.getChildAt(i);
        TextView tv = (TextView) item.getChildAt(1);
        tv.setTextColor(Select[i] == -1 ? Color.BLACK : Color.BLUE);
    }
}

Answer 4

只是增强了的回答以支持每个选项卡项的自定义背景。

    LinearLayout tabsContainer = (LinearLayout) mTabLayout.getChildAt(0);
    LinearLayout childLayout1 = (LinearLayout)tabsContainer.getChildAt(2);
    LinearLayout childLayout2 = (LinearLayout)tabsContainer.getChildAt(3);

    LinearLayout tabView = (LinearLayout) childLayout1.getChildAt(0).getParent();
    tabView.setBackgroundResource(R.drawable.ic_blue_selector);

    tabView = (LinearLayout) childLayout2.getChildAt(0).getParent();
    tabView.setBackgroundResource(R.drawable.ic_red_selector);

自定义 xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/ll_tab_holder"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/ll_tab_icon_title_holder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/tab_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:scaleType="fitCenter" />

        <TextView
            android:id="@+id/tab_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textAppearance="@style/lasuCustomTabText" />
    </LinearLayout>

    <TextView
        android:id="@+id/tab_only_title"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:textAllCaps="true"
        android:textSize="12sp"
        android:layout_gravity="center"
        android:gravity="center"
        android:textColor="@drawable/ic_tab_text_color_selector" />
</LinearLayout>

输出：

Answer 5

可以为您的选项卡设置自定义视图

 TabLayout.Tab yourTab = tabLayout.newTab();
 yourTab.setCustomView(R.layout.red_text_view);

而red_text_view.xml是

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@android:id/text1"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:fontFamily="sans-serif-medium"
      android:gravity="center"
      android:textColor="#f44336"/>

如果您使用 @android:id/text1 默认选项卡的设置文本应该可以工作。您可以使用自定义视图做任何您想做的事情。

TabLayout ：为每个选项卡设置自定义颜色

TabLayout : Set custom color for each tab

android

android-tablayout