Développer une UI avec des vues

L'éditeur de mise en page vous permet de créer rapidement des mises en page basées sur View en faisant glisser des éléments d'interface utilisateur dans un éditeur de conception visuelle au lieu d'écrire du code XML de mise en page. L'éditeur de conception peut prévisualiser votre mise en page sur différents appareils et versions Android. Vous pouvez également la redimensionner de façon dynamique pour vous assurer qu'elle fonctionne correctement sur différentes tailles d'écran.

L'éditeur de mise en page est particulièrement performant lorsque vous créez une mise en page avec ConstraintLayout.

Cette page présente l'éditeur de mise en page. Pour en savoir plus sur les principes de base de l'éditeur de mise en page, consultez Mises en page.

Présentation de l'éditeur de mise en page

L'éditeur de mise en page s'affiche lorsque vous ouvrez un fichier de mise en page XML.

1. Palette: contient différentes vues et groupes de vues que vous pouvez faire glisser dans votre mise en page.
2. Component Tree (Arborescence des composants) : affiche la hiérarchie des composants dans votre mise en page.
3. Toolbar (Barre d'outils) : contient des boutons qui configurent l'apparence de votre mise en page dans l'éditeur et modifient les attributs de mise en page.
4. Design editor (Éditeur de conception) : permet de modifier votre mise en page dans la vue Conception, la vue Plan ou les deux.
5. Attributes (Attributs) : permet de contrôler les attributs de la vue sélectionnée.
6. View mode (Mode d'affichage) : permet d'afficher votre mise en page en mode Code , Split (Diviser) ou Design (Conception) . Le mode Split (Divisé) affiche les fenêtres Code et Design en même temps.
7. Zoom and pan controls (Commandes de zoom et de panoramique) : contrôlez la taille et la position de l'aperçu dans l'éditeur.

Lorsque vous ouvrez un fichier de mise en page XML, l'éditeur de mise en page s'ouvre par défaut, comme l'illustre la figure 1. Pour modifier le fichier XML de mise en page dans l'éditeur de texte, cliquez sur le bouton Code en haut à droite de la fenêtre. Notez que les panneaux Palette, Component Tree (Arborescence des composants) et Attributes (Attributs) ne sont pas disponibles lorsque vous modifiez votre mise en page dans la vue Code.

Conseil:Pour basculer entre les éditeurs de conception et de texte, appuyez sur Alt (Control sur macOS) + Shift et sur la flèche vers la droite ou vers la gauche.

Modifier l'apparence de l'aperçu

Les boutons de la ligne supérieure de l'éditeur de conception vous permettent de configurer l'apparence de votre mise en page dans l'éditeur.

1. Design and Blueprint (Conception et plan) : sélectionnez la manière dont vous souhaitez afficher votre mise en page dans l'éditeur. Vous pouvez également appuyer sur B pour parcourir ces types de vues.
   • Sélectionnez Design (Conception) pour afficher un aperçu de votre mise en page.
   • Sélectionnez Plan pour n'afficher que les contours de chaque vue.
   • Sélectionnez Design + Blueprint (Conception + Plan) pour afficher les deux vues côte à côte.
2. Orientation de l'écran et variantes de mise en page: choisissez l'orientation paysage ou portrait de l'écran, ou choisissez d'autres modes d'écran pour lesquels votre application propose d'autres mises en page, comme le mode Nuit. Ce menu contient également des commandes permettant de créer une variante de mise en page, comme décrit dans une section de cette page. Vous pouvez également appuyer sur la lettre O de votre clavier pour changer l'orientation.

3. Mode UI du système: si vous avez activé la couleur dynamique dans votre application, changez de fond d'écran et observez la façon dont vos mises en page réagissent au fond d'écran choisi par les utilisateurs. Notez que vous devez d'abord remplacer le thème par un thème de couleurs dynamiques Material, puis changer le fond d'écran.

4. Device type and size (Type et taille de l'appareil) : sélectionnez le type d'appareil (téléphone/tablette, Android TV ou Wear OS) et la configuration d'écran (taille et densité). Vous pouvez choisir parmi plusieurs types d'appareils préconfigurés et vos propres définitions AVD. Vous pouvez également créer un AVD en sélectionnant Add Device Definition (Ajouter une définition d'appareil) dans la liste, comme illustré dans la figure 3.

   • Pour redimensionner l'appareil, faites glisser l'angle inférieur droit de la mise en page.
   • Appuyez sur D pour parcourir la liste des appareils.

   Tester votre mise en page par rapport aux appareils de référence de ce menu permet à votre application de s'adapter aux états de mise en page sur des appareils réels.

   

5. API version (Version d'API) : sélectionnez la version d'Android pour prévisualiser votre mise en page. La liste des versions d'Android disponibles dépend des versions de la plate-forme SDK que vous avez installées à l'aide de SDK Manager.

6. App theme (Thème de l'application) : sélectionnez le thème de l'interface utilisateur à appliquer à l'aperçu. Cela ne fonctionne que pour les styles de mise en page compatibles. De nombreux thèmes de cette liste génèrent donc une erreur.

7. Language (Langue) : sélectionnez la langue à afficher pour vos chaînes d'interface utilisateur. Cette liste n'affiche que les langues disponibles dans vos ressources de chaîne. Si vous souhaitez modifier vos traductions, cliquez sur Edit Translations (Modifier les traductions) dans le menu. Pour en savoir plus sur l'utilisation des traductions, consultez Localiser l'interface utilisateur avec Translations Editor.

Créer une nouvelle mise en page

Lorsque vous ajoutez une nouvelle mise en page pour votre application, commencez par créer un fichier de mise en page par défaut dans le répertoire layout/ par défaut de votre projet afin de l'appliquer à toutes les configurations d'appareils. Une fois que vous disposez d'une mise en page par défaut, vous pouvez créer des variantes de mise en page, comme décrit dans une section de cette page, pour des configurations d'appareil spécifiques, telles que les grands écrans.

Vous pouvez créer une nouvelle mise en page de l'une des manières suivantes :

À l'aide du menu principal d'Android Studio

1. Dans la fenêtre Project (Projet), cliquez sur le module auquel vous souhaitez ajouter une mise en page.
2. Dans le menu principal, sélectionnez File > New > XML > Layout XML File (Fichier > Nouveau > XML > Fichier XML de mise en page).
3. Dans la boîte de dialogue qui s'affiche, indiquez le nom de fichier, la balise de mise en page racine et l'ensemble de sources auquel la mise en page appartient.
4. Cliquez sur Finish (Terminer) pour créer la mise en page.

À l'aide de la vue Project (Projet)

1. Dans la fenêtre Project (Projet), sélectionnez la vue Project (Projet).
2. Effectuez un clic droit sur le répertoire de mise en page dans lequel vous souhaitez ajouter la mise en page.
3. Dans le menu contextuel qui s'affiche, cliquez sur New > Layout Resource File (Nouveau > Fichier de ressources de mise en page).

À l'aide de la vue Android

1. Dans la fenêtre Project (Projet), sélectionnez la vue Android.
2. Faites un clic droit sur le dossier layout.
3. Dans le menu contextuel qui s'affiche, sélectionnez New > Layout Resource File (Nouveau > Fichier de ressources de mise en page).

À l'aide du gestionnaire de ressources

1. Dans Resource Manager (Gestionnaire de ressources), sélectionnez l'onglet Layout (Mise en page).
2. Cliquez sur le bouton +, puis sur Layout Resource File (Fichier de ressources de mise en page).

Utiliser des variantes de mise en page afin d'optimiser la mise en page pour différents écrans

Une variante de mise en page est une version alternative d'une mise en page existante, optimisée pour une certaine taille ou orientation d'écran.

Utiliser une variante de mise en page recommandée

Android Studio propose des variantes de mise en page courantes que vous pouvez utiliser dans votre projet. Pour utiliser une variante de mise en page recommandée, procédez comme suit :

1. Ouvrez votre fichier de mise en page par défaut.
2. Cliquez sur l'icône Design (Conception) en haut à droite de la fenêtre.
3. Le nom du fichier de mise en page apparaît dans la liste déroulante Action to switch and create qualifiers for layout files (Action pour basculer et créer des qualificatifs pour les fichiers de mise en page). Sélectionnez le menu déroulant.
4. Dans la liste déroulante, sélectionnez une variante telle que Create Landscape Qualifier (Créer un qualificatif en mode paysage) ou Create Tablet Qualifier (Créer un qualificatif pour tablette).

   

Un répertoire de mise en page est créé.

Créer votre propre variante de mise en page

Si vous souhaitez créer votre propre variante de mise en page, procédez comme suit :

1. Ouvrez votre fichier de mise en page par défaut.
2. Cliquez sur l'icône Design (Conception) en haut à droite de la fenêtre.
3. Le nom du fichier de mise en page apparaît dans la liste déroulante Action to switch and create qualifiers for layout files (Action pour basculer et créer des qualificatifs pour les fichiers de mise en page). Sélectionnez le menu déroulant.

4. Dans la liste déroulante, sélectionnez Add Resource Qualifier (Ajouter un qualificateur de ressource). (voir la figure 4 ci-dessus).

   La boîte de dialogue Select Resource Directory (Sélectionner un répertoire de ressources) s'affiche.

5. Dans la boîte de dialogue Select Resource Directory (Sélectionner un répertoire de ressources), définissez les qualificatifs de ressources pour la variante:

   1. Sélectionnez un qualificatif dans la liste Qualificatifs disponibles.
   2. Cliquez sur le bouton Add (Ajouter) .
   3. Saisissez les valeurs requises.
   4. Répétez ces étapes pour ajouter d'autres qualificatifs.

6. Une fois que vous avez ajouté tous les qualificateurs, cliquez sur OK.

Lorsque vous disposez de plusieurs variantes de la même mise en page, vous pouvez passer de l'une à l'autre en sélectionnant une variante dans le menu déroulant Action to switch and create qualifiers for layout files (Action de basculer et créer des qualificatifs pour les fichiers de mise en page).

Pour en savoir plus sur la création de mises en page pour différents écrans, consultez Assurer la compatibilité avec différentes tailles d'écran.

Convertir une vue ou une mise en page

Vous pouvez convertir une vue ou une mise en page vers un autre type de mise en page:

1. Cliquez sur le bouton Design (Conception) en haut à droite de la fenêtre de l'éditeur.
2. Dans l'arborescence des composants, effectuez un clic droit sur la vue ou la mise en page, puis cliquez sur Convert view (Convertir la vue).
3. Dans la boîte de dialogue qui s'affiche, choisissez le nouveau type de vue ou de mise en page, puis cliquez sur Apply (Appliquer).

Convertir une mise en page vers ConstraintLayout

Pour améliorer les performances de mise en page, convertissez les anciennes mises en page au format ConstraintLayout. ConstraintLayout utilise un système de mise en page basé sur des contraintes qui vous permet de créer la plupart des mises en page sans groupe de vues imbriqué.

Pour convertir une mise en page existante avec ConstraintLayout, procédez comme suit :

1. Ouvrez une mise en page existante dans Android Studio.
2. Cliquez sur l'icône Design (Conception) en haut à droite de la fenêtre de l'éditeur.
3. Dans l'arborescence des composants, effectuez un clic droit sur la mise en page, puis cliquez sur Convert your-layout-type to ConstraintLayout (Convertir en ConstraintLayout).

Pour en savoir plus sur ConstraintLayout, consultez Créer une interface utilisateur responsive avec ConstraintLayout.

Rechercher des éléments dans la palette

Pour rechercher une vue ou un groupe de vues par nom dans la palette, cliquez sur le bouton Search (Rechercher) en haut de la palette. Vous pouvez également saisir le nom de l'élément chaque fois que la fenêtre Palette est active.

Dans la palette, vous trouverez des éléments fréquemment utilisés dans la catégorie Common. Pour ajouter un élément à cette catégorie, effectuez un clic droit sur une vue ou un groupe de vues dans la palette, puis cliquez sur Favorite (Favori) dans le menu contextuel.

Ouvrir des documents depuis la palette

Pour ouvrir la documentation de référence des développeurs Android pour une vue ou un groupe de vues, sélectionnez l'élément d'interface utilisateur dans la palette et appuyez sur Shift+F1.

Pour afficher les instructions de Material Design pour une vue ou un groupe de vues, effectuez un clic droit sur l'élément d'interface utilisateur dans la palette, puis sélectionnez Material Guidelines (Instructions de Material Design) dans le menu contextuel. S'il n'existe aucune entrée spécifique pour cet élément, la commande ouvre la page d'accueil de la documentation Material Design.

Ajouter des vues à votre mise en page

Pour commencer à créer votre mise en page, faites glisser les vues et les groupes de vues de la palette vers l'éditeur de conception. Lorsque vous placez une vue dans la mise en page, l'éditeur affiche des informations sur son lien avec le reste de la mise en page.

Avec ConstraintLayout, vous pouvez créer automatiquement des contraintes à l'aide des fonctionnalités "Contrainte d'inférence" et "Connexion automatique".

Modifier les attributs de la vue

Vous pouvez modifier les attributs de la vue à partir du panneau Attributs de l'éditeur de mise en page. Cette fenêtre n'est disponible que lorsque l'éditeur de conception est ouvert. Vous pouvez donc afficher votre mise en page en mode Design (Conception) ou Split (Diviser) pour l'utiliser.

Lorsque vous sélectionnez une vue, que ce soit en cliquant dessus dans l'arborescence des composants ou dans l'éditeur de conception, le panneau Attributes (Attributs) affiche les éléments suivants, comme illustré dans la figure 5:

1. Declared Attributes (Attributs déclarés) : répertorie les attributs spécifiés dans le fichier de mise en page. Pour ajouter un attribut, cliquez sur le bouton Add (Ajouter) en haut de la section.
2. Layout (Mise en page) : contient des commandes pour la largeur et la hauteur de la vue. Si la vue se trouve dans un ConstraintLayout, cette section affiche également les préférences de contrainte ainsi que les contraintes qu'elle utilise. Pour en savoir plus sur le contrôle de la taille des vues avec ConstraintLayout, consultez Ajuster la taille des vues.
3. Common Attributes (Attributs courants) : répertorie les attributs courants de la vue sélectionnée. Pour afficher tous les attributs disponibles, développez la section All Attributes (Tous les attributs) en bas de la fenêtre.
4. Rechercher: permet de rechercher un attribut de vue spécifique.

5. Les icônes à droite de chaque valeur d'attribut indiquent si les valeurs d'attribut sont des références de ressources. Ces indicateurs sont pleins lorsque la valeur est une référence de ressource et vides lorsque la valeur est codée en dur pour vous aider à reconnaître les valeurs codées en dur en un coup d'œil.

   Cliquez sur les indicateurs dans l'un ou l'autre des états pour ouvrir la boîte de dialogue Resources (Ressources), dans laquelle vous pouvez sélectionner une référence de ressource pour l'attribut correspondant.

6. Une valeur d'attribut en surbrillance rouge indique une erreur de valeur. Par exemple, une erreur peut indiquer une entrée non valide pour un attribut de mise en page.

   Une valeur en surbrillance orange indique un avertissement. Par exemple, un avertissement peut s'afficher lorsque vous utilisez une valeur codée en dur alors qu'une référence de ressource est attendue.

Ajouter des échantillons de données à votre vue

Étant donné que de nombreuses mises en page Android reposent sur des données d'exécution, il peut être difficile de visualiser l'apparence d'une mise en page lors de la conception de votre application. Vous pouvez ajouter des exemples de données d'aperçu à un élément TextView, ImageView ou RecyclerView à partir de l'éditeur de mise en page.

Pour afficher la fenêtre Attributs de la vue au moment de la mise en page, effectuez un clic droit sur l'un de ces types de vues et choisissez Set Sample Data (Définir un échantillon de données), comme illustré dans la figure 6.

Pour TextView, vous pouvez choisir parmi différentes catégories d'échantillons de texte. Lorsque vous utilisez un échantillon de texte, Android Studio remplit l'attribut text de TextView avec les échantillons de données de votre choix. Notez que vous ne pouvez choisir un échantillon de texte via la fenêtre des attributs de la vue au moment de la mise en page que si l'attribut text est vide.

Pour ImageView, vous pouvez choisir parmi différents exemples d'images. Lorsque vous choisissez un exemple d'image, Android Studio insère l'attribut tools:src de ImageView (ou tools:srcCompat si vous utilisez AndroidX).

Pour RecyclerView, vous pouvez choisir parmi un ensemble de modèles contenant des exemples d'images et de textes. Lorsque vous utilisez ces modèles, Android Studio ajoute un fichier à votre répertoire res/layout, recycler_view_item.xml, qui contient la mise en page des échantillons de données. Android Studio ajoute également des métadonnées à la vue RecyclerView pour afficher correctement les échantillons de données.

Afficher les avertissements et les erreurs de mise en page

L'éditeur de mise en page vous signale tout problème de mise en page à côté de la vue correspondante dans l'arborescence des composants en utilisant une icône de cercle rouge avec point d'exclamation pour les erreurs ou une icône de triangle orange avec point d'exclamation pour les avertissements. Cliquez sur l'icône pour en savoir plus.

Pour afficher tous les problèmes connus dans une fenêtre sous l'éditeur, cliquez sur Afficher les avertissements et les erreurs ( ou ). dans la barre d'outils.

Télécharger des polices et les appliquer au texte

Lorsque vous utilisez Android 8.0 (niveau d'API 26) ou la bibliothèque Jetpack Core, vous pouvez choisir parmi des centaines de polices en procédant comme suit:

1. Dans l'éditeur de mise en page, cliquez sur l'icône Design (Conception) pour afficher votre mise en page dans l'éditeur de mise en page.
2. Sélectionnez un affichage de texte.
3. Dans le panneau Attributes (Attributs), développez textAppearance, puis développez la zone fontFamily.
4. Faites défiler la liste jusqu'en bas, puis cliquez sur More Fonts (Autres polices) pour ouvrir la boîte de dialogue Resources.
5. Dans la boîte de dialogue Resources (Ressources), pour sélectionner une police, parcourez la liste ou saisissez du texte dans la barre de recherche en haut de l'écran. Si vous sélectionnez une police sous Downloadable (Téléchargée), vous pouvez cliquer sur Create téléchargeable font (Créer une police téléchargeable) pour charger la police au moment de l'exécution en tant que police téléchargeable. Vous pouvez aussi cliquer sur Add font to project (Ajouter une police au projet) pour empaqueter le fichier de police TTF dans votre APK. Les polices répertoriées sous Android sont fournies par le système Android. Vous n'avez donc pas besoin de les télécharger ni de les regrouper dans votre APK.
6. Cliquez sur OK pour terminer.

Validation de mise en page

La validation de mise en page est un outil visuel qui permet de prévisualiser simultanément des mises en page pour différents appareils et configurations d'affichage. Vous pouvez ainsi détecter les problèmes liés à vos mises en page plus tôt dans le processus. Pour accéder à cette fonctionnalité, cliquez sur l'onglet Layout Validation (Validation de la mise en page) en haut à droite de la fenêtre de l'IDE:

Figure 10 : Onglet "Layout Validation" (Validation de la mise en page).

Pour basculer entre les ensembles de configuration disponibles, sélectionnez l'une des options suivantes dans la liste déroulante Reference Devices (Appareils de référence) en haut de la fenêtre de validation de mise en page:

• Appareils de référence
• Personnalisé
• Daltonien
• Tailles de police

Figure 11 : Liste déroulante "Reference Devices" (Appareils de référence).

Appareils de référence

Les appareils de référence correspondent à un ensemble d'appareils que nous vous recommandons de tester. Elles incluent les interfaces pour téléphone, appareil pliable, pour tablette et pour ordinateur. Vous devriez prévisualiser votre mise en page sur cet ensemble d'appareils de référence :

Figure 12. Aperçus des appareils de référence dans l'outil de validation de mise en page.

Personnalisé

Pour personnaliser la configuration d'affichage à prévisualiser, faites votre choix parmi divers paramètres, avec par exemple la langue, l'appareil ou l'orientation de l'écran :

Figure 16 : Configuration d'un affichage personnalisé dans l'outil de validation de mise en page.

Daltonien

Pour rendre votre application plus accessible aux utilisateurs daltoniens, validez votre mise en page à l'aide de simulations de daltonisme courants :

Figure 13 : Aperçus de simulations de daltonisme sont proposées dans l'outil de validation de mise en page.

Tailles de police

Validez vos mises en page sur différentes tailles de police et améliorez l'accessibilité de votre application pour les utilisateurs malvoyants en testant des mises en page avec des polices plus grandes :

Figure 14 : Aperçus de taille de police variable dans l'outil de validation de mise en page.