Créer des interfaces utilisateur

Transcription

1 4 Créer des interfaces utilisateur Au sommaire de ce chapitre : Utiliser les Views et les layouts Optimiser les layouts Ressources Drawable XML Créer des interfaces utilisateur indépendantes de la résolution Le système de menus Android Étendre, grouper, créer et utiliser les Views Il est crucial de créer des interfaces attirantes et intuitives pour vos applications. Garantir qu elles sont aussi élégantes et faciles d usage que fonctionnelles doit être une priorité dans la conception. Citons Stephen Fry sur l importance du style comme essence de la conception d appareils digitaux : Comme si un appareil pouvait fonctionner sans style. Comme si un appareil pouvait être stylé s il ne fonctionnait pas parfaitement. Oui, la beauté compte, et sacrément. Elle n est pas superficielle, elle n est pas optionnelle, elle est la chose elle-même. Stephen Fry, The Guardian (27 octobre 2007) L augmentation des tailles, des résolutions d écran et de la puissance des processeurs mobiles a rendu les applications de plus en plus visuelles. Alors que les tout petits écrans sont un défi à la création d interfaces visuelles complexes, l omniprésence des mobiles incite à le relever.

2 112 Développement d applications professionnelles avec Android 2 Nous vous présenterons dans ce chapitre les éléments de base de l interface Android et vous découvrirez comment utiliser les Views, les View Groups et les layouts pour créer des interfaces fonctionnelles et intuitives pour vos Activities. Après avoir introduit quelques-uns des contrôles disponibles dans le SDK Android, nous vous apprendrons comment les étendre et les personnaliser. Vous verrez avec les View Groups comment combiner des Views pour créer des éléments d interface atomiques réutilisables, constitués de sous-contrôles interagissant ensemble. Vous apprendrez également à créer vos propres Views pour afficher des données et interagir avec les utilisateurs de façon créative Les éléments individuels d une interface utilisateur Android sont rangés à l écran par le biais de plusieurs gestionnaires de layouts dérivés de ViewGroup. Une utilisation correcte des layouts est essentielle pour créer de bonnes interfaces. Ce chapitre introduira plusieurs classes layout natives et montrera comment les utiliser et comment créer les vôtres. La gamme d appareils Android croissant rapidement, la variété de tailles et de résolutions d écrans sur lesquelles votre application sera susceptible de tourner augmente. Vous apprendrez à créer des layouts et des Drawables indépendants de la résolution ainsi que les meilleures pratiques pour développer et tester vos interfaces, afin qu elles soient toujours aussi belles, quel que soit l écran. Les applications Android et le système de menus contextuels utilisent une approche nouvelle, optimisée pour les appareils modernes à écrans tactiles. Dans le cadre de l étude du modèle d interface Android, ce chapitre se terminera par la création de menus contextuels. Les fondements de la conception d interface sous Android La conception d interface utilisateur, l expérience utilisateur, l interaction homme-machine et la facilité d utilisation sont de vastes sujets que nous ne couvrirons pas en profondeur dans cet ouvrage. Il est néanmoins important de les avoir en tête lors de la création de vos interfaces utilisateur. Android introduit une nouvelle terminologie pour des métaphores de programmation familières, que nous allons explorer en détail dans les sections suivantes : Views. Les Views sont les classes de base pour tous les éléments visuels d interface (communément appelés contrôles ou widgets). Tous les contrôles d interface, y compris les classes layout, sont dérivés de View. View Groups. Les View Groups sont des extensions de la classe View qui contiennent de multiples Views enfants. L extension de la classe ViewGroup permet de créer des contrôles composites constitués de Views enfants interconnectées. La classe ViewGroup

3 Chapitre 4 Créer des interfaces utilisateur 113 peut être également étendue pour fournir les gestionnaires de layouts qui aident à disposer les contrôles dans vos Activities. Activities. Les Activities, décrites en détail dans le chapitre précédent, représentent les fenêtres ou les écrans affichés. Elles sont les équivalents Android des Forms. Pour afficher une interface utilisateur, vous devez assigner une View (en général un layout) à une Activity. Android fournit de nombreux contrôles, widgets et gestionnaires de layouts. Pour la plupart des applications graphiques, il est probable que vous aurez besoin d étendre et de modifier ces Views standard ou d en créer d entièrement nouvelles pour fournir votre propre expérience utilisateur. Introduction aux Views Comme nous l avons dit plus haut, tous les composants visuels Android descendent de la classe View et sont appelés en général des Views. Vous verrez souvent appelés Views des contrôles ou des widgets (à ne pas confondre avec les écrans d accueil ou App Widgets décrits au Chapitre 10), termes avec lesquels vous êtes probablement familier si vous avez déjà développé pour des environnements graphiques. La classe ViewGroup est une extension de View conçue pour contenir de multiples Views. Les View Groups sont en général utilisés pour construire des composants atomiques réutilisables ou pour gérer la disposition des Views enfants. Ces derniers sont appelés layouts. Tous les éléments visuels dérivant de View, les termes widget et control sont inter changeables avec View. Vous avez déjà côtoyé un layout et deux Views natives, LinearLayout, ListView et TextView, lorsque vous avez créé l exemple de liste de tâches au Chapitre 2. Vous allez apprendre dans les sections suivantes à assembler des interfaces utilisateur de plus en plus complexes en commençant avec les Views disponibles dans le SDK, avant d apprendre à les étendre, à construire vos propres contrôles et à créer vos vues personnalisées en partant de zéro. Créer l interface d une Activity avec des Views Une nouvelle Activity démarre avec un écran vide dans lequel vous allez placer votre interface utilisateur. Pour cela, appelez setcontentview en lui passant l instance de View ou la ressource layout à afficher. Les écrans vides n étant pas particulièrement attirants, vous utiliserez presque toujours setcontentview pour assigner une interface à une Activity au moment de la redéfinition de son gestionnaire oncreate.

4 114 Développement d applications professionnelles avec Android 2 La méthode setcontentview accepte un identifiant de ressource layout (voir Chapitre 3) ou une simple instance de View. Cela vous permet de définir votre interface utilisateur en code ou en utilisant la technique privilégiée des ressources layout externes. Utiliser des ressources layout découple votre couche de présentation de la logique applicative, vous donnant ainsi la flexibilité de modifier la présentation sans toucher au code. Cela permet de spécifier différents layouts optimisés pour des configurations matérielles différentes, voire de les modifier à l exécution en fonction de changements matériels (l orientation de l écran, par exemple). Le Listing 4.1 montre comment paramétrer l interface d une Activity à l aide d une ressource layout externe. Vous pouvez récupérer les références aux Views utilisées dans un layout à l aide de la méthode findviewbyid. Cet exemple suppose que main.xml existe dans le dossier res/layout du projet. Listing 4.1 : Désérialisation d un layout d public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); TextView mytextview = (TextView)findViewById(R.id.myTextView); Si vous préférez une approche plus traditionnelle, vous pouvez construire l interface utilisateur en la codant. Le Listing 4.2 montre comment assigner une nouvelle TextView comme interface utilisateur. Listing 4.2 : Création d un layout en public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); TextView mytextview = new TextView(this); setcontentview(mytextview); mytextview.settext("hello, Android"); La méthode setcontentview accepte en entrée une instance unique de View. Il en résulte que vous devez utiliser des layouts pour ajouter des contrôles multiples à votre Activity. Boîte à outils de Widgets Android Android fournit une boîte à outils de Views standard afin de vous aider à créer des interfaces simples. En utilisant ces contrôles (et en les modifiant et les étendant si nécessaire), vous pouvez simplifier vos développements et conserver une cohérence entre vos applications.

5 Chapitre 4 Créer des interfaces utilisateur 115 La liste qui suit présente quelques-uns des contrôles les plus courants : TextView. Libellé texte standard en lecture seule. Supporte l affichage multilignes, la mise en forme de chaînes et le retour à la ligne automatique. EditText. Boîte de saisie modifiable. Accepte la saisie multilignes, le retour à la ligne et les textes d aide. ListView. View Group créant et gérant une liste verticale de Views et les affichant sous forme de lignes dans une liste. La List View la plus simple affiche un tostring de la valeur de chaque objet d un tableau en utilisant une Text View pour chacune d entre elles. Spinner. Contrôle composite affichant une Text View et une List View associée et qui vous permet de sélectionner une entrée de la liste et de l afficher dans la boîte de texte. Il est constitué d une Text View affichant la sélection courante, combinée à un bouton affichant un dialogue de sélection lorsqu il est enfoncé. Button. Bouton standard. CheckBox. Bouton à deux états représentant une case à cocher. RadioButton. Bouton à deux états utilisé en groupe permettant à l utilisateur de choisir une, et une seule, option parmi plusieurs possibles. ViewFlipper. View Group permettant de définir une collection de Views sous forme d une ligne horizontale dans laquelle une seule View est visible à la fois et dans laquelle les transitions entre les vues sont animées. QuickContactBadge. Affiche un badge montrant l image assignée à un contact que vous spécifiez à l aide d un numéro de téléphone, d un nom, d une adresse ou d une URI. En cliquant sur l image, la barre rapide de contacts s affiche, fournissant un raccourci pour appeler le contact, lui envoyer un SMS, un ou un message instantané. Ceci n est qu une partie des widgets disponibles. Android supporte également des Views plus avancées comme les date-time pickers (calendriers d aide à la saisie de dates/heures), les champs de saisie à autocomplétion, les cartes, les galeries et les onglets. Vous trouverez la liste complète sur Vous vous trouverez à un moment ou à un autre dans une situation où aucun des contrôles natifs ne répondra à vos besoins. Vous apprendrez plus loin dans ce chapitre comment étendre et combiner les contrôles existants et comment en concevoir et en créer de nouveaux à partir de zéro.

6 116 Développement d applications professionnelles avec Android 2 Introduction aux layouts Les Layout Managers (appelés en général simplement layouts) sont des extensions de la classe ViewGroup utilisées pour placer des contrôles enfants dans votre interface utilisateur. Les layouts peuvent être imbriqués et vous pouvez ainsi en les combinant créer des interfaces complexes. Le SDK Android inclut quelques layouts simples afin de vous aider à construire votre interface utilisateur. À vous de sélectionner la bonne combinaison pour rendre votre interface facile à comprendre et à utiliser. La liste qui suit présente quelques-unes des classes layout les plus flexibles : FrameLayout. Le plus simple des Layout Managers. Il épingle simplement chaque View enfant dans le coin supérieur gauche. Ajouter plusieurs enfants les empile les uns sur les autres, chaque nouvelle View dissimulant la précédente. LinearLayout. Aligne chaque View enfant verticalement ou horizontalement. Un layout vertical montre une colonne de Views alors qu un layout horizontal montre une ligne. Le Linear Layout vous permet de spécifier un "poids" pour chaque enfant, qui contrôle la taille relative de chacun d entre eux dans l espace disponible. RelativeLayout. Le plus flexible des layouts natifs. Il vous permet de définir les positions de chaque View enfant par rapport aux autres et aux limites de l écran. TableLayout. Vous permet de placer les Views sur une grille de lignes et de colonnes. Les tables peuvent compter plusieurs lignes et colonnes et les colonnes peuvent être rétrécies ou agrandies. Gallery. Affiche une ligne unique d objets dans une liste déroulante horizontale. La documentation Android décrit les caractéristiques et propriétés de chaque classe layout en détail, et plutôt que la reproduire ici nous préférons vous y renvoyer : android.com/guide/topics/ui/layout-objects.html. Vous apprendrez plus loin dans ce chapitre comment créer des contrôles composites (widgets constitués de plusieurs Views interconnectées) en étendant ces classes. Utiliser les layouts La façon privilégiée d implémenter des layouts est d utiliser du XML dans des ressources externes. Un layout en XML doit contenir un seul élément racine qui peut contenir autant de layouts et de Views imbriqués nécessaires à la construction d un écran arbitrairement complexe.

7 Chapitre 4 Créer des interfaces utilisateur 117 Le Listing 4.3 montre un layout simple plaçant une TextView au-dessus d un EditText à l aide d un LinearLayout. Listing 4.3 : LinearLayout simple en XML <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="entrez votre texte ici" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="le texte s\'affiche là!" /> </LinearLayout> Notez que pour chaque élément du layout on utilise les constantes wrap_content et fill_ parent plutôt qu une hauteur ou une largeur en pixels. Ces constantes sont la technique la plus simple et la plus puissante pour garantir que vos layouts soient indépendants de la taille de l écran et de la résolution. La constante wrap_content affectera à la View la taille minimale pour afficher son contenu (la hauteur requise pour afficher un texte wrappé, par exemple). La constante fill_parent étend la View pour remplir l espace disponible dans la View parente (ou l écran). La notion de fill_parent a été remplacée par wrap_parent dans la version 2.2 d Android. Dans le Listing 4.3, le layout est paramétré pour remplir l écran et les Views texte, pour remplir la largeur disponible. Leur hauteur est restreinte à la taille requise pour afficher le texte. Vous apprendrez au cours de ce chapitre comment paramétrer la hauteur et la largeur minimales de vos propres contrôles ainsi que d autres pratiques permettant de rester indépendant de la résolution. L implémentation des layouts en XML découple la couche de présentation du code de la View et de l Activity. Elle vous permet également de créer des variantes spécifiques au matériel, chargées dynamiquement et ne nécessitant pas de modifications du code. Si vous le préférez ou le devez, vous pouvez implémenter les layouts en code. Lorsque vous assignez des Views à des layouts de cette façon, il est important d appliquer LayoutParameters à l aide de la méthode setlayoutparams ou en les passant à l appel addview (voir Listing 4.4).

8 118 Développement d applications professionnelles avec Android 2 Listing 4.4 : LinearLayout simple en code LinearLayout ll = new LinearLayout(this); ll.setorientation(linearlayout.vertical); TextView mytextview = new TextView(this); EditText myedittext = new EditText(this); mytextview.settext("entrez votre texte ici "); myedittext.settext("le texte s'affiche là!"); int lheight = LinearLayout.LayoutParams.FILL_PARENT; int lwidth = LinearLayout.LayoutParams.WRAP_CONTENT; ll.addview(mytextview, new LinearLayout.LayoutParams(lHeight, lwidth)); ll.addview(myedittext, new LinearLayout.LayoutParams(lHeight, lwidth)); setcontentview(ll); Optimiser les layouts La désérialisation de layouts dans des Activities est un processus coûteux. Chaque layout et View imbriqué peut avoir un impact dramatique sur la performance et la transparence de vos applications. C est en général une bonne pratique de garder vos layouts aussi simples que possible, mais également d éviter de désérialiser un layout entier pour quelques changements mineurs dans un autre. Les points suivants présentent quelques bonnes pratiques pour la création de layouts efficaces. Notez qu ils ne sont pas exhaustifs. Évitez les imbrications inutiles. Ne placez pas un layout à l intérieur d un autre à moins que ce ne soit nécessaire. Un LinearLayout placé dans un FrameLayout tous deux paramétrés avec fill_parent ne font rien d autre qu allonger le temps de désérialisation. Vérifiez la présence de layouts redondants, surtout si vous avez apporté de nombreux changements à un layout existant. Évitez d utiliser trop de Views. Chaque View supplémentaire dans un layout prend du temps et des ressources pour être désérialisée. Un layout ne devrait jamais compter plus de 80 Views car le temps nécessaire à leur désérialisation deviendrait significatif. Évitez les imbrications trop profondes. Les layouts pouvant être arbitrairement imbriqués, il est facile de créer des hiérarchies complexes et profondes. Bien qu il n y ait pas de limite, il est conseillé de ne pas dépasser dix niveaux d imbrication. Il est important d optimiser vos hiérarchies de layouts afin d éliminer les imbrications inutiles et de les rendre plus efficaces. Pour vous assister, le SDK Android inclut l outil en ligne de commande layoutopt. Appelezle en lui passant en argument le nom de votre ressource layout (ou un dossier de ressource) pour l analyser et obtenir des recommandations de corrections ou d améliorations.

9 Chapitre 4 Créer des interfaces utilisateur 119 Créer de nouvelles Views La possibilité d étendre des Views existantes, d assembler des contrôles composites et de créer des Views uniques permet d implémenter de superbes interfaces utilisateur, optimisées pour les flux de votre application. Vous pouvez créer des sous-classes à partir de la boîte à outils de Views existantes ou implémenter vos propres Views et garder ainsi la liberté de façonner votre interface utilisateur pour optimiser l expérience de l utilisateur. INFO Lorsque vous concevez une interface utilisateur, il est important de trouver le bon équilibre entre esthétique et facilité d usage. Avec le pouvoir de créer vos propres contrôles personnalisés vient la tentation de tous les reconstruire à partir de zéro. Résistez-y. Les Views standard seront familières aux utilisateurs d autres applications Android et seront mises à jour avec les nouvelles versions de plateforme. Sur de petits écrans auxquels les utilisateurs portent souvent une attention limitée, un contrôle familier sera plus facilement utilisable que son équivalent plus esthétique. La meilleure approche dépend du but recherché : Modifiez ou étendez l apparence et/ou le comportement d un contrôle existant lorsqu il fournit déjà les fonctionnalités de base dont vous avez besoin. En redéfinissant les gestionnaires d événements de ondraw mais en rappelant les méthodes de la superclasse, vous pouvez personnaliser une View sans avoir à implémenter de nouveau ses fonctionnalités. Vous pouvez par exemple personnaliser une TextView pour afficher un nombre donné de chiffres après la virgule. Combinez des Views pour créer des contrôles atomiques réutilisables s appuyant sur les fonctionnalités de plusieurs Views interconnectées. Vous pouvez par exemple créer une boîte combo déroulante en combinant une TextView et un Button qui affiche une ListView flottante lorsqu on clique dessus. Créez un contrôle entièrement nouveau lorsque vous avez besoin d une interface complètement différente que vous ne pouvez obtenir en combinant des contrôles existants. Modifier des Views existantes La boîte à outils contient des Views qui couvrent de nombreux besoins d interface utilisateur mais ces contrôles sont nécessairement génériques. En les personnalisant, vous évitez d implémenter à nouveau des comportements existants tout en façonnant l interface utilisateur et les fonctionnalités aux besoins de votre application.

10 120 Développement d applications professionnelles avec Android 2 Pour créer une nouvelle View basée sur un contrôle existant, créez une nouvelle classe qui l étend (voir Listing 4.5). Listing 4.5 : Extension de TextView import android.content.context; import android.util.attributeset; import android.widget.textview; public class MyTextView extends TextView { public MyTextView (Context context, AttributeSet attrs, int defstyle) { super(context, attrs, defstyle); public MyTextView (Context context) { super(context); public MyTextView (Context context, AttributeSet attrs) { super(context, attrs); La redéfinition et l extension des gestionnaires d événements associés à un comportement modifiera celui-ci ainsi que l apparence de votre nouvelle View. Dans le Listing 4.5 étendu qui suit, on redéfinit la méthode ondraw pour modifier l apparence de la View ainsi que onkeydown pour une prise en charge personnalisée de l appui sur une touche. public class MyTextView extends TextView { public MyTextView (Context context, AttributeSet ats, int defstyle) { super(context, ats, defstyle); public MyTextView (Context context) { super(context); public MyTextView (Context context, AttributeSet attrs) { super(context, public void ondraw(canvas canvas) { [... Dessinez sur le canvas sous le texte... ] // Rendu du texte habituel à l'aide de la classe de base de la TextView. super.ondraw(canvas); [... Dessinez sur le canvas sur le texte... public boolean onkeydown(int keycode, KeyEvent keyevent) { [... Traitement particulier en fonction... ]

11 Chapitre 4 Créer des interfaces utilisateur 121 [... de l'appui sur une touche particulière... ] // Utilise la fonctionnalité existante implémentée par // la classe de base pour répondre à l'appui sur une touche. return super.onkeydown(keycode, keyevent); Les gestionnaires d événements disponibles dans les Views seront couverts en détail dans ce chapitre. Personnaliser votre liste de tâches L exemple de liste de tâche du Chapitre 2 utilise des contrôles TextView pour représenter chaque ligne dans une List View. Vous pouvez personnaliser l apparence de la liste en étendant TextView et en redéfinissant la méthode ondraw. Vous allez créer dans cet exemple une nouvelle TodoListItemView qui fera apparaître chaque item comme sur un bloc de papier. Une fois terminée, votre liste de tâches personnalisée devrait ressembler à la Figure 4.1. Figure Créez une nouvelle classe TodoListItemView qui étend TextView. Incluez un stub pour redéfinir la méthode ondraw et implémentez les constructeurs qui appelleront un nouveau stub de méthode init. package com.paad.todolist; import android.content.context; import android.content.res.resources; import android.graphics.canvas;