更改 TabWidget 中的文本颜色和选择器

Question

我有一个 TabWidget，独立于 ÀctionBar, in aFragmentTabHost`。

我想自定义TabWidget 的外观，但我不明白。我的意图是更改文本颜色和选择器颜色，正如您在图像中看到的那样，我可以更改TabWidget 的背景。我不想为选项卡使用自定义 TextView，因为选项卡必须具有 Holo 外观。

我尝试为TabWidget添加样式，但它不起作用。这样：

<TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            style="@style/MyTabs"
            />

和风格

<style name="MyTabs">
        <item name="android:textColor">@color/white</item>
        <item name="android:background">@drawable/tabs</item>
        <item name="android:backgroundStacked">@color/red_action_bar</item>
    </style>

我尝试使用parent="android:Widget.Holo.TabWidget" 从 theme.xml 添加样式，但没有任何反应。

Answer 1

我终于找到了办法。在Fragment的onCreateView方法中使用此代码

    for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
                View v = tabHost.getTabWidget().getChildAt(i);
                v.setBackgroundResource(R.drawable.tabs);

                TextView tv = (TextView) tabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.title);
                tv.setTextColor(getResources().getColor(R.color.white));
}

并将TabWidget的背景颜色设置为红色

Answer 2

我没有更改选项卡本身，但我假设您可以使用 styles.xml 中的这些样式来做到这一点...

<style name="Widget.Holo.TabWidget" parent="Widget.TabWidget">
        <item name="android:tabStripLeft">@null</item>
        <item name="android:tabStripRight">@null</item>
        <item name="android:tabStripEnabled">false</item>
        <item name="android:divider">?android:attr/dividerVertical</item>
        <item name="android:showDividers">middle</item>
        <item name="android:dividerPadding">8dip</item>
        <item name="android:measureWithLargestChild">true</item>
        <item name="android:tabLayout">@android:layout/tab_indicator_holo</item>
    </style>

使用 tab_indicator_holo.xml

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

        <!-- Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

        <!-- Pressed -->
        <!--    Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

        <!--    Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_focused_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_focused_holo" />
    </selector>

或者你也可以试试

  <style name="Widget.Holo.ActionBar.TabView" parent="Widget.ActionBar.TabView">
            <item name="android:background">@drawable/tab_indicator_ab_holo</item>
            <item name="android:paddingLeft">16dip</item>
            <item name="android:paddingRight">16dip</item>
        </style>

和 tab_indicator_ab_holo.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@color/transparent" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

        <!-- Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/list_focused_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

        <!-- Pressed -->
        <!--    Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/list_pressed_holo_dark" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

        <!--    Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />
    </selector>

最后使用两个 png-9 可绘制对象：tab_selected_holo 和 tab_unselected_holo。它们看起来就像你所说的两条粗细的蓝线。

或者你的意思是迷你标签？

<style name="Widget.ActionBar.TabView" parent="Widget">
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">@drawable/minitab_lt</item>
        <item name="android:paddingLeft">4dip</item>
        <item name="android:paddingRight">4dip</item>
    </style>

在 minitab_lt.xml 中

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:state_selected="true"
          android:drawable="@drawable/minitab_lt_press" />
    <item android:state_selected="true"
          android:drawable="@drawable/minitab_lt_selected" />
    <item android:state_pressed="true"
          android:drawable="@drawable/minitab_lt_unselected_press" />
    <item android:drawable="@drawable/minitab_lt_unselected" />
</selector>

如果您需要其他定义，只需在此处搜索 TabWidget：https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml

然后像往常一样使用所有必需的属性和可绘制对象定义自己的样式...

Answer 3

试试这个：

1.创建新样式：

<style name="TabText">
    <item name="android:textColor">@color/YOUR_COLOR</item>
</style>

2.在Tab Host上，设置主题：

<TabHost android:theme="@style/TabText">

3.TabWidget上可以正常设置的背景

<TabWidget android:background="#FFF"/>

Answer 4

正如我回答here 一样，这实际上可以使用 XML 主题来完成。 TabWidget 将android:textPrimaryColor 用于选定的选项卡，android:textSecondaryColor 用于未选定的选项卡。强调色由colorAccent 确定，背景色由colorPrimary 确定。因此，您可以像这样实现所需的自定义：

在styles.xml中：

<style name="TabWidgetTheme" parent="AppTheme">
    <item name="colorPrimary">@color/your_primary_color</item>
    <item name="colorAccent">@color/your_accent_color</item>
    <item name="android:textPrimaryColor">@color/your_primary_color</item>
    <item name="android:textSecondaryColor">@color/your_secondary_color</item>
</style>

在您的布局中：

<TabHost
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:theme="@style/TabWidgetTheme"/>

请注意，android:theme 不应直接位于 TabWidget 本身中，而应包含在 TabHost 或类似名称中。