Android: la personnalisation de l'apparence des Onglets à l'aide de TabHost & TabWidget

Plutôt que d'essayer de personnaliser le widget onglets eux-mêmes, ici, c'est une autre approche que j'ai utilisé avec succès sur un projet qui pourrait vous faire économiser des maux de tête:

L'idée est d'utiliser un caché TabWidget dans votre mise en page et de le contrôler avec une ambiance LinearLayout contenant des Boutons. De cette façon, vous pouvez personnaliser plus facilement les touches pour voir toutefois vous le souhaitez. Vous pourrez contrôler le réel TabWidget dans votre Activité au sein de chaque OnClick du bouton.

1. Créer votre mise en page à la fois avec le TabWidget et les Boutons:

       <?xml version="1.0" encoding="utf-8"?>
   <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@android:id/tabhost" android:layout_width="fill_parent"
   android:layout_height="fill_parent">
   <RelativeLayout android:orientation="vertical"
   android:layout_width="fill_parent" android:layout_height="fill_parent"
   android:gravity="bottom">
   <TabWidget android:id="@android:id/tabs"
   android:layout_width="fill_parent" android:layout_height="wrap_content"
   android:visibility="gone" />
   <LinearLayout android:id="@+id/tabbar"
   android:orientation="horizontal" android:layout_width="fill_parent"
   android:layout_height="wrap_content">
   <Button android:id="@+id/firstButton"
   android:layout_alignParentTop="true" android:background="@drawable/btn_first_on"
   android:layout_width="100dp" android:layout_height="43dp"
   android:clickable="true"></Button>
   <Button android:id="@+id/secondButton"
   android:layout_alignParentTop="true" android:background="@drawable/btn_second_off"
   android:layout_height="43dp" android:layout_width="100dp"
   android:clickable="true"></Button>
   <Button android:id="@+id/thirdButton"
   android:layout_alignParentTop="true" android:background="@drawable/btn_third_off"
   android:layout_height="43dp" android:layout_width="100dp"
   android:clickable="true"></Button>
   <Button android:id="@+id/forthButton"
   android:layout_alignParentTop="true" android:background="@drawable/btn_forth_off"
   android:layout_height="43dp" android:layout_width="100dp"
   android:clickable="true"></Button>
   </LinearLayout>
   <FrameLayout android:id="@android:id/tabcontent"
   android:layout_width="fill_parent" android:layout_height="fill_parent"
   android:layout_below="@+id/tabbar" />
   </RelativeLayout>
   </TabHost>

2. Configurer le onCreate de votre activité de gérer à l'aide des boutons de réglage de l'onglet vues:

       public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);
   //tabs        
   firstButton = (Button) findViewById(R.id.firstButton);
   secondButton = (Button) findViewById(R.id.secondButton);        
   thirdButton = (Button) findViewById(R.id.thirdButton);
   forthButton = (Button) findViewById(R.id.forthButton);
   Resources res = getResources(); //Resource object to get Drawables
   final TabHost tabHost = getTabHost();  //The activity TabHost
   TabHost.TabSpec spec;  //Resusable TabSpec for each tab
   Intent intent;  //Reusable Intent for each tab
   intent = new Intent().setClass(this, FirstGroupActivity.class);
   spec = tabHost.newTabSpec("first").setIndicator("First").setContent(intent);
   tabHost.addTab(spec);
   intent = new Intent().setClass(this, SecondGroupActivity.class);
   spec = tabHost.newTabSpec("second").setIndicator("Second").setContent(intent);
   tabHost.addTab(spec);   
   intent = new Intent().setClass(this, ThirdGroupActivity.class);
   spec = tabHost.newTabSpec("third").setIndicator("Third").setContent(intent);
   tabHost.addTab(spec);
   intent = new Intent().setClass(this, ForthActivity.class);
   spec = tabHost.newTabSpec("forth").setIndicator("Forth").setContent(intent);
   tabHost.addTab(spec);
   tabHost.setCurrentTab(0);
   firstButton.setOnClickListener(new OnClickListener() {
   public void onClick(View v)
   {
   tabHost.setCurrentTab(0);
   firstButton.setBackgroundResource(R.drawable.btn_first_on);
   secondButton.setBackgroundResource(R.drawable.btn_second_off);              
   thirdButton.setBackgroundResource(R.drawable.btn_third_off);
   forthButton.setBackgroundResource(R.drawable.btn_forth_off);            
   }
   });
   secondButton.setOnClickListener(new OnClickListener() {
   public void onClick(View v)
   {
   tabHost.setCurrentTab(1);
   firstButton.setBackgroundResource(R.drawable.btn_first_off);
   secondButton.setBackgroundResource(R.drawable.btn_second_on);                       
   thirdButton.setBackgroundResource(R.drawable.btn_third_off);                        
   forthButton.setBackgroundResource(R.drawable.btn_forth_off);
   }
   });
   thirdButton.setOnClickListener(new OnClickListener() {
   public void onClick(View v)
   {
   tabHost.setCurrentTab(3);
   firstButton.setBackgroundResource(R.drawable.btn_first_off);
   secondButton.setBackgroundResource(R.drawable.btn_second_off);              
   thirdButton.setBackgroundResource(R.drawable.btn_third_on);
   forthButton.setBackgroundResource(R.drawable.btn_forth_off);
   }
   });
   forthButton.setOnClickListener(new OnClickListener() {
   public void onClick(View v)
   {
   tabHost.setCurrentTab(4);
   firstButton.setBackgroundResource(R.drawable.btn_first_off);
   secondButton.setBackgroundResource(R.drawable.btn_second_off);              
   thirdButton.setBackgroundResource(R.drawable.btn_third_off);
   forthButton.setBackgroundResource(R.drawable.btn_forth_on);
   }
   });
   }

Comme vous pouvez le voir, je suis en utilisant un drawable pour les images des boutons on et off. En utilisant cette technique, vous n'êtes pas limité aux options disponibles quand il suffit juste d'essayer de personnaliser le look de la TabWidget les onglets et vous pouvez créer un complètement l'aspect personnalisé de vos onglets.

OriginalL'auteur SBerg413

Que sur la solution que j'ai proposée sur cette question?

Vous pouvez personnaliser le drawable de chaque bouton, en utilisant la même que celle utilisée par Android natif de la barre d'onglets(à la recherche pour les ressources en Android.jar pour trouver le bon un drawable), de plus, vous pouvez personnaliser d'autres comportements que vous le désirez.

À la fin, vous obtiendrez quelque chose qui est graphiquement similaire à un tabbar, à partir d'un point de vue utilisateur, mais agit de manière différente d'un point de vue développeur.

OriginalL'auteur Rainbowbreeze