Créer une UI avec l'éditeur de mise en page

L'éditeur de mise en page vous permet de créer rapidement des mises en page en faisant glisser des éléments d'interface utilisateur dans un éditeur graphique au lieu d'écrire manuellement le code XML correspondant. L'éditeur graphique permet de prévisualiser votre mise en page sur différents appareils et versions Android en vous laissant la possibilité de 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, un gestionnaire de mise en page compatible avec Android version 2.3 (niveau 9 d'API) et ultérieures.

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.

Figure 1. L'éditeur de mise en page

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) : cliquez sur ces boutons pour configurer l'apparence de votre mise en page dans l'éditeur et modifier les attributs de mise en page.
4. Design editor (Éditeur de conception) : modifiez votre mise en page dans la vue Conception, la vue Plan ou les deux.
5. Attributes (Attributs) : contrôle des attributs de la vue sélectionnée.
6. View mode (Mode d'affichage) : affichez votre mise en page en mode Code , Design (Conception) ou Split (Partagé) . Le mode Split (Partagé) affiche à la fois les fenêtres Code et Design (Conception).
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 fenêtres Palette, Component Tree (Arborescence des composants) et Attributes (Attributs) ne sont pas disponibles lorsque vous modifiez votre mise en page en mode Code.

Conseil : Vous pouvez basculer entre les éditeurs de mise en page et de texte en appuyant sur Alt + Shift + Right/Left arrow (Control + Shift + Right/Left arrow sur Mac).

Modifier l'apparence de l'aperçu

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

Figure 2. Boutons de la barre d'outils de l'éditeur de mise en page qui configurent l'apparence de la mise en page

Les boutons disponibles, qui correspondent aux chiffres de la figure 2, sont les suivants :

1. Design and blueprint (Conception et plan) : sélectionnez la manière dont vous souhaitez afficher votre mise en page dans l'éditeur. Sélectionnez Design (Conception) pour afficher un aperçu de votre mise en page. Sélectionnez Blueprint (Plan) pour afficher uniquement les contours de chaque vue. Sélectionnez Design + Blueprint (Conception + Plan) pour afficher les deux vues côte à côte. Vous pouvez également appuyer sur B pour parcourir ces types de vues.
2. Screen orientation and layout variants (Orientation de l'écran et variantes de mise en page) : sélectionnez 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, telles que le mode Nuit. Ce menu contient également des commandes permettant de créer une variante de mise en page. Vous pouvez également appuyer sur O pour changer d'orientation.

3. 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. Vous pouvez redimensionner la taille de l'appareil en faisant glisser l'angle inférieur droit de la mise en page. Vous pouvez également appuyer sur D pour parcourir la liste des appareils. Testez votre mise en page sur ces appareils de référence pour vous assurer que votre application s'adapte bien aux états de mise en page sur des appareils réels.

   

   Figure 3. Menu de sélection de l'appareil avec des appareils de référence.

4. API version (Version d'API) : sélectionnez la version d'Android sur laquelle vous souhaitez prévisualiser votre mise en page.

5. App theme (Thème de l'application) : sélectionnez le thème de l'interface utilisateur à appliquer à l'aperçu. Notez que 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.

6. 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 déroulant. 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 la mise en page par défaut définie, vous pouvez créer des variantes de mise en page pour des configurations d'appareil spécifiques, telles que les écrans de grande taille.

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 dans lequel 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 du fichier, la balise de mise en page racine et l'ensemble de sources auquel la mise en page correspond.
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 le fichier de mise en page original et cliquez sur l'icône Design (Conception) en haut à droite de la fenêtre.
2. Cliquez sur Orientation for Preview (Orientation d'aperçu) dans la barre d'outils.
3. Dans la liste déroulante, sélectionnez une variante recommandée, par exemple Create Landscape Variant (Créer une variante en mode paysage).

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 original, puis cliquez sur l'icône Design (Conception) en haut à droite de la fenêtre.
2. Cliquez sur Orientation for Preview (Orientation d'aperçu) dans la barre d'outils.
3. Dans la liste déroulante, sélectionnez Create Other (Créer une autre).
4. Dans la boîte de dialogue qui s'affiche, définissez les qualificateurs de ressources de la variante. Sélectionnez un qualificateur dans la liste Available qualifiers (Qualificateurs disponibles), puis cliquez sur le bouton Add (Ajouter) . Répétez cette étape pour ajouter d'autres qualificateurs si nécessaire.
5. 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 cliquant sur Layout Variants (Variantes de mise en page) , puis en sélectionnant un résultat dans la liste qui s'affiche.

Pour en savoir plus sur la création de mises en page pour différents écrans, consultez 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 vue ou 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 avec ConstraintLayout. ConstraintLayout utilise un système de mise en page basé sur des contraintes qui vous permet de compiler 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, puis 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 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.

Vous pouvez trouver des éléments fréquemment utilisés dans la catégorie Common (Courant) de la palette. 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 les documents de référence d'Android Developers 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 simplement glisser les vues et les groupes de vues de la palette vers l'éditeur de mise en page. 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 de la fenêtre Attributes (Attributs), à droite de l'éditeur de mise en page. Cette fenêtre n'est disponible que lorsque l'éditeur de mise en page est ouvert. Assurez-vous donc d'utiliser le mode Design (Conception) ou le mode Split (Divisé) pour afficher votre mise en page.

Lorsque vous sélectionnez une vue, en cliquant dessus soit depuis l'arborescence des composants, soit depuis l'éditeur de mise en page, la fenêtre Attributes affiche les éléments suivants, comme illustré en figure 4 :

1. La section Declared Attributes (Attributs déclarés) indique les attributs spécifiés dans le fichier de mise en page. Pour ajouter un attribut, cliquez sur le bouton Add (Ajouter) en haut à droite de la section.
2. La section Layout (Mise en page) contient des commandes permettant de définir 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 l'utilisation de ConstraintLayout, consultez Build a Responsive UI with ConstraintLayout (Créer une interface utilisateur responsive avec ConstraintLayout).
3. La section Common Attributes (Attributs courants) liste 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. Cliquez sur le bouton Search (Rechercher) pour 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. Ces indicateurs vous permettent de reconnaître en un clin d'œil les valeurs codées en dur. 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. Une erreur peut indiquer une entrée non valide pour un attribut de mise en page, comme l'illustre la valeur en surbrillance rouge sur la figure 3.

   Une valeur en surbrillance orange indique un avertissement. Un avertissement peut s'afficher lorsque vous utilisez une valeur codée en dur plutôt que la référence de ressource attendue, par exemple.

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 en concevant votre application. Dans Android Studio version 3.2 et ultérieures, vous pouvez ajouter des échantillons de données d'aperçu à une vue TextView, ImageView ou RecyclerView à partir de l'éditeur de mise en page.

Vous pouvez effectuer un clic droit sur l'un de ces types de vue et choisir Set Sample Data (Définir un échantillon de données) pour afficher la fenêtre Design-time View Attributes (Attributs de la vue au moment de la mise en page), comme illustré sur la figure 5.

Figure 5. Fenêtre des attributs de la vue au moment de la mise en page

Dans une vue TextView, vous pouvez choisir entre 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.

Figure 6. TextView avec échantillons de données

Dans une vue ImageView, vous pouvez choisir parmi différents échantillons d'images. Lorsque vous choisissez un échantillon d'image, Android Studio insère l'attribut tools:src d'ImageView (ou tools:srcCompat si vous utilisez la bibliothèque Support).

Figure 7. ImageView avec échantillons de données

Dans une vue RecyclerView, vous pouvez choisir 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.

Figure 8. RecyclerView avec é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

Si vous utilisez Android 8.0 (niveau 26 d'API) ou Android Support Library version 26.0.0 ou ultérieure, vous pouvez choisir parmi des centaines de polices en procédant comme suit :

1. Dans l'éditeur de mise en page, cliquez sur le bouton Design (Concevoir) pour afficher votre mise en page dans l'éditeur de mise en page.
2. Cliquez sur une vue Texte.
3. Dans la fenêtre Attributes (Attributs), développez textApparence, puis développez la case 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), sélectionnez une police en parcourant la liste ou en saisissant le nom dans la barre de recherche en haut. Si vous sélectionnez une police sous Downloadable (Téléchargeable), vous pouvez cliquer sur Créer une police téléchargeable pour la charger lors de l'exécution en tant que police téléchargeable ou cliquez sur Ajouter une police au projet (Ajouter une police au projet) pour empaqueter le fichier de police TTF dans votre APK. Notez que les polices listé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.