Il est courant de croire à tort que l'utilisation des structures de mise en page de base permet d'obtenir les mises en page les plus efficaces. Cependant, chaque widget et mise en page que vous ajoutez à votre application nécessite une initialisation, une mise en page et un dessin. Par exemple, l'utilisation d'instances imbriquées de LinearLayout
peut entraîner une hiérarchie des vues excessivement profonde. De plus, l'imbrication de plusieurs instances de LinearLayout
qui utilisent le paramètre layout_weight
peut s'avérer particulièrement coûteuse, car chaque enfant doit être mesuré deux fois.
Cela est particulièrement important lorsque la mise en page est gonflée à plusieurs reprises, par exemple lorsqu'elle est utilisée dans un RecyclerView
.
Ce document explique comment utiliser l'outil d'inspection de la mise en page et lint pour examiner et optimiser votre mise en page.
Inspecter la mise en page
Les outils Android SDK incluent l'outil d'inspection de la mise en page, qui vous permet d'analyser votre mise en page pendant l'exécution de votre application. Cet outil vous permet de découvrir les inefficacités dans les performances de mise en page.
L'outil d'inspection de la mise en page vous permet de sélectionner les processus en cours d'exécution sur un appareil connecté ou un émulateur, puis d'afficher l'arborescence de mise en page. Les feux de signalisation de chaque bloc représentent ses performances de mesure, de mise en page et de dessin, ce qui vous permet d'identifier les problèmes potentiels.
Par exemple, la figure 1 illustre une mise en page utilisée en tant qu'élément dans un élément RecyclerView
. Cette mise en page affiche une petite image bitmap à gauche et deux éléments de texte empilés à droite. Il est particulièrement important d'optimiser les mises en page comme celle-ci, qui sont gonflées plusieurs fois, car les avantages en termes de performances sont multipliés.
![Image montrant un seul élément dans une liste: une image et deux textes alignés verticalement](https://developer.android.com/static/images/training/layout-listitem.png?authuser=5&hl=fr)
RecyclerView
.
L'outil d'inspection de la mise en page affiche la liste des appareils disponibles et de leurs composants en cours d'exécution. Choisissez votre composant dans l'onglet Windows (Fenêtres), puis cliquez sur Layout Inspector (Outil d'inspection de la mise en page) pour afficher la hiérarchie de mise en page du composant sélectionné. Par exemple, la figure 2 illustre la mise en page de l'élément de liste illustré par la figure 1.
![Image montrant l'outil d'inspection de la mise en page et la composition LinearLayout](https://developer.android.com/static/images/training/hierarchy-linearlayout.png?authuser=5&hl=fr)
LinearLayout
.
Modifier votre mise en page
Étant donné que les performances de mise en page précédentes ralentissent en raison d'un élément LinearLayout
imbriqué, vous pouvez les améliorer en aplatissant la mise en page. En d'autres termes, la mise en page est superficielle et large, plutôt que étroite et profonde. Un ConstraintLayout
comme nœud racine autorise ces mises en page. Lorsque vous convertissez cette conception pour utiliser ConstraintLayout
, la mise en page devient une hiérarchie à deux niveaux:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/root" android:layout_width="match_parent" android:layout_height="52dp" android:background="#e4e6e4" android:padding="4dp"> <ImageView android:id="@+id/image" android:layout_width="48dp" android:layout_height="48dp" android:background="#5c5c74" android:contentDescription="An example box" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/title" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginStart="4dp" android:background="#745c74" app:layout_constraintBottom_toTopOf="@+id/subtitle" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@id/image" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/subtitle" android:layout_width="0dp" android:layout_height="0dp" android:background="#7e8d6e" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="@id/title" app:layout_constraintTop_toBottomOf="@+id/title" /> </androidx.constraintlayout.widget.ConstraintLayout>
L'inspection de la nouvelle mise en page se présente comme suit:
![Image montrant l'outil d'inspection de la mise en page 3D](https://developer.android.com/static/images/training/layout_inspector.png?authuser=5&hl=fr)
Les avantages sont multipliés, car cette mise en page est utilisée pour chaque élément d'une liste.
La plupart de la différence est due à l'utilisation de layout_weight
dans la conception de LinearLayout
, ce qui peut ralentir les mesures. Voici un exemple des utilisations appropriées de chaque mise en page. Réfléchissez bien à la nécessité d'utiliser l'épaisseur de mise en page.
Dans certaines mises en page complexes, le système peut gaspiller des efforts pour mesurer le même élément d'interface utilisateur plusieurs fois. Ce phénomène est appelé double imposition. Pour en savoir plus sur la double imposition et pour savoir comment l'éviter, consultez la page Performances et hiérarchies des vues.
Utiliser lint
Il est recommandé d'exécuter l'outil lint sur vos fichiers de mise en page pour rechercher d'éventuelles optimisations de la hiérarchie des vues. Lint remplace l'outil layoutopt et offre de meilleures fonctionnalités. Voici des exemples de règles lint:
-
Utilisez des drawables composés. Vous pouvez gérer plus efficacement une
LinearLayout
contenant uneImageView
et uneTextView
en tant que drawable composé. -
Fusionner le cadre racine. Si la racine d'une mise en page est une
FrameLayout
qui ne fournit pas d'arrière-plan ni de marge intérieure, vous pouvez la remplacer par une balise de fusion, ce qui est légèrement plus efficace. - Retirez les feuilles inutiles. Vous pouvez supprimer une mise en page sans enfants ou sans arrière-plan (car elle est invisible), pour une hiérarchie de mise en page plus plate et plus efficace.
-
Supprimer les parents inutiles. Vous pouvez supprimer une mise en page avec un enfant qui n'a pas de frères et sœurs, qui n'est ni une
ScrollView
, ni une mise en page racine, et qui n'a pas d'arrière-plan. Vous pouvez également déplacer la vue enfant directement dans le parent pour une hiérarchie de mise en page plus plate et plus efficace. -
Évitez les mises en page de grande taille. Les mises en page comportant trop d'imbrications nuisent aux performances. Envisagez d'utiliser des mises en page plus plates, comme
ConstraintLayout
, pour améliorer les performances. La profondeur maximale par défaut pour les vérifications lint est de 10.
Un autre avantage de l'outil lint est son intégration dans Android Studio. Lint s'exécute automatiquement chaque fois que vous compilez votre programme. Avec Android Studio, vous pouvez également exécuter des inspections lint pour une variante de compilation spécifique ou pour toutes les variantes de compilation.
Vous pouvez également gérer les profils d'inspection et configurer les inspections dans Android Studio avec l'option File > Settings > Project Settings (Fichier > Paramètres > Paramètres du projet). La page "Configuration de l'inspection" s'affiche avec les inspections compatibles:
![Image montrant le menu "Inspections" d'Android Studio](https://developer.android.com/static/images/training/lint.png?authuser=5&hl=fr)
Lint peut résoudre automatiquement certains problèmes, fournir des suggestions pour d'autres et accéder directement au code incriminé pour examen.
Pour en savoir plus, consultez Mises en page et Ressource de mise en page.