Optimiser les hiérarchies de mise en page

Essayer Compose

Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser les mises en page dans Compose.

Outil d'inspection de la mise en page dans Compose →

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.

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.

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:

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 une ImageView et une TextView 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:

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.