Styles, navigation et notifications
Introduction
La découverte de l’interface utilisateur a permis d’aborder les thèmes généraux et de découvrir les widgets. Mais l’interface utilisateur d’une application ne se limite pas à cela. Il existe d’autres éléments complétant ceux abordés précédemment et qui apportent de nouvelles fonctionnalités aux applications.
Dans ce chapitre, nous allons découvrir comment utiliser les nouveaux styles et thèmes introduits sous Android 3.0, comment créer un menu ou une barre d’action selon le système utilisé et nous découvrirons les différentes méthodes pour notifier l’utilisateur.
Styles et thèmes
À l’instar des feuilles de style CSS (Cascading Style Sheets) utilisées pour les pages web, les styles sous Android permettent d’extraire les propriétés de design d’une vue de son contenu. Cette séparation permet un code plus clair des vues, une réutilisation des styles, et facilite grandement la construction d’interfaces homogènes.
1. Les styles
Un style est une ressource définie dans un fichier XML du dossier res/values. Il est d’usage de regrouper tous les styles dans un seul fichier nommé styles.xml.
Les styles y sont définis en utilisant la balise style. Celle-ci doit intégrer l’attribut name, qui permet de donner un nom unique au style, et éventuellement l’attribut parent, qui précise le nom du thème parent au style en cours de définition : la notion d’héritage est en effet supportée par les styles sous Android. Nous verrons que cette fonctionnalité puissante peut également être source d’erreur et d’incompréhension.
Les caractéristiques d’un style sont définies par des balises item, chaque balise représentant une propriété du style.
Exemple
<style name="text" parent="Theme.AppCompat.Light">
<item name="android:layout_margin">@dimen/small_margin</item>
<item name="android:textColor">@color/primaryDarkColor</item>
<item name="android:shadowColor">@color/primaryColor</item>
<item name="android:shadowDy">3</item>
<item name="android:shadowRadius">0.7</item>
</style>
Tous les attributs valides pour chaque composant de l’interface peuvent être utilisés comme propriété d’un style et donc comme valeur de l’attribut name de la balise item.
Le contenu des balises item est soit des valeurs soit des références (qui pointent sur des valeurs définies par le développeur ou par la plateforme) : dans l’exemple précédent, la valeur de la propriété layout_margin fait référence à une dimension (définie dans le fichier dimens.xml), la valeur...
Menus
Éléments importants de l’interface utilisateur, la plateforme Android prend en charge trois types de menu, chacun ayant son rôle attitré : les menus d’activité, les menus contextuels et les menus pop-up.
Les menus d’activité, ou menus d’options (Options Menu, appellation retenue par la plateforme), sont des menus accessibles au niveau d’une activité, et dont, selon les règles établies par Google, les actions ont une portée globale à l’application.
Les menus contextuels, eux, sont rattachés à un élément de l’interface utilisateur (image, texte, élément d’une liste, etc.). Ils doivent permettre d’agir sur l’élément auquel ils sont rattachés.
Les menus pop-up sont visuellement très proches des menus contextuels et, comme eux, sont rattachés à un composant de l’interface. Leur fonction est de proposer un ensemble d’actions possibles qui ne concernent pas directement l’élément auquel ils sont rattachés.
Nous allons voir, dans la suite de cette section, comment mettre en place chacun de ces types de menu.
1. Déclaration
Quel qu’en soit le type, la déclaration des éléments d’un menu suit toujours le même schéma : le menu est défini dans un fichier XML et est interprété à l’exécution par la plateforme au moment où son affichage est demandé.
La première étape consiste donc à créer un fichier au format XML dans le répertoire res/menu du projet et d’y insérer la balise menu. Plusieurs menus pouvant être définis, il est indispensable de donner un nom explicite à ce fichier.
Syntaxe
<menu xmlns:android="http://schemas.android.com/apk/res/android">
...
</menu>
Exemple
<xml version="1.0" encoding="utf-8">
<menu xmlns:android="http://schemas.android.com/apk/res/android">
</menu>
Les options du menu - ou entrées - sont ensuite ajoutées une par une en utilisant la balise item. Ses attributs permettent de paramétrer chaque entrée du menu. Voici les principaux :
Propriété |
Description |
android:id |
Identifiant... |
Barre d’action
Apparue avec la version 3.0 d’Android via le thème Holographic, la barre d’action (action bar, également appelée app bar) s’est progressivement imposée, en remplacement de la barre de titre et du menu d’activité tels qu’ils apparaissaient dans les versions inférieures.
La barre d’action était, à l’origine, relativement figée : dépendant entièrement du thème de l’application, sa présentation était directement liée à la version d’Android, et son interprétation par chaque constructeur. Pour résoudre ce problème, Google a proposé une nouvelle version de cet élément essentiel au design d’une application, nouvelle version nommée ToolBar.
Contrairement aux anciennes versions de l’ActionBar, la ToolBar, apparue sous l’API 21 d’Android (Android Lollipop), est un composant widget au même titre que les composants TextView, Button, etc., et doit, à ce titre, être déclarée dans le layout de l’activité concernée.
Enfin, pour offrir une compatibilité totale avec les versions antérieures d’Android, un objet ToolBar a été intégré à la bibliothèque de support AndroidSupport v7. C’est naturellement cette version de ToolBar qui doit être utilisée, pour maintenir la compatibilité avec un maximum de terminaux Android.
Par défaut, de gauche à droite, cette barre comprend l’icône de l’activité ou par défaut de l’application, son titre ainsi que les options du menu d’activité affichées soit directement dans la barre, soit dans un sous-menu représenté par une icône située le plus à droite.
Il est également possible d’insérer directement dans la barre d’action des widgets, comme une barre de recherche, des onglets de fragments ou une liste de navigation. L’apparence de la barre d’action peut également être modifiée et l’icône remplacée par une image.
1. Intégration
La définition d’une barre d’action se fait en deux étapes : la première concerne...
Notifications
Une application peut avoir besoin d’avertir l’utilisateur. Pour cela, Android fournit plusieurs solutions selon que l’application est affichée en premier plan ou est exécutée en tâche de fond. Ces trois solutions sont : le toast (message temporaire), la boîte de dialogue et la barre de statut.
1. Toast
Sous Android, le toast est un message qui s’affiche pendant quelques secondes en premier plan dans une fenêtre dépouillée taillée à la mesure du message.
Cette fenêtre n’accepte pas d’interaction utilisateur. Android se charge de la faire apparaître puis disparaître.
C’est le système de notification parfait pour des messages à caractère purement informatif.
L’utilisateur peut ne pas voir les messages toast s’il détourne le regard pendant les quelques secondes d’affichage. L’importance de ces messages doit donc être très faible et n’avoir aucune incidence sur la suite.
Pour créer un objet de type Toast très simple, il suffit d’utiliser l’une des méthodes statiques makeText de la classe Toast. Cette méthode prend en paramètres le contexte applicatif, l’identifiant unique du message à afficher ou directement le message sous forme de chaîne de caractères et enfin la durée d’affichage de ce message à l’écran. Cette durée peut être la constante Toast.LENGTH_SHORT pour indiquer une durée très courte de l’ordre de quelques secondes ou la constante Toast.LENGTH_LONG pour une durée un peu plus longue. La méthode makeText retourne l’objet Toast créé.
Syntaxe
public static Toast makeText (Context context, int resId,
int duration)
public static Toast makeText (Context context, CharSequence text,
int duration)
Exemple
Toast toast = Toast.makeText(this, "Le message",
Toast.LENGTH_SHORT);
Toast toast = Toast.makeText(this, R.string.message,
Toast.LENGTH_LONG);
Pour afficher le message, il suffit ensuite d’invoquer sa méthode show.
Syntaxe
public void show ()
Exemple
toast.show();
Afin d’éviter d’avoir à déclarer l’objet toast, il est de coutume...