ActionBar sous Android (Partie 2)

Nazim Benbourahla

Voici la suite du tutoriel sur l'ActionBar. Dans cette partie, nous allons reprendre le projet créé lors du tutoriel précédant afin d'aborder les points suivants :

- la navigation à l'aide de l'icône de votre application (présente sur l'ActionBar) ;

- la séparation de l'ActionBar en deux.

Commentez

- Titre : ActionBar sous Android (Partie 2)

- Auteur : Nazim Benbourahla

- Parution : 10 mars 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Benbourahla Nazim. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Séparer l'ActionBar en deux

- II. Navigation via l'icône de votre application

- III. Résultat

- III-A. Android 3.0

- III-B. Android 4.0

- IV. Remerciements

- V. Liens

I - Séparer l'ActionBar en deux

Si vous possédez plusieurs actions importantes dans votre application, vous pouvez séparer votre barre d'action en deux :

- la première ActionBar contiendra l'icône de votre application, le titre et la navigation de votre application (Dropdown menu) ;

- la deuxième ActionBar contiendra les différentes actions disponibles via votre application.

Cette fonctionnalité n'est disponible qu'à partir de l'API 14 d'Android donc à partir de la version 4.0 d'Android.

Pour séparer votre ActionBar en deux, il suffit de rajouter l'attribut android:uiOptions= »splitActionBarWhenNarrow » sur la balise application (si vous souhaitez séparer votre ActionBar sur toute l'application) ou sur la balise activity (si vous souhaitez séparer votre ActionBar uniquement sur quelques activités cibles) du fichier manifeste de l'application.

<activity
android:name=".NextActivity"
android:uiOptions="splitActionBarWhenNarrow" >
</activity>

Ce qui donnera sur un appareil Android (4.0 ou supérieures)

II - Navigation via l'icône de votre application

Afin de pouvoir activer la navigation via l'icône de votre application (icône disponible sur l'ActionBar), il suffit de rajouter le code suivant dans la méthode onCreateOptionsMenu (après le chargement du fichier XML représentant votre menu/ActionBar).

ActionBar actionBar = getActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);

La première ligne permet de récupérer l'instance de l'ActionBar.

- La deuxième ligne permet d'activer la navigation à l'aide de l'icône de votre application.

La méthode setDisplayHomeAsUpEnabled n'est disponible qu'à partir d'Android 3.0 (Honeycomb). Afin de conserver la compatibilité avec les anciennes versions d'Android, il faut vérifier la version actuelle de l'appareil avant d'exécuter cette partie du code. Cette vérification s'effectue rapidement à l'aide de la classe Build.VERSION.SDK_INT.

Ce qui donnera :

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
ActionBar actionBar = getActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
}
return true;
}

Si vous exécutez l'exemple, vous allez remarquer que l'icône devient cliquable (aucune action n'est liée à ce clic pour le moment).

Pour pouvoir exécuter l'action de votre choix lors du clic sur l'icône, il faut gérer l'élément android.R.id.home dans la méthode onOptionsItemSelected. Vous pouvez par exemple revenir à l'activité lancée précédemment (onBackPressed : permet de simuler le clic sur le bouton précédant) ou lancer l'activité de votre choix.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
onBackPressed();
case R.id.menu_about:
// Comportement du bouton "À Propos"
return true;
case R.id.menu_help:
// Comportement du bouton "Aide"
return true;
case R.id.menu_refresh:
// Comportement du bouton "Rafraichir"
return true;
case R.id.menu_search:
// Comportement du bouton "Recherche"
return true;
case R.id.menu_settings:
// Comportement du bouton "Paramétres"
return true;
default:
return super.onOptionsItemSelected(item);
}
}

III - Résultat

Ce qui donnera :

III-A - Android 3.0

III-B - Android 4.0

Vous pouvez trouver le code de cet exemple ici.

IV - Remerciements

Je tiens à remercier tout particulièrement Feanorin qui a mis ce tutoriel au format Developpez.com.
Merci également à ClaudeLELOUP d'avoir pris le temps de le relire et de le corriger.

V - Liens

Tutoriel origine sur Tutos-Android