Lire un extrait ( PDF 653 Ko)

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’appa-
reils 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 supercielle, 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
Livre ANDROID4.indb 101 03/08/12 07:26
© 2012 Pearson France – Android 4 – Reto Meier

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 efca-
cement 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
an 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
afcher des données et interagir avec vos utilisateurs. Enn, 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 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:
 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 lles. L’extension de la classe
ViewGroup permet
de créer des contrôles composites constitués de vues lles 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 afchés. Elles sont les équivalents Android des Forms
Livre ANDROID4.indb 102 03/08/12 07:26
© 2012 Pearson France – Android 4 – Reto Meier

Créer des interfaces utilisateur 103
Chapitre 4
de Windows. Pour afcher 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 modier 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éra-
lement 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 lles, 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 à afcher. Les écrans vides n’étant pas particulièrement
attirants, vous utiliserez presque toujours setContentView pour affecter une interface
à une activité lorsque vous redénirez son gestionnaire
onCreate .
La méthode
setContentView prend en paramètre soit un identiant de ressource
layout, soit une simple instance de
View . Cela vous permet de dénir 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 modier la présentation sans toucher
Livre ANDROID4.indb 103 03/08/12 07:26
© 2012 Pearson France – Android 4 – Reto Meier

104 Android 4
au code. Cela permet de préciser différents layouts optimisés pour des congurations
matérielles différentes, voire de les modier à 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énie 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 lles 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 exten-
sions de la classe ViewGroup utilisées pour placer des vues lles 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 modier
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 lle dans le coin supérieur gauche (mais vous pouvez changer cette
Livre ANDROID4.indb 104 03/08/12 07:26
© 2012 Pearson France – Android 4 – Reto Meier

Créer des interfaces utilisateur 105
Chapitre 4
position par défaut à l’aide de l’attribut gravity ). Ajouter plusieurs lles les
empile les unes sur les autres, chaque nouvelle vue dissimulant la précédente.
LinearLayout . Aligne chaque vue lle 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 lle à l’aide de l’attribut weight, an 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énir les
positions de chaque vue lle 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 nes lignes pour disposer les vues dans une suite de lignes
et de colonnes. Il est extrêmement souple et permet de beaucoup simplier 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énir 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">
Livre ANDROID4.indb 105 03/08/12 07:26
© 2012 Pearson France – Android 4 – Reto Meier