Comment modifier l'arrière-plan d'un widget d'onglet Android ?

Question

Ma classe s'étend étend TabActivity

TabHost mTabHost =  getTabHost();

TabHost.TabSpec tab1 =mTabHost.newTabSpec("tab1");
TabHost.TabSpec tab2 =mTabHost.newTabSpec("tab2");

tab1 .setIndicator("title tab1");
tab2 .setIndicator("title tab2");
mTabHost.addTab(tab1);mTabHost.addTab(tab2);

TabHost.setCurrentTab(0 or 1)

Quelqu'un peut-il me guider pour changer l'image ou la couleur de fond de l'onglet sélectionné ?

Answer 1

Cela permettra de définir les couleurs de vos onglets :

public static void setTabColor(TabHost tabhost) {
    for(int i=0;i<tabhost.getTabWidget().getChildCount();i++) {
        tabhost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#FF0000")); //unselected
    }
    tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab()).setBackgroundColor(Color.parseColor("#0000FF")); // selected
}

et si vous le placez dans le onTabChangedListener(), il conservera la couleur correcte pour les onglets sélectionnés.

Answer 2

Comme l'a mentionné mbaird, la meilleure solution est d'utiliser arrière-plan avec le sélecteur, donc vous n'avez pas besoin de vérifier onTabChanged et faire une mise à jour manuelle. Le code minimal est ici :

private void initTabsAppearance(TabWidget tabWidget) {
    // Change background
    for(int i=0; i < tabWidget.getChildCount(); i++)
        tabWidget.getChildAt(i).setBackgroundResource(R.drawable.tab_bg);
}

Où tab_bg est un dessinateur xml avec un sélecteur :

<selector xmlns:android="http://schemas.android.com/apk/res/android">    
    <item android:state_selected="true" android:drawable="@drawable/tab_bg_selected" />
    <item android:drawable="@drawable/tab_bg_normal" />
</selector>

Pour la personnalisation complète de l'onglet, je vais ajouter le code pour modifier style de texte de l'onglet en utilisant un thème personnalisé. Ajoutez ceci à styles.xml :

<resources>

    <style name="MyCustomTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:tabWidgetStyle">@style/CustomTabWidget</item>
    </style>

    <style name="CustomTabWidget" parent="@android:style/Widget.TabWidget">
        <item name="android:textAppearance">@style/CustomTabWidgetText</item>
    </style>

    <style name="CustomTabWidgetText" parent="@android:style/TextAppearance.Widget.TabWidget">
        <item name="android:textSize">12sp</item>
        <item name="android:textStyle">bold</item>
    </style>

</resources>

Pour utiliser ce thème, définissez-le dans AndroidManifest.xml :

<application android:theme="@style/MyCustomTheme">

Et maintenant vous avez des widgets d'onglets avec arrière-plan personnalisé y style de texte personnalisé .

Answer 3

Que se passe-t-il si vous vous enregistrez pour les événements TabHost.OnTabChanged et appelez mTabHost.getCurrentTabView() pour obtenir la vue, puis view.setBackgroundResource() ?

Answer 4

Fait este résoudre votre problème ? En gros, appeler setBackgroundDrawable sur chaque vue d'onglet avec un sélecteur ?

Answer 5

>     TabHost mTabHost =  getTabHost();
>     
>     TabHost.TabSpec tab1 =mTabHost.newTabSpec("tab1");
>     TabHost.TabSpec tab2 =mTabHost.newTabSpec("tab2");
>     
>     tab1.setIndicator("title tab1");
>     tab2.setIndicator("title tab2");
>     mTabHost.addTab(tab1) ;mTabHost.addTab(tab2);
>     
>     TabHost.setCurrentTab(0 or 1);

mTabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.tab1selector); 

mTabHost.getTabWidget().getChildAt(1).setBackgroundResource(R.drawable.tab2selector);    

mTabHost.getTabWidget().getChildAt(2).setBackgroundResource(R.drawable.tab3selector);    

mTabHost.getTabWidget().getChildAt(3).setBackgroundResource(R.drawable.tab4selector);

Utilice .setBackgroundResource et tabNselector est un XML -. tabNselector.xml

    <?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_selected="false" android:drawable="@drawable/tabN"/>
   <item android:state_selected="true" android:drawable="@drawable/tabNsel"  />
</selector>