2012-08-14 6 views
6

Sono stato bloccato su questo problema per alcuni giorni. Qualcuno può aiutarmi a personalizzare le schede visualizzate sotto ActionBar (NavigationMode è NAVIGATION_MODE_TABS)?Personalizza ActionBar TabBar (ActionBarSherlock)

In sostanza, voglio cambiare il colore di sfondo delle schede e il colore di sottolineatura della scheda attualmente selezionata. Finora questo è quello che ho fatto, eppure non funziona. Sto usando ActionBarSherlock.

<style name="Theme.Styled" parent="@style/Theme.Sherlock.Light"> 
    <item name="actionBarStyle">@style/Widget.Theme.Styled.ActionBar</item> 
    <item name="android:actionBarStyle">@style/Widget.Theme.Styled.ActionBar</item> 

    <item name="actionBarTabBarStyle">@style/customActionBarTabStyle</item> 
    <item name="android:actionBarTabBarStyle">@style/customActionBarTabStyle</item> 

    <item name="actionBarTabBarStyle">@style/customActionBarTabBarStyle</item> 
    <item name="android:actionBarTabBarStyle">@style/customActionBarTabBarStyle</item> 

    <item name="actionBarTabTextStyle">@style/customActionBarTabTextStyle</item> 
    <item name="android:actionBarTabTextStyle">@style/customActionBarTabTextStyle</item> 
</style> 

<style name="customActionBarTabStyle" parent="style/Widget.Sherlock.Light.ActionBar.TabView"> 
    <item name="android:background">@color/red</item> 

    <item name="android:textSize">12dp</item> 

</style> 

<style name="customActionBarTabBarStyle" parent="style/Widget.Sherlock.Light.ActionBar.TabBar"> 
    <item name="android:background">@color/red</item> 
</style> 

<style name="customActionBarTabTextStyle" parent="style/Widget.Sherlock.Light.ActionBar.TabText"> 
    <item name="android:titleTextStyle">@style/Theme.Styled.ActionBar.TitleTextStyle</item> 
    <item name="android:textStyle">bold</item> 
</style> 

<style name="Widget.Theme.Styled.ActionBar" parent="Widget.Sherlock.ActionBar"> 
    <item name="android:background">#A9E2F3</item> 
    <item name="background">#A9E2F3</item> 
    <item name="android:titleTextStyle">@style/Theme.Styled.ActionBar.TitleTextStyle</item> 
</style> 

<style name="Theme.Styled.ActionBar.TitleTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title"> 
    <item name="android:textColor">@color/red</item> 
    <item name="android:textStyle">bold</item> 
</style> 

<style name="Animations" /> 

risposta

3

È possibile utilizzare la disposizione style generator, o di ottenere un po 'di comprensione da this o this domanda relativa.

+1

Qui ho spiegato alcune cose sull'azione dello sherlock per lo styling http://krishnalalstha.wordpress.com/2012/12/21/styling-sherlock-actionbar-change-actionbar-color/ –

17

Non sono sicuro se ne hai più bisogno ma posterò la risposta per le altre persone. È possibile impostare questo sullo sfondo Drawable del customActionBarTabStyle come risorsa Drawable:

<style name="customActionBarTabStyle" parent="style/Widget.Sherlock.Light.ActionBar.TabView"> 
    <item name="android:background">@drawable/actionbar_tabs_selector</item> 
    <item name="android:textSize">12dp</item> 
</style> 

La risorsa deve essere un selettore, qualcosa tra queste righe:

<!-- This is the "@drawable/actionbar_tabs_selector" layout !--> 

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android" > 

    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/actionbar_tab_style_nselected"/> 
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/actionbar_tab_style_selected"/> 

    <!-- Pressed state --> 
    <item android:state_pressed="true" android:drawable="@drawable/actionbar_tab_style_selected" /> 

    <!-- Focused state --> 
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/actionbar_tab_style_nselected"/> 
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/actionbar_tab_style_nselected"/> 

</selector> 

Così le risorse qui sono 2 liste di livello . Uno per quando la scheda è inattiva e una per quando è selezionata la scheda e attiva. Quindi imposta 2 Layer Lists in base allo stato selezionato.

un elenco unico strato può apparire come questo:

<!-- This is the "@drawable/actionbar_tab_style_nselected" layout !--> 

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 

    <!-- Bottom Line --> 
    <item> 
     <shape android:shape="rectangle"> 
      <solid android:color="@color/HCL_orange" /> 
     </shape> 
    </item> 

    <!-- Tab color --> 
    <item android:bottom="2dip"> 
     <shape android:shape="rectangle"> 
      <solid android:color="@android:color/white" /> 
     </shape> 
    </item> 
</layer-list> 

Così il primo elemento è la linea di fondo che si potrebbe definire il colore sottolineatura della scheda attualmente selezionata, e la seconda voce è il colore della l'intera scheda.

+0

Risposta piacevole. :) –

+2

Grazie. Bene, sto anche combattendo con lo stile e il tema di Android a causa della cattiva documentazione. E questo è davvero un peccato ... – Tooroop

+0

esattamente quello che stavo cercando - grazie! – martyglaubitz