Optimiser les hiérarchies de mise en page

Essayer Compose

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

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

On pense souvent à tort que l'utilisation des structures de mise en page de base permet d'obtenir les mises en page les plus efficaces. Toutefois, 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 de vues excessivement profonde. De plus, l'imbrication de plusieurs instances de LinearLayout qui utilisent le paramètre layout_weight peut être particulièrement coûteuse, car chaque enfant doit être mesuré deux fois. C'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 du SDK Android 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 aide à identifier les inefficacités dans les performances de la 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 la mise en page. Les feux tricolores de chaque bloc représentent ses performances de mesure, de mise en page et de dessin, ce qui vous aide à identifier les problèmes potentiels.

Par exemple, la figure 1 montre une mise en page utilisée comme élément dans un 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, 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 montre 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 LinearLayout imbriqué, vous pouvez améliorer les performances en aplatissant la mise en page, c'est-à-dire en la rendant peu profonde et large, plutôt que étroite et profonde. Un ConstraintLayout en tant que nœud racine permet de tels 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 de cette méthode sont multipliés, car cette mise en page est utilisée pour chaque élément d'une liste.

La majeure partie de la différence est due à l'utilisation de layout_weight dans la conception LinearLayout, ce qui peut ralentir la mesure. Voici un exemple d'utilisation appropriée pour chaque mise en page. Réfléchissez bien pour déterminer si l'utilisation de la pondération de la mise en page est nécessaire.

Dans certains cas, le système peut gaspiller des ressources en mesurant le même élément d'UI plusieurs fois. C'est ce qu'on appelle la double imposition. Pour en savoir plus sur la double imposition et comment l'éviter, consultez 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 davantage de fonctionnalités. Voici des exemples de règles lint :

• Utilisez des drawables composés. Vous pouvez gérer un LinearLayout contenant un ImageView et un TextView plus efficacement en tant que drawable composé.
• Fusionner le frame racine. Si la racine d'une mise en page est un FrameLayout qui ne fournit pas d'arrière-plan ni de marge intérieure, vous pouvez le remplacer par une balise de fusion, qui est légèrement plus efficace.
• Supprimez les feuilles inutiles. Vous pouvez supprimer une mise en page sans enfant ni arrière-plan, car elle est invisible, pour obtenir une hiérarchie de mise en page plus plate et plus efficace.
• Supprimez 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 pas 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 obtenir une hiérarchie de mise en page plus plate et plus efficace.
• Évitez les mises en page profondes. Les mises en page avec trop d'imbrications nuisent aux performances. Envisagez d'utiliser des mises en page plus simples, telles que 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 à 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 Fichier > Paramètres > Paramètres du projet. La page "Configuration de l'inspection" s'affiche avec les inspections acceptées :

Lint peut corriger 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.