ActionBar sous Android (Partie 1)

Image non disponible

La version 3.0 d'Android (Honeycomb) a introduit un nouveau composant essentiel dans une application, il s'agit de la barre d'action ( ActionBar ).
Ce composant remplace les menus disponibles dans les anciennes versions d'Android et permet à l'utilisateur d'accéder facilement aux fonctionnalités les plus importantes d'une application.

Voici l'exemple de l'ActionBar dans l'application Google + :

Image non disponible

Commentez Donner une note à l'article (5)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Principe

Une  ActionBar  peut se composer de quatre parties :

  • l 'icône de l'application  : établit l'identité visuelle de l'application et permet aussi de naviguer dans l'application (remonter à la vue mère par exemple) ;
  • D ropdown Menu  : permet d'afficher le titre de la vue actuelle ainsi que naviguer dans l'application (exemple de l'application Gmail) ;
  • a ctions principales  : définit les actions principales de votre application ;
  • a utres actions  : permet d'accéder aux fonctionnalités moins importantes de l'application.

L'implémentation d'une ActionBar s'effectue dans le dossier  menu  (situé dans le dossier  res  de votre projet) et ressemble énormément à l'implémentation d'un menu.
Afin de gérer la compatibilité avec des versions d'Android ne possédant pas d'ActionBar (entre 1.6 et 2.3.x), il est conseillé de remplacer son implémentation par des menus et cela en créant plusieurs dossiers :

  • fichier  styles.xml  dans le dossier values : permet de spécifier le thème utilisé par l'application et donc un thème n'utilisant pas de barre d'action (conversion automatique en menu) ;
  • fichier  styles.xml  dans le dossier values-v11 : permet de spécifier le thème utilisé (thème Honeycomb) utilisant les ActionBar fournies par cette version d'Android ;
  • fichier  styles.xml  dans le dossier values-v14 : permet de spécifier le thème utilisé (thème ICS/JellyBean) utilisant les ActionBar fournies par cette version d'Android ;
  • le nombre se situant après la lettre v correspond au numéro de l' API Android cible .

II. Exemple

L'exemple abordé dans cette partie servira à implémenter une ActionBar pour les appareils 3.x et supérieures et un menu pour les autres.

Nous allons créer une application Android possédant les actions suivantes (accessible via ActionBar ou via menu) :

  • Recherche ;
  • Rafraîchir ;
  • Aide ;
  • À propos ;
  • Paramètres.

Dans le dossier  menu  présent dans le dossier  res , créez un fichier XML représentant votre menu :

 
Sélectionnez
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/menu_search"
        android:icon="@drawable/ic_action_search"
        android:showAsAction="ifRoom"
        android:title="@string/menu_search"/>
    <item
        android:id="@+id/menu_refresh"
        android:icon="@drawable/ic_action_refresh"
        android:showAsAction="ifRoom"
        android:title="@string/menu_refresh"/>
    <item
        android:id="@+id/menu_help"
        android:icon="@drawable/ic_action_help"
        android:showAsAction="ifRoom"
        android:title="@string/menu_help"/>
    <item
        android:id="@+id/menu_about"
        android:icon="@drawable/ic_action_about"
        android:showAsAction="never"
        android:title="@string/menu_about"/>
    <item
        android:id="@+id/menu_settings"
        android:icon="@drawable/ic_action_settings"
        android:showAsAction="never"
        android:title="@string/menu_settings"/>

</menu>
  • Chaque élément du menu correspond à la déclaration d'une balise  item.
  • Chaque élément possède un identifiant, une icône (nom conseillé : ic_action_*), un titre.
  • L'attribut  showAsAction  permet de spécifier le comportement de l'élément dans une ActionBar, il peut posséder les valeurs suivantes :
    • ifRoom  : l'élément sera ajouté aux actions principales de l'ActionBar si une place est disponible ;
    • never  : ne jamais rajouter l'action aux actions principales de l'ActionBar ;
    • always  : toujours rajouter l'action aux actions principales de l'ActionBar. Cette valeur n'est pas conseillée, car peut entraîner une superposition d'éléments (si nombre de places disponibles < nombre d'éléments ajoutés à l'ActionBar), préférez la valeur ifRoom ;
    • withText  : toujours afficher le texte représentant l'action.

Sans oublier d'implémenter les fichiers styles.xml présents dans les dossiers (values / values-v11 / values-v14).

values/styles.xml
Sélectionnez
<resources>
    <style name="AppTheme" parent="android:Theme.Light" />
</resources>
values-v11/styles.xml
Sélectionnez
<resources>
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar" />
</resources>
values-v14/styles.xml
Sélectionnez
<resources>
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar" />
</resources>

Maintenant, dans l'activité principale, implémenter la méthode onCreateOptionsMenu afin de charger le menu créé précédemment.

 
Sélectionnez
  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

Afin de gérer le clic sur les différents éléments du menu, implémenter la méthode onOptionsItemSelected afin de spécifier l'action à exécuter en fonction du bouton cliqué :

 
Sélectionnez
@Override
public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
        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 2.3

Image non disponible

III-B. Android 3.0

Image non disponible

III-C. Android 4.1

Image non disponible

Vous pouvez remarquer que tous les éléments possédant la valeur « ifRoom » sont ajoutés dans l'ordre des déclarations, ce qui fait que le troisième élément ne peut pas être rajouté à l'ActionBar.

IV. Conclusion

Voilà cette première partie s'arrête ici, vous pouvez télécharger le projet ayant servi d'exemple à  cette adresse

La deuxième partie disponible bientôt abordera :

  • la navigation via l'icône de l'application ;
  • la séparation de l'ActionBar en deux.

V. 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.

VI. Liens

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.