Question

我看到很多问题说明如何为所选（活动）和未选中（非活动）选项卡设置不同的颜色。我也知道谷歌提供void setTabTextColors (int normalColor, int selectedColor)来实现这一目标。

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

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

如何实现此功能？

Answer 1

您可以通过查询此子项并手动更改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 2

只是增强@Marcelo Liberato的答案，以支持每个标签项的自定义背景。

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

输出：

Answer 3

如果您有兴趣使用库来实现此功能，那么此库运行良好。

https://github.com/astuetz/PagerSlidingTabStrip

Answer 4

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

更改文字颜色

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，则默认制表符的settext应该起作用。您可以使用自定义视图进行任何操作。

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

5 个答案: