[Tutoriel Android] Partie 11 – Les TabHost

Les TabHost

Vous avez sûrement dû rencontrer des applications qui avaient une interface sous forme d’onglets. Vous vous demandez peut-être comment fait t’on pour faire ceci sur Android et je l’avoue ce n’est pas facile.

Voici un exemple concret de l’utilisation des onglets sous Android, cela permet d’agencer l’interface facilement si l’utilisateur a besoin d’accéder à des données rapidement.

Notre petit système d’exploitation nous permet de réaliser ceci grâce a un type d’activité bien spéciale : les TabActivity ; vous allez me dire c’est évident, mais le rappeler ne fait de mal à personne.

Il faut savoir qu’une application utilisant des TabHost utilise plusieurs activités, où chaque onglet est une activité différente ou la même mais avec un contenu différent.

En gros, on remarque que l’activité principale héberge un tabhost qui lui-même hébergera une ou plusieurs autres activités, il faut bien mettre cette notion dans la tête.

Création d’un TabHost

Commençons par créer un nouveau projet et changeons l’héritage de notre activité principale en TabActivity.

public class MonActivite extends TabActivity

Puis, nous allons nous tourner vers notre fichier main.xml qui sera là pour definer le layout de l’application :

<?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">

<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">

<TabWidget android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

</FrameLayout>

</LinearLayout>

</TabHost>

On voit bien que notre élément de base est le TabHost qui a pour id « @android :id/tabhost », c’est très important sinon la TabActivity ne pourra pas s’y retrouver. Ensuite, un LinearLayout basic, puis un TabWidget qui contient l’id « android :id/tabs », tout aussi important et pour terminer un FrameLayout avec pour id « android :id/tabcontent ». C’est une base obligatoire pour faire fonctionner correctement notre application, oubliez un morceau et vous aurez une jolie erreur.

Nous allons rajouter une activité à notre projet que l’on nommera ActiviteTab. Elle sera utilisée pour afficher les informations dans les onglets, mais vous pouvez très bien utiliser plusieurs activités (une pour chaque onglet).

Puis, nous allons créer un nouveau Layout pour cette activité, je le nommerais tab.xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TextView
android:id="@+id/monTextView"
android:text="Coucou"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical|center_horizontal"/>

</LinearLayout>

Voici un layout simple avec uniquement un TextView centré dans la vue.

Nous allons modifier notre activité en conséquence, celle-ci recevra aussi un Intent de l’application principale avec la chaîne de caractères à afficher dans notre Activite.

public class ActiviteTab extends TabActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.tab);

// On récupère notre intent et la valeur nommée valeur
String valeur = getIntent().getStringExtra("valeur");

// On affiche cette chaîne dans le textview
TextView textView = (TextView) findViewById(R.id.monTextView);

textView.setText(valeur);

}

}

Retournons désormais sur notre activité principale qui sera au cœur de notre application.

Nous allons commencer par déclarer un TabHost et un TabSpec, le TabHost servira de lien entre l’IHM et notre code. De plus, il sera le conteneur des différents onglets, quand au TabSpec il sera là pour spécifier les informations de l’onglet (l’activité vers laquelle il pointe, se nom et son image).

private TabHost tabHost;

private TabSpec tabSpec;

Déclarons maintenant notre Intent qui sera utilisé pour lancer les activités enfants :

Intent intent = new Intent(this, ActiviteTab.class);

Ensuite, nous récupèrons le tabhost

tabHost = getTabHost();

Voilà nous avons créé une bonne partie de notre application, la suite nous permettra d’ajouter un onglet à notre TabHost.

Création des onglets

Voyons comment rajouter des onglets à notre TabHost facilement.

Tout d’abord, votre TabHost dispose d’une méthode newTabSpec qui permet de définir un nouvel onglet. Il prend en paramètre un tag, ce tag doit être unique et sous forme d’une chaîne de caractères.

Nous allons aussi rajouter un indicateur à cet onglet, nous pouvons lui définir un titre et une image, l’image n’étant pas obligatoire.

Et pour finir, lui définir l’intent qu’il va exécuter lors de la création de l’onglet.

tabSpec = tabHost.newTabSpec("un").setIndicator("Un", getResources().getDrawable(R.drawable.icon)).setContent(intent);

Puis, il faut ajouter l’onglet à notre tabHost comme ceci :

tabHost.addTab(tabSpec);

Voilà rien de bien compliqué, nous savons ajouter un onglet au TabHost et lui définir une activité.

Je vous mets le code complet de notre activité :

private TabHost tabHost;
private TabSpec tabSpec;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Intent intent = new Intent(this, ActiviteTab.class);

tabHost = getTabHost();

intent.putExtra("valeur", "Coucou tout le monde");

tabSpec = tabHost.newTabSpec("un").setIndicator("Un",
getResources().getDrawable(R.drawable.icon)).setContent(intent);
tabHost.addTab(tabSpec);

intent.putExtra("valeur", "Hello world !");

tabSpec = tabHost.newTabSpec("deux").setIndicator("Deux").setContent(intent);
tabHost.addTab(tabSpec);

}

J’ai ajouté un autre onglet pour bien montrer ce qui se passe.

Permissions

Il ne faut surtout pas oublier de déclarer l’activité dans l’AndroidManifest, sinon nous aurons un jolie FC.

<activity android:name=".ActiviteTab"></activity>

De plus, nous allons definer un thème à notre activité principale pour que l’on n’affiche pas la barre de titre de notre application.

<activity android:name=".MonActivite"

android:label="@string/app_name"

android:theme="@android:style/Theme.NoTitleBar">

@android:style/Theme.NoTitleBar est un thème par défaut contenu dans Android.

Conclusion

Vous devez normalement obtenir ce résultat :

Les TabHost ne sont pas insurmontables, elles ont juste une façon de fonctionner un petit peu spéciale.
J’espère que ce tutoriel vous aura plus et que vous ferez de jolies applications ! (Y’a intérêt)

Sources de la formation