Profiler votre mise en page avec Hierarchy Viewer

Hierarchy Viewer est obsolète. Si vous utilisez Android Studio 3.1 ou une version ultérieure, utilisez plutôt l'outil d'inspection de la mise en page pour inspecter la hiérarchie des vues de votre application au moment de l'exécution. Pour profiler la vitesse de rendu de la mise en page de votre application, utilisez Window.OnFrameMetricsAvailableListener comme décrit dans cet article de blog.

Hierarchy Viewer est un outil intégré à Android Device Monitor qui vous permet de mesurer la vitesse de mise en page de chaque vue de votre hiérarchie de mise en page. Il peut vous aider à identifier les goulots d'étranglement qui affectent les performances causés par la structure de votre hiérarchie des vues.

Remarque : Hierarchy Viewer n'est plus développé. Pour inspecter les propriétés de votre hiérarchie des vues au moment de l'exécution, vous devez plutôt utiliser l'outil d'inspection de la mise en page dans Android Studio. Toutefois, l'outil d'inspection de la mise en page ne fournit actuellement pas de détails de profilage sur les performances de votre mise en page.

Cette page présente Hierarchy Viewer, ainsi qu'un tutoriel sur le profilage de la mise en page.

Configuration

Si vous utilisez Android Emulator, vous pouvez ignorer cette section. Sinon, vous devez configurer votre appareil comme suit.

Remarque : Votre appareil doit être équipé d'Android 4.1 ou version ultérieure.

  1. Activez les options pour les développeurs sur votre appareil.
  2. Définissez la variable d'environnement ANDROID_HVPROTO=ddm sur votre ordinateur de développement.

    Cette variable indique à Hierarchy Viewer de se connecter à l'appareil à l'aide du protocole ddm, qui est identique au protocole DDMS. Le seul problème est qu'il ne peut y avoir qu'un seul processus sur l'hôte qui se connecte à l'appareil. Vous devez donc arrêter toute autre session DDMS pour pouvoir exécuter Hierarchy Viewer.

Démarrer Hierarchy Viewer

Figure 1 : Android Device Monitor

  1. Connectez votre appareil à votre ordinateur. Si une boîte de dialogue s'affiche sur l'appareil et vous demande Allow USB debugging? (Autoriser le débogage USB ?), appuyez sur OK.
  2. Ouvrez votre projet dans Android Studio, compilez-le et exécutez-le sur votre appareil.
  3. Démarrez Android Device Monitor. Android Studio peut afficher une boîte de dialogue Disable adb integration (Désactiver l'intégration adb), car un seul processus peut se connecter à l'appareil via adb à la fois, et Android Device Monitor demande une connexion. Cliquez sur Yes (Oui).

    La figure 1 illustre ce qui apparaît initialement sur Android Device Monitor.

  4. Dans la barre de menu, sélectionnez Window > Open Perspective (Fenêtre > Ouvrir la perspective), puis cliquez sur Hierarchy View (Vue sous forme de hiérarchie).

    Vous devriez voir une disposition semblable à celle de la figure 2. Si ce n'est pas le cas, sélectionnez Window > Reset Perspective (Fenêtre > Réinitialiser la perspective) pour revenir à la mise en page par défaut.

  5. Double-cliquez sur le nom de package de votre application dans l'onglet Windows (Fenêtres) à gauche. Cela remplit les volets avec la hiérarchie des vues de votre application.

Se familiariser avec les outils

Figure 2 . Volets de Hierarchy Viewer

Hierarchy Viewer comporte les volets suivants (comme indiqué figure 2) :

  • Tree View (Arborescence) au centre : arborescence de la hiérarchie des vues. Vous pouvez faire glisser et zoomer sur l'arborescence à l'aide de la souris et de la commande de zoom située en bas. Chaque nœud indique son nom de classe et son ID View.
  • Tree Overview (Présentation de l'arborescence) en haut à droite : vue d'ensemble de la hiérarchie complète des vues de votre application. Déplacez le rectangle gris pour modifier la fenêtre d'affichage visible dans l'arborescence (Tree View).
  • Layout View (Vue de la mise en page), en bas à droite : wireframe de votre mise en page. Le contour de la vue actuellement sélectionnée est rouge et la vue parente est rouge clair.

    Si vous cliquez sur une vue ici, vous la sélectionnez également dans l'arborescence, et inversement.

La hiérarchie des vues est un instantané de la mise en page. Par conséquent, elle n'est pas automatiquement mise à jour. Pour mettre à jour la vue sous forme de hiérarchie, cliquez sur Reload the view hierarchy (Actualiser la hiérarchie des vues) .

Pour invalider une vue (demander au système d'appeler onDraw() lors de la prochaine mise à jour de la mise en page), sélectionnez une vue dans la hiérarchie et cliquez sur Invalidate the layout (Invalider la mise en page) (cela revient à appeler invalidate() sur la vue). Pour demander la mise en page de la vue (et de tous les enfants), cliquez sur Request layout (Demander la mise en page) .

Si vous accédez à une autre application, vous devez la sélectionner dans l'onglet Windows (Fenêtres) du volet de gauche pour afficher sa hiérarchie des vues.

Pour afficher les détails de la vue, y compris ses durées de mesure, de mise en page et de dessin (comme indiqué figure 3), cliquez sur la vue dans l'arborescence. Double-cliquez sur la vue pour l'agrandir.

Figure 3. : Parties de l'écran du nœud de vue.

Pour afficher les propriétés de la vue, cliquez sur l'onglet View Properties (Propriétés de la vue) dans le volet de gauche, comme indiqué figure 4.

Figure 4 . Emplacement de l'onglet View Properties

Pour enregistrer une capture d'écran multicouche de votre mise en page dans un fichier Adobe Photoshop (PSD), cliquez sur Capture the window layers (Capturer les calques de fenêtre) dans la barre d'outils. Chaque vue est enregistrée en tant que couche dédiée. Vous pouvez ainsi facilement créer une maquette en masquant et en ajustant chaque vue.

Profiler votre mise en page

Figure 5. Hiérarchie des vues après le profilage.

Maintenant que vous maîtrisez l'outil, vous pouvez l'utiliser pour profiler votre hiérarchie des vues et interpréter les résultats.

  1. Dans la vue Tree View (Arborescence) ou Layout View (Mise en page), cliquez sur le nœud de la vue dont vous souhaitez profiler les enfants.
  2. Pour démarrer le profilage, cliquez sur Obtain layout times (Obtenir les durées de mise en page) en haut de l'arborescence.

    Pour les grandes hiérarchies de vues, le profilage peut prendre quelques secondes.

Chaque vue enfant du nœud sélectionné a trois points, qui peuvent être verts, jaunes ou rouges.

  • Le point à gauche représente le processus de dessin du pipeline de rendu.
  • Le point central représente la phase de mise en page.
  • Le point à droite représente la phase d'exécution.

Figure 6. le lien entre les points colorés
et le pipeline de rendu.

Ces points correspondent à peu près aux phases de mesure, de mise en page et de dessin du pipeline de traitement. La couleur des points indique les performances relatives de ce nœud par rapport à tous les autres nœuds profilés de la famille locale.

  • Vert signifie que la vue s'affiche plus rapidement qu'au moins la moitié des autres vues.
  • Jaune signifie que la vue s'affiche plus rapidement que la moitié inférieure des autres vues.
  • Rouge signifie que la vue fait partie de la moitié la plus lente des vues.

Interpréter les résultats

Hierarchy Viewer mesure les performances de chaque nœud par rapport aux vues sœurs. Par conséquent, un profil comporte toujours des nœuds rouges (à moins que toutes les vues ne fonctionnent de la même manière). Cela ne signifie pas nécessairement que le rouge est peu performant (sauf que c'est la vue la plus lente du groupe de vues local).

Hierarchy Viewer rastérise votre mise en page pour obtenir les informations de durée. La rastérisation est le processus qui consiste à transformer une primitive de haut niveau, comme un cercle ou une police vectorielle, en pixels à l'écran. En général, la rastérisation est effectuée par le GPU de votre appareil. Toutefois, dans le cas d'une rastérisation logicielle, le rendu est effectué sur le processeur avec un logiciel ordinaire. Cela signifie que les délais absolus signalés sont corrects les uns par rapport aux autres, mais qu'ils sont gonflés et varient en fonction de la charge de travail globale et changeante du processeur sur votre appareil et votre ordinateur de développement. Cela ne reflète donc pas les vitesses de performance réelles sur un appareil et vous devez profiler plusieurs fois pour avoir une idée des mesures moyennes.

Un nœud rouge est un problème potentiel dans toute situation où votre application a des performances ralenties de manière inattendue. Dans un cadre relatif, il y a toujours un nœud le plus lent. Assurez-vous simplement qu'il s'agit du nœud que vous attendez. Les exemples suivants indiquent comment interpréter les points rouges.

  • Recherchez les points rouges dans les nœuds feuilles ou les groupes de vues avec seulement quelques enfants. Cela peut indiquer un problème. Votre application peut ne pas être lente, ou elle peut ne pas être lente sur votre appareil, mais vous devez comprendre pourquoi ce point est rouge. Systrace ou Traceview peuvent vous fournir des informations supplémentaires.
  • Si votre groupe de vues comporte de nombreux enfants et une phase de mesure rouge, examinez les enfants pour analyser leurs performances.
  • Une vue avec des points jaunes ou même rouges peut ne pas fonctionner lentement sur l'appareil. C'est là que les chiffres réels sont utiles. Systrace ou Traceview peuvent vous fournir des informations supplémentaires.
  • Si la vue racine d'une hiérarchie comporte une phase de mesure rouge, une phase de mise en page rouge et une phase de dessin jaune, c'est assez typique. En effet, elle est le parent de toutes les autres vues et sa mise en page n'est pas terminée tant que les enfants n'ont pas terminé.
  • Si un nœud feuille dans une arborescence avec plus de 20 vues présente une phase de dessin rouge, c'est un problème. Recherchez le code qui ne devrait pas se trouver dans la méthode onDraw().

Pour obtenir d'autres conseils de mise en page, consultez Améliorer les performances de la mise en page.