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

时间:2014-04-04 09:11:03

标签: android customization tabwidget fragment-tab-host

我有TabWidget,独立于ÀctionBar, in a FragmentTabHost`。

我想自定义TabWidget的外观,但我不明白。我的目的是更改文本颜色和选择器颜色,如图所示,我可以更改TabWidget的背景。我不想为标签使用自定义TextView,因为标签必须具有Holo外观。

TabWidget

我试图将样式添加到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添加样式,但没有任何反应。

4 个答案:

答案 0 :(得分:9)

我终于找到了办法。在onCreateView

Fragment方法中使用此代码
    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的bakcground颜色设置为红色

答案 1 :(得分:0)

我没有更改标签本身,但我认为你可以使用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 drawable: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>

with 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

然后像往常一样用所有必需的属性和drawables定义你自己的风格......

答案 2 :(得分:0)

试试这个:

1.创造一种新风格:

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

2.在标签主机上,设置主题:

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

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

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

答案 3 :(得分:-2)

当我回答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或类似内容。