Créer des interfaces utilisateur

4 Créer des interfaces utilisateur Au sommaire de ce chapitre : Utiliser les vues et les layouts Comprendre les fragments Optimiser les layouts Créer des interfaces utilisateur indépendantes de la résolution Étendre, grouper, créer et utiliser les vues Utiliser des adaptateurs pour lier des données aux vues. Citons Stephen Fry sur l importance du style comme essence de la conception d appareils numériques : 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) Bien que Fry décrit le style des terminaux eux-mêmes, il aurait pu dire la même chose des applications qui s exécutent sur ceux-ci. L augmentation des tailles, des résolutions et de la luminosité des écrans, ainsi que le support du multitouch, a rendu les applications de plus en plus visuelles. L introduction de terminaux optimisés pour un confort d utilisation de plus en plus grand notamment les tablettes et les télévisions dans l écosystème Android n a fait qu augmenter l importance de la conception visuelle d une application. Nous vous présenterons dans ce chapitre les éléments de base de l interface Android et vous découvrirez comment utiliser les layouts, les fragments et les vues pour créer des interfaces fonctionnelles et intuitives pour vos activités. Les différents éléments d une interface utilisateur Android sont rangés à l écran par le biais de plusieurs gestionnaires de layouts dérivés de la classe ViewGroup. Ce chapitre

102 Android 4 introduira plusieurs classes layout natives et montrera comment les utiliser, comment créer les vôtres et comment vous assurer que vous utilisez les layouts le plus efficacement possible. La gamme des tailles et des résolutions d écrans s est étendue en même temps que la gamme des terminaux disponibles. Android 3.0 a introduit l API des fragments afin d offrir un meilleur support de création de layouts dynamiques, pouvant être optimisés pour les tablettes et pour un grand nombre d écrans de smartphones. Après avoir découvert quelques contrôles visuels fournis par le SDK, vous apprendrez à les étendre et à les personnaliser. Grâce aux groupes de vues, vous combinerez des vues pour créer des éléments d interfaces atomiques et réutilisables, constitués de sous-contrôles qui interagissent. Vous créerez également vos propres vues pour afficher des données et interagir avec vos utilisateurs. Enfin, nous présenterons les adaptateurs et nous verrons comment les utiliser pour lier votre couche présentation aux sources de données sous-jacentes. Fondements de la conception d interface sous Android La conception d interface utilisateur, l expérience utilisateur, l interaction hommemachine 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 : Vues. Les Vues 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 la classe View. Groupes de vues. Les groupes de vues sont des extensions de la classe View pouvant contenir plusieurs vues filles. L extension de la classe ViewGroup permet de créer des contrôles composites constitués de vues filles interconnectées. La classe ViewGroup peut être également étendue pour fournir les gestionnaires de layouts qui aident à disposer les contrôles dans vos activités. Fragments. Les fragments, introduits par Android 3.0 (API level 11) servent à encapsuler des portions de votre interface. Cette encapsulation est particulièrement utile pour optimiser les layouts de votre interface pour différentes tailles d écrans et pour créer des composants d interface réutilisables. Chaque fragment contient son propre layout et reçoit les événements d entrée concernés, mais il est étroitement lié à l activité dans laquelle il doit être intégré. Les fragments ressemblent aux contrôleurs de vues utilisés dans le développement pour iphone. Activités. Les activités, 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

Chapitre 4 Créer des interfaces utilisateur 103 de Windows. Pour afficher une interface utilisateur, vous devez affecter une vue (en général, un layout ou un fragment) à une activité. 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 vues standard ou d en créer de nouvelles pour fournir votre propre expérience utilisateur. Fondements des interfaces utilisateur sous Android Tous les composants visuels Android descendent de la classe View et sont généralement désignés sous le terme générique de vues. Vous verrez souvent appelés vues des contrôles ou des widgets (à ne pas confondre les widgets de l écran d accueil, qui sont décrits au Chapitre 14), 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 la classe View conçue pour contenir plusieurs vues. Les groupes de vues sont utilisés le plus souvent pour gérer la disposition des vues filles, mais également pour construire des composants atomiques réutilisables. Les groupes de vues qui tiennent le premier rôle sont appelés layouts. Dans les sections qui suivent, vous apprendrez à concevoir des interfaces de plus en plus complexes, puis nous présenterons les fragments, les vues offertes par le SDK, comment les étendre, comment construire vos propres contrôles composés et créer des vues personnalisées en partant de zéro. Affecter des interfaces utilisateur aux activités Une nouvelle activité 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 affecter une interface à une activité lorsque vous redéfinirez son gestionnaire oncreate. La méthode setcontentview prend en paramètre soit un identifiant de ressource layout, soit une simple instance de View. Cela vous permet de définir votre interface utilisateur dans le code ou en utilisant la technique privilégiée des ressources layout externes. @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); Utiliser des ressources layout découple votre couche de présentation de la logique applicative, vous donnant ainsi la souplesse de modifier la présentation sans toucher

104 Android 4 au code. Cela permet de préciser 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). La méthode findviewbyid permet d obtenir une référence à chacune des vues d un layout : TextView mytextview = (TextView)findViewById(R.id.myTextView); Si vous préférez l approche plus traditionnelle, vous pouvez construire l interface directement dans votre code : @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); TextView mytextview = new TextView(this); setcontentview(mytextview); mytextview.settext( Hello, Android ); La méthode setcontentview prend en paramètre une instance unique de View : vous devez donc utiliser des layouts pour ajouter plusieurs contrôles à votre activité. Si vous utilisez les fragments pour encapsuler des portions de l interface de l activité, la vue désérialisée dans le gestionnaire oncreate sera un layout qui décrit la position relative de chaque fragment (ou de ses conteneurs). L interface utilisateur utilisée pour chaque fragment est définie dans son propre layout et désérialisée dans le fragment lui-même, comme nous le verrons plus loin dans ce chapitre. Lorsqu un fragment a été désérialisé dans une activité, les vues qu il contient font partie de la hiérarchie des vues de cette activité : vous pouvez donc retrouver n importe laquelle de ses vues filles dans l activité parente en utilisant findbyviewid, comme précédemment. Introduction aux layouts Les gestionnaires de layout (appelés en général simplement layouts) sont des extensions de la classe ViewGroup utilisées pour placer des vues filles dans votre interface utilisateur. Les layouts peuvent être imbriqués, ce qui permet, en les combinant, de créer des interfaces complexes. Le SDK Android inclut quelques classes layouts. Vous pouvez les utiliser, les modifier ou créer vos propres layouts pour construire l interface utilisateur de vos vues, de vos fragments et de vos activités. À 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 utilisées : FrameLayout. Le plus simple des gestionnaires de layout. Il épingle simplement chaque vue fille dans le coin supérieur gauche (mais vous pouvez changer cette

Chapitre 4 Créer des interfaces utilisateur 105 position par défaut à l aide de l attribut gravity). Ajouter plusieurs filles les empile les unes sur les autres, chaque nouvelle vue dissimulant la précédente. LinearLayout. Aligne chaque vue fille verticalement ou horizontalement. Un layout vertical montre une colonne de vues alors qu un layout horizontal montre une ligne de vues. Ce gestionnaire vous permet de préciser un "poids" pour chaque fille à l aide de l attribut weight, afin de contrôler la taille relative de chacune d entre elles dans l espace disponible. RelativeLayout. Le plus souple des layouts natifs. Il vous permet de définir les positions de chaque vue fille par rapport aux autres et aux limites de l écran. GridLayout. Introduit par Android 4.0 (API level 14), ce gestionnaire utilise une grille rectangulaire de fines lignes pour disposer les vues dans une suite de lignes et de colonnes. Il est extrêmement souple et permet de beaucoup simplifier les layouts ou d éliminer l imbrication complexe qui est souvent nécessaire avec les gestionnaires précédents. Pour le construire, il est préférable d utiliser l éditeur de layout plutôt que de créer manuellement sa description en XML Chacun de ces layouts est conçu pour s adapter à la taille de l écran du terminal hôte en évitant d utiliser des positions absolues ou des valeurs de pixels prédéterminées. Ceci les rend particulièrement utiles lorsque l on conçoit des applications devant fonctionner sur plusieurs terminaux Android différents. La documentation Android décrit les caractéristiques et propriétés de chaque classe layout en détail. Plutôt que la reproduire ici, nous préférons vous y renvoyer : http://developer.android.com/guide/topics/ui/layout-objects.html Vous verrez des exemples pratiques d utilisation de ces layouts car ils sont utilisés dans les exemples de ce livre. Plus loin, dans ce chapitre, vous apprendrez également à créer des contrôles composites en utilisant et/ou en étendant ces classes. Définir les layouts La façon privilégiée d implémenter des layouts est d utiliser des ressources externes en XML. Chaque layout XML doit contenir un seul élément racine qui peut contenir autant de layouts et de vues imbriqués nécessaires à la construction d un écran arbitrairement complexe. L extrait suivant montre un layout simple qui place une TextView au-dessus d un EditText à l aide d un LinearLayout vertical : <?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">

106 Android 4 <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 exactes en pixels. Ces constantes, combinées aux layouts qui savent s adapter (comme les layouts linéaires, relatifs ou en grille), sont la technique la plus simple et la plus puissante pour garantir que vos layouts seront indépendants de la taille et de la résolution de l écran. La constante wrap_content fixe la taille de la vue au minimum nécessaire pour afficher son contenu (la hauteur requise pour afficher un texte, par exemple). La constante fill_parent étend la vue pour remplir l espace disponible dans la vue, le fragment ou l activité parente. 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 vue, du fragment, le code contrôleur de l activité et le code métier. Elle vous permet également de créer des variantes spécifiques au matériel, qui seront chargées dynamiquement et qui ne nécessitent pas de modifications du code. Si vous le préférez ou si vous le devez, vous pouvez implémenter les layouts dans votre code. Lorsque vous affectez des vues à 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 : 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);

Chapitre 4 Créer des interfaces utilisateur 107 Utiliser des layouts pour créer des interfaces utilisateur indépendantes du matériel Une caractéristique des classes layout que nous avons décrites précédemment et des techniques que nous avons présentées pour les utiliser dans vos applications est leur faculté à s adapter à un grand éventail de tailles, de résolutions et d orientations d écrans. La diversité des terminaux Android joue un rôle essentiel dans son succès. Pour les développeurs, cette diversité implique de concevoir des interfaces qui fourniront le meilleur confort possible à leurs utilisateurs. Utilisation d un layout linéaire Le layout linéaire est l une des classes layout les plus simples qui soit. Il permet de créer des interfaces utilisateur (ou des éléments d interface) simples dans lesquelles les vues filles sont alignées verticalement ou horizontalement. La simplicité des layouts linéaires les rend très simples d emploi, mais limite également leur souplesse. Dans la plupart des cas, vous les utiliserez pour construire des éléments d interfaces qui seront imbriqués dans d autres layouts, comme un layout relatif, par exemple. Le Listing 4.1 montre deux layouts linéaires imbriqués un layout horizontal contenant deux boutons de même taille et un layout vertical qui place ces deux boutons au-dessus d une ListView. Listing 4.1 : Layout linéaire <LinearLayout xmlns:android= http://schemas.android.com/apk/res/android android:layout_height= match_parent android:orientation= vertical > <LinearLayout android:layout_width= fill_parent android:layout_height= wrap_content android:orientation= horizontal android:padding= 5dp > <Button android:text= @string/cancel_button_text android:layout_width= fill_parent android:layout_height= wrap_content android:layout_weight= 1 <Button android:text= @string/ok_button_text android:layout_width= fill_parent android:layout_height= wrap_content android:layout_weight= 1 </LinearLayout> <ListView android:layout_height= match_parent </LinearLayout>

108 Android 4 Si vous vous rendez compte que vous devez créer des imbrications de plus en plus complexes de layouts linéaires, il est sûrement temps de penser à utiliser un gestionnaire de layouts plus souple. Utilisation d un layout relatif Un layout relatif offre une grande souplesse à vos layouts puisqu il permet de définir la position de chaque élément dans le layout par rapport à son parent et aux autres vues. Le Listing 4.2 modifie le layout décrit dans le Listing 4.1 pour déplacer les boutons sous la ListView. Listing 4.2 : Layout relatif <?xml version= 1.0 encoding= utf-8?> <RelativeLayout xmlns:android= http://schemas.android.com/apk/res/android android:layout_height= match_parent > <LinearLayout android:id= @+id/button_bar android:layout_alignparentbottom= true android:layout_width= fill_parent android:layout_height= wrap_content android:orientation= horizontal android:padding= 5dp > <Button android:text= @string/cancel_button_text android:layout_width= fill_parent android:layout_height= wrap_content android:layout_weight= 1 <Button android:text= @string/ok_button_text android:layout_width= fill_parent android:layout_height= wrap_content android:layout_weight= 1 </LinearLayout> <ListView android:layout_above= @id/button_bar android:layout_alignparentleft= true android:layout_height= match_parent > </ListView> </RelativeLayout> Utilisation d un layout en grille Le layout en grille a été introduit par Android 4.0 (API level 14) ; c est lui qui offre le plus de souplesse parmi tous les gestionnaires de layouts. Il utilise une grille arbitraire pour positionner les vues. En utilisant le regroupement de lignes et de colonnes, la vue spatiale et les attributs gravity, vous pouvez créer des interfaces complexes sans devoir passer par l imbrication qui est nécessaire avec

Chapitre 4 Créer des interfaces utilisateur 109 le layout relatif que nous venons de décrire. Le layout en grille est tout particulièrement utile pour construire des layouts qui exigent un alignement dans les deux directions un formulaire dont les lignes et les colonnes doivent être alignées, mais qui inclut également des éléments qui ne s adaptent pas très bien au motif en grille classique, par exemple. Vous pouvez également disposer de toutes les fonctionnalités offertes par un layout relatif en combinant un layout en grille et un layout linéaire. Pour des raisons d efficacité, il est préférable d utiliser un layout en grille plutôt que de créer la même interface en combinant des layouts imbriqués. Le Listing 4.3 présente le même layout que celui du Listing 4.2, mais se sert d un layout en grille à la place du layout relatif. Listing 4.3 : Layout en grille <?xml version= 1.0 encoding= utf-8?> <GridLayout xmlns:android= http://schemas.android.com/apk/res/android android:layout_height= match_parent android:orientation= vertical > <ListView android:background= #FF444444 android:layout_gravity= fill > </ListView> <LinearLayout android:layout_gravity= fill_horizontal android:orientation= horizontal android:padding= 5dp > <Button android:text= Annuler android:layout_width= fill_parent android:layout_height= wrap_content android:layout_weight= 1 <Button android:text= OK android:layout_width= fill_parent android:layout_height= wrap_content android:layout_weight= 1 </LinearLayout> </GridLayout> Notez qu il n est pas nécessaire de fixer les paramètres largeur et hauteur des éléments du layout en grille. Chaque élément enveloppe son contenu par défaut et l attribut layout_gravity sert à déterminer dans quelle direction chaque élément doit s étendre. Optimiser les layouts La désérialisation de layouts est un processus coûteux. Chaque layout et vue imbriqué peut avoir un impact dramatique sur la performance et la transparence de vos applications.

110 Android 4 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 conteneurs de layouts redondants sont inutiles Un layout linéraire dans un layout frame, tous les deux avec match_parent, ne fait qu augmenter le temps de désérialisation. Recherchez les layouts redondants, surtout si vous avez effectué beaucoup de modifications dans un layout existant ou que vous lui ayez ajouté des layout fils. Il n y a pas de limite à l imbrication des layouts : il est donc facile de créer des hiérarchies complexes et fortement imbriquées. Malgré cette absence de limite, il est conseillé de ne pas dépasser dix niveaux. Un exemple classique d imbrication inutile est l utilisation d un layout frame pour créer l unique nœud racine d un layout, comme l illustre l extrait suivant : <?xml version= 1.0 encoding= utf-8?> <FrameLayout xmlns:android= http://schemas.android.com/apk/res/android android:layout_height= match_parent > <ImageView android:id= @+id/myimageview android:layout_height= match_parent android:src= @drawable/myimage <TextView android:id= @+id/mytextview android:layout_height= wrap_content android:text= @string/hello android:gravity= center_horizontal android:layout_gravity= bottom </FrameLayout> Ici, le layout frame deviendra redondant s il est ajouté à un parent. Une meilleure solution consiste à utiliser la balise merge : <?xml version= 1.0 encoding= utf-8?> <merge xmlns:android= http://schemas.android.com/apk/res/android > <ImageView android:id= @+id/myimageview android:layout_height= match_parent android:src= @drawable/myimage <TextView android:id= @+id/mytextview

Chapitre 4 Créer des interfaces utilisateur 111 android:layout_height= wrap_content android:text= @string/hello android:gravity= center_horizontal android:layout_gravity= bottom </merge> Lorsqu un layout contenant une balise merge est ajouté à un autre layout, le nœud merge est supprimé et ses vues filles sont ajoutées directement au nouveau parent. Cette balise est tout particulièrement pratique lorsqu elle est combinée à la balise include, qui permet d insérer le contenu d un layout dans un autre : <?xml version= 1.0 encoding= utf-8?> <LinearLayout xmlns:android= http://schemas.android.com/apk/res/android android:orientation= vertical android:layout_height= match_parent > <include android:id= @+id/my_action_bar layout= @layout/actionbar <include android:id= @+id/my_image_text_layout layout= @layout/image_text_layout </LinearLayout> La combinaison des balises merge et include permet de créer des définitions de layouts simples et réutilisables, qui ne créent pas de hiérarchies lourdement imbriquées. Éviter les vues trop nombreuses Toute vue supplémentaire prend du temps et des ressources pour se désérialiser. Pour optimiser la vitesse et la réactivité de votre application, aucun de ses layouts ne devrait inclure plus de 80 vues. Passé cette limite, le temps pris par la désérialisation du layout devient non négligeable. Pour minimiser le nombre de vues dans un layout complexe, utilisez un ViewStub. Une ébauche de vue (view stub) fonctionne comme une inclusion paresseuse c est une ébauche qui représente les vues filles indiquées dans le layout parent, mais cette ébauche est désérialisée uniquement de façon explicite, par un appel à inflate ou lorsqu elle devient visible. // Recherche de l ébauche View stub = findviewbyid(r.id. download_progress_panel_stub); // On la rend visible, ce qui force la désérialisation du layout fils stub.setvisibility(view.visible); // Recherche du nœud racine du layout désérialisé View downloadprogresspanel = findviewbyid(r.id.download_progress_panel); Les vues contenues dans le layout fils ne seront donc créées que si on en a besoin, ce qui réduit le coût en termes de temps et de ressources lorsque l on désérialise des interfaces utilisateur complexes.

112 Android 4 Lorsque vous ajoutez un ViewStub à votre layout, vous pouvez redéfinir les paramètres id et layout de la vue racine du layout qu elle représente : <?xml version= 1.0 encoding= utf-8?> <FrameLayout xmlns:android=http://schemas.android.com/apk/res/android android:layout_height= match_parent > <ListView android:id= @+id/mylistview android:layout_height= match_parent <ViewStub android:id= @+id/download_progress_panel_stub android:layout= @layout/progress_overlay_panel android:inflatedid= @+id/download_progress_panel android:layout_height= wrap_content android:layout_gravity= bottom </FrameLayout> Cet extrait modifie la largeur, la hauteur et l ancrage du layout importé afin que ces valeurs correspondent aux exigences du layout parent. Cette souplesse permet de créer et de réutiliser le même layout fils générique dans plusieurs layouts parents. Les attributs id et inflatedid indiquent, respectivement, l identifiant du StubView et du groupe de vues qu il deviendra lorsqu il sera désérialisé. Info Lorsque l ébauche de vue est désérialisée, elle est supprimée de la hiérarchie des vues et remplacée par le nœud racine de la vue qu elle importe. Pour modifier la visibilité des vues importées, vous devez soit utiliser la référence à leur nœud racine (renvoyé par l appel à inflate), soit trouver la vue à l aide de findviewbyid, en utilisant l identifiant de layout qui lui est affecté dans le nœud ViewStub correspondant. Utiliser Lint pour analyser les layouts Pour vous aider à optimiser vos hiérarchies de layout, le SDK inclut lint, un outil puissant permettant de détecter les problèmes dans vos applications, notamment ceux concernant les performances des layouts. Cet outil est disponible en ligne de commande ou, comme le montre la Figure 4.1, dans une fenêtre Eclipse puisqu il fait partie du plugin ADT. Outre la détection des problèmes d optimisation décrits dans cette section, lint permet également de repérer les traductions manquantes, les ressources inutilisées, les tailles de tableau incohérentes, les problèmes d accessibilité et d internationalisation, les images dupliquées ou absentes, les problèmes liés à l utilisation et les erreurs du manifeste.

Chapitre 4 Créer des interfaces utilisateur 113 Lint est un outil en perpétuelle évolution et de nouvelles règles lui sont ajoutées régulièrement. La liste complète des tests qu il effectue se trouve à l URL http://tools.android.com/tips/lint-checks. Figure 4.1 Exemple de liste de tâches Dans cet exemple, vous allez créer une nouvelle application Android à partir de zéro en utilisant les vues et les layouts fournis par Android. Info Ne vous inquiétez pas si vous ne comprenez pas tout ce qui est décrit dans cet exemple. Certaines fonctionnalités utilisées comme les ArrayAdapters, les ListViews et les KeyListeners ne seront introduites que dans les chapitres suivants, où elles seront expliquées en détail. Vous reviendrez également plus tard à cet exemple pour y ajouter de nouvelles fonctionnalités au fur et à mesure de votre progression. 1. Commencez par créer un nouveau projet Android. Sous Eclipse, sélectionnez File > New > Project, puis choisissez Android Project sous le nœud Android (voir la Figure 4.2) et cliquez sur Next. 2. Entrez les détails de votre nouveau projet. 2.1 Indiquez un nom de projet (voir la Figure 4.3), puis cliquez sur Next. 2.2 Choisissez la cible. Sélectionnez la plateforme la plus récente, comme le montre la Figure 4.4, puis cliquez sur Next. 2.3 Entrez les détails du projet (voir la Figure 4.4). Application name sera le nom visible de votre application et le champ Create Activity vous permettra de nommer votre activité. Une fois ces informations entrées, cliquez sur Finish pour créer votre nouveau projet.

114 Android 4 Figure 4.2 Figure 4.3 Figure 4.4

Chapitre 4 Créer des interfaces utilisateur 115 Figure 4.5 3. Avant de créer vos configurations de débogage et d exécution, créez un appareil virtuel qui vous permettra de tester vos applications : 3.1. Sélectionnez Window > AVD Manager. Dans la boîte de dialogue (voir la Figure 4.6), cliquez sur le bouton New Figure 4.6 3.2 Dans le dialogue qui s ouvre (voir la Figure 4.7), entrez un nom pour votre appareil et choisissez le SDK cible (le même que celui que vous avez choisi pour votre projet à l étape 2.2 et la résolution d écran. Choisissez une taille de carte SD supérieure à 8 Mo, cochez la case snapshot, puis cliquez sur Create AVD.

116 Android 4 Figure 4.7 4. Créez maintenant vos configurations de débogage et d exécution. Sélectionnez Run > Debug Configurations puis Run > Run Configurations afin d en créer une de chaque pour le projet TodoList et sélectionnez l appareil virtuel que vous avez créé à l étape 3. Vous pouvez également choisir un terminal physique s il est connecté et que le débogage soit activé. Vous pouvez conserver Launch Defaut Activity comme action de lancement ou choisir explicitement de lancer la nouvelle activité ToDoListActivity. 5. Vous devez maintenant décider ce que vous allez montrer aux utilisateurs et quelles actions ils devront effectuer. Concevez une interface qui rende ces actions aussi intuitives que possible. Dans cet exemple, nous voulons présenter aux utilisateurs une liste de tâches et une zone de saisie permettant d en ajouter de nouvelles. Les bibliothèques Android proposent les contrôles liste et zone de saisie pour ce faire (plus loin dans ce chapitre, vous en saurez plus sur les vues disponibles sous Android et sur la façon d en créer de nouvelles). La meilleure méthode pour créer la présentation de notre interface utilisateur est d utiliser un fichier de ressource de layout. Ouvrez le fichier main.xml, situé dans le dossier res/layout du projet et modifiez-le en lui ajoutant une ListView et un EditText dans le LinearLayout. Il est important d attribuer un ID à l EditText et à la ListView afin de pouvoir les référencer dans votre code. <?xml version= 1.0 encoding= utf-8?> <LinearLayout xmlns:android= http://schemas.android.com/apk/res/android android:orientation= vertical

Chapitre 4 Créer des interfaces utilisateur 117 android:layout_height= match_parent > <EditText android:id= @+id/myedittext android:layout_height= wrap_content android:hint= @string/additemhint android:contentdescription= @string/additemcontentdescription <ListView android:id= @+id/mylistview android:layout_height= wrap_content </LinearLayout> 6. Dans le fichier strings.xml du dossier res/values, vous devrez également ajouter les ressources chaînes qui contiennent les messages de l étape 5. Profitez-en pour supprimer la chaîne "hello" qui est présente par défaut : <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">liste de tâches</string> <string name="additemhint">nouvelle tâche</string> <string name="additemcontentdescription">nouvelle tâche</string> </resources> 7. Une fois votre interface utilisateur définie, ouvrez l activité ToDoListActivity dans le dossier src de votre projet. Commencez par désérialiser votre interface utilisateur à l aide de setcontentview puis récupérez les références de ListView et EditText à l aide de findviewbyid. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // Désérialisation de la vue. setcontentview(r.layout.main); // Récupération des références aux widgets de l interface. ListView mylistview = (ListView)findViewById(R.id.myListView); final EditText myedittext = (EditText)findViewById(R.id.myEditText); Info Lorsque vous ajouterez le code de l étape 7 dans ToDoListActivity ou lorsque que vous tenterez de compiler votre projet, Eclipse ou le compilateur se plaindront que les classes ListView et EditText ne peuvent pas être résolues comme des types. Vous devez ajouter des instructions d import à votre classe, afin d inclure les bibliothèques qui contiennent ces vues (ici, android.widget.edittext et android.widget.listview). Pour que les codes et les exemples de ce livre restent courts et lisibles, nous n inclurons pas tous ces imports (mais ils sont présents dans les codes sources que vous pouvez télécharger).

118 Android 4 Si vous utilisez Eclipse, les classes pour lesquelles il manque des instructions import sont soulignées en rouge. En cliquant sur ces classes, une liste vous proposera d inclure pour vous les instructions d import manquantes. Eclipse propose également un raccourci pratique (Ctrl-Maj-o) qui tentera de créer automatiquement toutes les instructions import pour les classes utilisées dans votre code. 8. Toujours dans la méthode oncreate, définissez une ArrayList de chaînes pour stocker chaque élément de la liste. Vous pouvez lier une ListView à une ArrayList en utilisant un ArrayAdapter. Créez une nouvelle instance d ArrayAdapter pour lier le tableau des items à la ListView. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); ListView mylistview = (ListView)findViewById(R.id.myListView); final EditText myedittext = (EditText)findViewById(R.id.myEditText); // Création de la liste de tâches final ArrayList<String> todoitems = new ArrayList<String>(); // Création de l array adapter pour lier l ArrayList à la ListView. final ArrayAdapter<String> aa; aa = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, todoitems); // Liaison de l ArrayAdapter à la ListView. mylistview.setadapter(aa); 9. La dernière étape pour rendre cette liste fonctionnelle est de permettre aux utilisateurs d y ajouter de nouveaux éléments. Ajoutez à l EditText un onkeylistener, qui sera à l écoute des clics sur un Dpad ou de la touche Entrée. Chacune de ces actions doit ajouter le contenu de l EditText au tableau de la liste et informer l ArrayAdapter des modifications. Enfin, nettoyez l EditText pour le préparer à l élément suivant. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); ListView mylistview = (ListView)findViewById(R.id.myListView); final EditText myedittext = (EditText)findViewById(R.id.myEditText); final ArrayList<String> todoitems = new ArrayList<String>(); final ArrayAdapter<String> aa; aa = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, todoitems); mylistview.setadapter(aa); myedittext.setonkeylistener(new OnKeyListener() { public boolean onkey(view v, int keycode, KeyEvent event) { if (event.getaction() == KeyEvent.ACTION_DOWN) if ((keycode == KeyEvent.KEYCODE_DPAD_CENTER) (keycode == KeyEvent.KEYCODE_ENTER)) {

Chapitre 4 Créer des interfaces utilisateur 119 todoitems.add(0, myedittext.gettext().tostring()); aa.notifydatasetchanged (); myedittext.settext(""); return true; return false; ); 10. Exécutez ou déboguez l application et vous verrez apparaître un champ de saisie au-dessus d une liste, comme dans la Figure 4.8. 11. Vous avez maintenant terminé votre première "vraie" application Android. Ajoutez des points d arrêt au code pour tester le débogueur et essayez la perspective DDMS. Info Tous les extraits de code de cet exemple font partie du projet Chapitre 2 To-do List disponible en téléchargement sur le site de l éditeur, pearson.fr, à la page consacrée à cet ouvrage. Figure 4.8 Telle quelle, cette application n est pas extraordinairement utile. Les entrées de la liste ne sont pas sauvegardées entre les sessions, vous ne pouvez modifier ou supprimer une entrée et les indications classiques d une liste de tâches comme les dates d échéance ou les priorités ne sont ni enregistrées ni affichées. De plus, elle ne respecte presque aucune des règles de conception d une bonne application mobile vues jusqu à présent. Vous corrigerez quelques-uns de ces défauts lorsque vous reviendrez sur cet exemple au cours des chapitres suivants.

120 Android 4 Introduction aux fragments Les fragments permettent de diviser vos activités en composants réutilisables, totalement autonomes, chacun avec son propre cycle de vie et sa propre interface utilisateur. Le principal avantage des fragments est la facilité avec laquelle vous pouvez créer des interfaces dynamiques et souples pouvant s adapter à un grand nombre de tailles d écrans des plus petits smartphones aux tablettes. Chaque fragment est un module indépendant qui est intimement lié à l activité dans laquelle il se trouve. Les fragments peuvent être réutilisés dans plusieurs activités, agencés selon un grand nombre de combinaisons pour s adapter aux interfaces multipanneaux des tablettes et ajoutés, supprimés et échangés dans une activité en cours afin de pouvoir construire aisément des interfaces utilisateur dynamiques. Ils permettent de présenter une interface cohérente, optimisée pour un large éventail de types de terminaux, de tailles et de densités d écrans. Bien qu il ne soit pas nécessaire de diviser vos activités (et leurs layouts associés) en fragments, le faire améliore énormément la souplesse de votre interface utilisateur et vous facilitera la tâche lorsqu il s agira de l adapter à de nouvelles configurations de terminaux. Info Les fragments ont été introduits par Android 3.0 Honeycomb (API level 11). Ils font désormais également partie de la bibliothèque support d Android, ce qui permet de les utiliser sur les plateformes à partir d Android 1.6. Pour utiliser les fragments fournis par la bibliothèque support, votre activité doit étendre la classe FragmentActivity : public class MyActivity extends FragmentActivity Si vous utilisez cette bibliothèque dans un projet ayant pour cible une version au moins supérieure à l API level 11, vérifiez bien que tous les imports liés aux fragments et les références de classes n utilisent que les classes de la bibliothèque support. Les fragments de la bibliothèque native et de la bibliothèque support sont étroitement liés, mais leurs classes ne sont pas interchangeables. Créer de nouveaux fragments Pour créer un nouveau fragment, créez une classe fille de la classe Fragment en définissant (éventuellement) l interface utilisateur et en implémentant la fonctionnalité qu elle encapsule. Dans la plupart des cas, vous affecterez une interface à votre fragment. Vous pouvez aussi créer un fragment sans interface, fournissant à la place un comportement

Chapitre 4 Créer des interfaces utilisateur 121 d arrière-plan pour une activité nous y reviendrons plus en détail, plus loin dans ce chapitre. Si votre fragment a besoin d une interface utilisateur, redéfinissez la méthode oncreateview pour qu elle désérialise et renvoie la hiérarchie de vues voulue, comme le montre le squelette de code du Listing 4.4. Listing 4.4 : Squelette de création d un fragment package com.paad.fragments; import android.app.fragment; import android.os.bundle; import android.view.layoutinflater; import android.view.view; import android.view.viewgroup; public class MySkeletonFragment extends Fragment { @Override public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { // Crée ou désérialise, puis renvoie l interface du fragment // Renvoie null si le fragment n a pas d interface. return inflater.inflate(r.layout.my_fragment, container, false); Vous pouvez créer le layout d un fragment directement dans votre code, en vous servant des groupes de vues ; cependant, comme pour les activités, il est préférable de concevoir les layouts des fragments en désérialisant une ressource XML. À la différence des activités, les fragments n ont pas besoin d être enregistrés dans le manifeste car ils ne peuvent exister que s ils sont intégrés dans une activité ; leurs cycles de vie dépendent de celui de l activité à laquelle ils ont été ajoutés. Le cycle de vie des fragments Les événements du cycle de vie d un fragment reflètent ceux de son activité parente. Cependant, lorsque l activité conteneur est dans son état actif ou qu elle a repris, ajouter ou supprimer un fragment affectera son cycle de vie de façon indépendante. Les fragments incluent une série de gestionnaires d événements qui imitent ceux de la classe Activity. Ils sont déclenchés lorsque le fragment est créé, lancé, repris, en pause, arrêté et détruit. Ils contiennent également un certain nombre de fonctions de rappel supplémentaires qui signalent la liaison du fragment à son activité parente et son détachement de celle-ci, la création (et la destruction) de la hiérarchie de vues du fragment et la fin de la création de l activité parente. La Figure 4.9 résume ce cycle de vie.

122 Android 4 Créé Visible Actif Fragment.onAttach Fragment.onCreate Fragment.onCreateView Fragment.onActivityCreated Fragment.onStart Fragment.onResume Retour au layout Fragment.onDetach Fragment.onDestroy Fragment.onDestroyView Fragment.onStop Fragment.onPause Figure 4.9 Le squelette de code du Listing 4.5 montre les ébauches des gestionnaires du cycle de vie d un fragment. Dans chaque ébauche, les commentaires décrivent les actions que vous devriez entreprendre à chaque changement d état. Info Vous devez appeler les méthodes de la superclasse lorsque vous redéfinissez la plupart de ces gestionnaires d événements. Listing 4.5 : Gestionnaires d événements du cycle de vie d un fragment package com.paad.fragments; import android.app.activity; import android.app.fragment; import android.os.bundle; import android.view.layoutinflater; import android.view.view; import android.view.viewgroup; public class MySkeletonFragment extends Fragment { // Appelée lorsque le fragment est attaché à son activité parente. @Override public void onattach(activity activity) { super.onattach(activity); // Récupération d une référence à l activité parente. // Appelée pour la création initiale du fragment. @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // Initialisation du fragment. // Appelée lorsque le fragment a été créé, afin qu il crée son interface // utilisateur. @Override

Chapitre 4 Créer des interfaces utilisateur 123 public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { // Création ou désérialisation, plus renvoi de l interface du fragment // Renvoie null si le fragment n a pas d interface. return inflater.inflate(r.layout.my_fragment, container, false); // Appelée lorsque les interfaces de l activité parente et du fragment // ont été créées. @Override public void onactivitycreated(bundle savedinstancestate) super.onactivitycreated(savedinstancestate); // Terminer l initialisation du fragment notamment tout ce qui // a besoin que l activité parente ait été initialisée ou que // la vue du fragment soit totalement désérialisée. // Appelée au début de l état visible. @Override public void onstart(){ super.onstart(); // Appliquer les modifications d interface nécessaires maintenant // que le fragment est visible. // Appelée au début de l état actif. @Override public void onresume(){ super.onresume(); // Reprendre les mises à jour de l interface, les threads ou les // processus suspendus, requis par le fragment mais suspendus // lorsqu il est devenu inactif. // Appelée à la fin de l état actif. @Override public void onpause(){ // Suspendre les mises à jour de l interface, les threads ou // les processus gourmands en CPU qui n ont pas besoin d être modifés // lorsque l activité n est pas l activité active de premier plan. // Sauvegarder toutes les modifications ou les changements d état, // car le processus risque d être tué après cet appel. super.onpause(); // Appelée pour sauvegarder les changements d état de l interface // à la fin de l état actif. @Override public void onsaveinstancestate(bundle savedinstancestate) { // Sauvegarder les changements d état de l interface dans // savedinstancestate. Ce bundle sera passé à oncreate, oncreateview // et oncreateview si l activité parente est tuée et relancée. super.onsaveinstancestate(savedinstancestate); // Appelée à la fin de l état visible.

124 Android 4 @Override public void onstop(){ // Suspendre les mises à jour restantes de l interface, les // threads et les processus qui ne sont pas nécessaires lorsque le // fragment n est pas visible. super.onstop(); // Appelée lorsque la vue du fragment a été détachée. @Override public void ondestroyview() { // Nettoyage des ressources liées à la vue. super.ondestroyview(); // Appelée à la fin du cycle de vie complet. @Override public void ondestroy(){ // Nettoyage de toutes les ressources et fin des threads, // fermeture des connexions aux bases de données, etc. super.ondestroy(); // Appelée lorsque le fragment a été détaché de son activité parente. @Override public void ondetach() { super.ondetach(); Événements du cycle de vie spécifiques aux fragments La plupart des événements du cycle de vie des fragments correspondent à leurs équivalents pour la classe Activity, qui ont été présentés en détail au Chapitre 3. Les autres sont spécifiques aux fragments et à la façon dont ils sont insérés dans leur activité parente. Attachement d un fragment à son activité parente et détachement de celle-ci Le cycle de vie complet d un fragment commence lorsqu il est lié à son activité parente et se termine lorsqu il s en détache. Ces événements sont représentés, respectivement, par les appels à onattach et ondetach. Comme tout gestionnaire invoqué après qu un fragment ou une activité passe en pause, il est possible que ondetach ne soit pas appelé si le processus de l activité parente se termine sans finir son cycle de vie complet. L événement onattach est déclenché avant la création de l interface utilisateur du fragment, avant que le fragment lui-même ou son activité parente n aient terminé leur initialisation. Généralement, il sert à obtenir une référence à l activité parente en préparation des futures tâches d initialisation.

Chapitre 4 Créer des interfaces utilisateur 125 Création et suppression d un fragment Un fragment est dans l état "créé" entre le premier appel à oncreate et l appel final à ondestroy. Comme il est assez fréquent que le processus d une activité se termine sans appel à la méthode ondestroy correspondante, un fragment ne peut pas se fier au déclenchement de son gestionnaire ondestroy. Comme pour les activités, vous devez utiliser oncreate pour initialiser votre fragment. Il est conseillé d y créer tous les objets ayant la classe pour portée afin de s assurer qu ils ne seront créés qu une seule fois au cours de la vie du fragment. Info À la différence des activités, l interface utilisateur d un fragment n est pas initialisée dans oncreate. Création et suppression des interfaces utilisateur L interface utilisateur d un fragment est initialisée (et supprimée) par, respectivement, un appel à oncreateview et un appel à ondestroyview. Utilisez oncreateview pour initialiser le fragment : désérialisez l interface, récupérez les références aux vues qu elle contient (et liez-leur des données), puis créez les services et timers nécessaires. Renvoyez la hiérarchie de vues une fois qu elle a été désérialisée : return inflater.inflate(r.layout.my_fragment, container, false); Si votre fragment doit interagir avec l interface utilisateur de son activité parente, attendez le déclenchement de l événement onactivitycreated, qui signifie que l activité conteneur a terminé son initialisation et que son interface est totalement construite. États d un fragment Le sort d un fragment est inextricablement lié à celui de l activité à laquelle il appartient. En conséquence, les transitions d état d un fragment sont intimement liées aux transitions d état de l activité correspondante. Comme les activités, les fragments sont actifs lorsqu ils appartiennent à une activité qui a le focus et qui est au premier plan. Lorsqu une activité est mise en pause ou stoppée, les fragments qu elle contient sont également mis en pause et stoppés ; les fragments contenus par une activité inactive sont eux aussi inactifs. Lorsqu une activité est finalement détruite, tous les fragments qu elle contient le sont également. Le gestionnaire mémoire d Android fermant les applications de façon non déterministe lorsqu il a besoin de libérer des ressources, les fragments de ces activités sont également détruits.

126 Android 4 Bien que fragments et activités soient fortement liés, l un des avantages d utiliser des fragments pour composer l interface utilisateur de votre application est que vous pouvez ajouter dynamiquement des fragments à une activité active, ou en supprimer. Chaque fragment peut donc progresser plusieurs fois dans son cycle de vie complet, visible et actif, au cours de la vie de son activité parente. Quel que soit le déclencheur d une transition d un fragment au cours de son cycle de vie, il est essentiel de gérer ses transitions d état pour assurer le meilleur confort possible à l utilisateur. On ne devrait ressentir aucune différence lorsqu un fragment passe de l état en pause, stoppé ou inactif à l état actif et il est donc important de sauvegarder l état de l interface et toutes les données lorsqu un fragment est mis en pause ou stoppé. Comme une activité, un fragment doit restaurer cet état sauvegardé lorsqu il redevient actif. Introduction au gestionnaire de fragments Chaque activité contient un gestionnaire de fragments pour gérer les fragments qu elle contient. Vous pouvez y accéder à l aide de la méthode getfragmentmanager : FragmentManager fragmentmanager = getfragmentmanager(); Le gestionnaire de fragments fournit des méthodes pour accéder aux fragments ajoutés à l activité et pour effectuer les transactions permettant d ajouter, supprimer et remplacer des fragments. Ajouter des fragments aux activités Le meilleur moyen d ajouter un fragment à une activité consiste à l inclure dans le layout de l activité à l aide de la balise fragment, comme dans le Listing 4.6. Listing 4.6 : Ajout de fragments à une activité à l aide d un layout XML <?xml version= 1.0 encoding= utf-8?> <LinearLayout xmlns:android= http://schemas.android.com/apk/res/android android:orientation= horizontal android:layout_height= match_parent > <fragment android:name= com.paad.weatherstation.mylistfragment android:id= @+id/my_list_fragment android:layout_height= match_parent android:layout_weight= 1 <fragment android:name= com.paad.weatherstation.detailsfragment android:id= @+id/details_fragment android:layout_height= match_parent android:layout_weight= 3 </LinearLayout>