如何更改ActionBar導航選項卡的顏色？

Question

我在應用程序中有一個ActionBar，並且它嵌入了導航選項卡（不是TabHost！）。默認情況下，選項卡顯示爲深灰色，所有選項卡下都有細藍線，選定選項卡上顯示藍色標記。

我會覆蓋哪些樣式來更改這些顏色？

Answer 1

我沒有改變自己的標籤，但我會假設你可以從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。它們看起來像你談論的兩條更粗更薄的藍線。

或者你是指minitabs？

<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 2

如果你想輕鬆地定製你的標籤欄，你可以使用這個偉大的工具： http://jgilfelt.github.io/android-actionbarstylegenerator

您只需要選擇您想要的顏色，它會自動生成作風個XML的PNG圖像等