Présentation des mises en page
Dans la plupart des cas, la construction de votre interface utilisateur inclura de nombreuses vues contenues dans une ou plusieurs mises en page imbriquées - extensions de la classe ViewGroup. En combinant différentes dispositions et vues, vous pouvez créer des interfaces utilisateur complexes.
Le SDK Android comprend un certain nombre de classes de mise en page. Vous allez les utiliser, les modifier ou créer les vôtres pour construire des dispositions d'interface utilisateur pour vos vues, fragments et activités. Votre défi, si vous décidez de l'accepter, consiste à trouver la bonne combinaison de dispositions pour rendre votre interface utilisateur esthétique, facile à utiliser et efficace à afficher.
La liste suivante inclut certaines des classes de mise en page les plus couramment utilisées disponibles dans le SDK Android.
- FrameLayout : le plus simple des gestionnaires de disposition, la disposition de cadre épingle chaque vue enfant dans son cadre. La position par défaut est le coin supérieur gauche, bien que vous puissiez utiliser l'attribut layout_gravity sur une vue enfant pour modifier son emplacement. L'ajout de plusieurs enfants empile chaque nouvel enfant par-dessus le précédent, chaque nouvelle vue masquant potentiellement les précédentes.
- LinearLayout : la disposition linéaire aligne ses vues enfant sur une ligne verticale ou horizontale. Une mise en page verticale a une colonne de vues, alors qu'une mise en page horizontale a une rangée de vues. La présentation linéaire prend en charge un attribut layout_weight pour chaque vue enfant qui peut contrôler la taille relative de chaque vue enfant dans l'espace disponible.
- RelativeLayout : l’une des mises en page natives les plus souples, bien que potentiellement coûteuse à rendre, la mise en page relative vous permet de définir les positions de chaque vue enfant par rapport aux autres et aux limites de la mise en forme.
- ConstraintLayout : la mise en page la plus récente (et recommandée), conçue pour prendre en charge de grandes
et des mises en page complexes sans avoir besoin d'imbriquer des mises en page. Elle est similaire à la disposition relative mais offre une plus grande flexibilité et une mise en forme plus efficace. La disposition des contraintes positionne ses vues enfant à travers une série de contraintes, exigeant que les vues enfant soient positionnées en fonction d'une limite, d'autres vues enfant ou de directives personnalisées. La disposition de contrainte possède son propre éditeur de disposition visuelle, utilisé pour positionner chaque contrôle et définir les contraintes plutôt que de se fier à la modification manuelle du code XML. La mise en forme de contrainte est disponible via le package Mise en forme de contrainte de la bibliothèque de support Android, ce qui la rend compatible avec les versions antérieures.
Chacune de ces dispositions peut être redimensionnée afin de remplir la taille de l'écran du périphérique hôte en évitant l'utilisation de positions absolues ou de valeurs de pixels prédéterminées. Cela les rend particulièrement utiles lors de la conception d'applications qui fonctionnent bien sur un ensemble divers de matériel Android.
Les présentations utilisent divers attributs attribués au nœud racine pour modifier la façon dont tous les nœuds enfants seront positionnés (comme l’attribut androïde: orientation de la présentation linéaire):
< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
[... Child Views ...]
< /LinearLayout >
Pour modifier la mesure et le positionnement de vues enfant spécifiques, vous utiliserez directement les attributs layout_ au sein des nœuds enfants. Ces attributs permettent d’indiquer au groupe de vues parent comment l’enfant doit être aménagé:
< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
<TextView
android:layout_width="match_parent" android:layout_height="wrap_content"/>
< /LinearLayout >
Les attributs layout_ les plus courants sont layout_width et layout_height (attributs obligatoires sur toutes les vues), mais la plupart des mises en page comportent des attributs de vue enfant personnalisés pour fournir la majorité des fonctionnalités spécifiques à la mise en page qu'ils fournissent.
La documentation Android décrit en détail les caractéristiques et les propriétés de chaque classe de présentation. aussi, plutôt que de répéter ces informations ici, je vous renvoie à developer.android.com/guide/topics/ ui / declaring-layout.html # CommonLayouts.
Remarque
Lorsque vous consultez la documentation sur les attributs de présentation, veillez à consulter la classe LayoutParams pour la présentation. Par exemple, si la disposition parent est un FrameLayout, la documentation sur son attribut layout_gravity se trouve dans la classe FrameLayout.LayoutParams.
Définir les mises en page
Le moyen préféré pour définir une présentation consiste à utiliser des ressources externes XML, soit en écrivant manuellement le code XML, soit en utilisant l'éditeur de présentation visuelle de Constraint Layout pour le créer à votre place.
Chaque XML de présentation doit contenir un seul élément racine, qui peut contenir autant de dispositions et de vues imbriquées que nécessaire pour construire une interface utilisateur arbitrairement complexe.
L'extrait suivant montre une disposition simple qui place un TextView au-dessus d'un contrôle EditText à l'aide d'un LinearLayout vertical qui couvre la hauteur et la largeur de l'écran complet: µ
< ?xml version="1.0" encoding="utf-8"? >
< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
<TextView
android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Enter Text Below" />
<EditText
android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Text Goes Here!" /> < /LinearLayout >
Pour chacun des éléments de présentation, les constantes wrap_content et match_parent sont utilisées plutôt que de spécifier une hauteur ou une largeur exacte en pixels (ou dp). Ces constantes, combinées à des mises en page à l'échelle (telles que la mise en page linéaire, la mise en page relative et la mise en page de contrainte) constituent la technique la plus simple et la plus puissante pour garantir que vos mises en page sont indépendantes de la taille et de la résolution de l'écran.
La constante wrap_content définit la taille d'une vue sur le minimum requis pour contenir le contenu affiché (telle que la hauteur requise pour afficher une chaîne de texte renvoyée à la ligne). La constante match_parent développe la vue pour correspondre à l'espace disponible dans la vue, le fragment ou l'activité parent.
Nous verrons plus loin dans ce chapitre comment ces constantes sont utilisées lors de la création de vos propres contrôles, ainsi que d'autres meilleures pratiques pour l'indépendance de résolution.
L'implémentation de présentations en XML dissocie la couche de présentation du code et de la logique métier du contrôleur View, Fragment and Activity. Il vous permet également de créer des variantes spécifiques à la configuration matérielle qui sont chargées de manière dynamique sans nécessiter de modifications de code.
Lorsque vous le souhaitez ou que vous le souhaitez, vous pouvez implémenter des dispositions dans du code. Lors de l'affectation de vues à des mises en forme dans le code, il est important d'appliquer LayoutParameters à l'aide de la méthode setLayoutParams, ou en les transmettant à l'appel addView:
LinearLayout ll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL);
TextView myTextView = new TextView(this); EditText myEditText = new EditText(this);
myTextView.setText("Enter Text Below"); myEditText.setText("Text Goes Here!");
int lHeight = LinearLayout.LayoutParams.MATCH_PARENT; int lWidth = LinearLayout.LayoutParams.WRAP_CONTENT;
ll.addView(myTextView, new LinearLayout.LayoutParams(lWidth, lHeight)); ll.addView(myEditText, new LinearLayout.LayoutParams(lWidth, lHeight)); setContentView(ll);