Avant de pouvoir commencer à optimiser vos mises en page, il est utile de comprendre le processus de mise en page Android. Enflatant une mise en page, commence lorsque l'activité apparaît pour la première fois. Trois étapes se produisent:
► Mesurer: C'est ici que les vues déterminent leur taille, en commençant par le parent et en travaillant avec tous les enfants. Le parent peut devoir appeler ses enfants plusieurs fois pour calculer la taille finale.
► Mise en page: C'est là que le parent détermine la position de ses enfants
► Dessiner: C'est là que les vues sont réellement rendues
Ce processus commence avec le parent, qui parcourt ensuite tous ses enfants. Ces enfants parcourent leurs enfants. Cela crée l'arbre de disposition, le parent devenant le nœud racine de l'arbre.
Hierarchy Viewer est un outil inclus avec le SDK Android pour l'inspection des mises en page. Il montre graphiquement l'arbre de disposition ainsi que les résultats de synchronisation pour chaque vue / nœud. En examinant la disposition de l'arbre et le calendrier; vous pouvez rechercher une conception inefficace et des goulots d'étranglement. Armé de cette information, vous êtes en mesure d'optimiser vos mises en page.
Pour cette recette, nous allons utiliser Hierarchy Viewer pour inspecter l'exemple de disposition donné dans la recette Using RelativeLayout.
Se préparer
Dans la section Il y a plus ... de la recette Using RelativeLayout, un exemple LinearLayout a été montré pour mettre en évidence la différence entre les mises en page. Le commentaire a été fait en indiquant que LinearLayout nécessitait une mise en page imbriquée. Nous allons créer un nouveau projet appelé OptimizingLayouts en utilisant l'exemple LinearLayout. Nous utiliserons ensuite Hierarchy Viewer pour inspecter la mise en page. Nous aurons besoin d'un appareil Android enraciné ou de l'émulateur pour cette recette.
Hierarchy Viewer se connecte uniquement aux périphériques enracinés, tels qu'un émulateur.
Comment faire...
1. Ouvrez le projet OptimizingLayouts dans Android Studio. Exécutez le projet sur votre appareil enraciné (ou émulateur) et assurez-vous que l'écran est visible (déverrouiller si nécessaire).
2. Dans Android Studio, démarrez Android Device Monitor en accédant à l'option de menu suivante: Outils | Android | Moniteur de périphérique Android.
3. Dans Android Device Monitor, passez à la vue Vue hiérarchique en accédant à Fenêtre | Open Perspective ... ceci ouvrira la boîte de dialogue suivante:
4. Maintenant, cliquez sur Hierarchy Viewer et sur OK.
5. Dans la section Windows sur la gauche se trouve la liste des périphériques avec les processus en cours d'exécution. Cliquez sur le processus OptimizingLayouts pour inspecter la mise en page.
6. Voir la représentation graphique de cette activité dans la section TreeView (dans le volet central, qui occupe la plus grande partie de la perspective Hierarch Viewer).
LinearLayout LinearLayout TextView
@ 1236adb @ e40a851 @ 6e3d9b7
0 0 0
Comment ça marche...
La section Tree Layout affiche une hiérarchie graphique des vues qui composent cette mise en page, ainsi que les heures de mise en page. (Malheureusement pour cette démonstration, les temps de rendu sont trop rapides pour les références visuelles de codage couleur.) Ce qui est important pour cet exemple, c'est que LinearLayouts imbriqué
montré précédemment. (Cela vaut la peine de prendre le temps d'explorer les autres vues qui composent cette mise en page afin que vous puissiez voir ce que Android fait pour nous dans les coulisses.)
Comme déjà mentionné dans l'exemple RelativeLayout, la solution est de repenser cette disposition en utilisant le RelativeLayout. Idéalement, nous voulons une mise en page plus large et plus plate, plutôt que des mises en page profondément imbriquées pour réduire le nombre d'itérations requises lors de l'étape de dimensionnement.
À des fins de synchronisation, c'est évidemment un exemple trivial, mais même cet exemple peut avoir un impact. Imaginez l'utilisateur feuilletant une liste avec des milliers d'éléments basés sur cette mise en page inefficace. Si vous rencontrez le bégaiement pendant le défilement, vos étapes d'optimisation peuvent commencer par examiner la disposition dans Hierarchy Viewer.
Il y a plus...
Lint est un autre outil inclus avec le SDK Android avec prise en charge intégrée par Android Studio. Par défaut, vous utilisez déjà Lint pour vérifier votre code à la recherche de problèmes tels que les appels d'API obsolètes, les appels d'API non pris en charge pour le niveau d'API cible, les problèmes de sécurité, etc. Pour les problèmes d'optimisation de la mise en page, certaines des conditions que Lint vérifie automatiquement sont les suivantes:
► Layouts profonds - le maximum par défaut est de 10 niveaux
► Poids imbriqués, qui sont mauvais pour la performance
► Parent inutile
► Feuille inutile
Si vous vérifiez l'avertissement Lint dans Android Studio pour cette disposition, vous verrez l'avertissement suivant sur le deuxième élément LinearLayout:
> activity_main.xml
c MainActivity.java x K? activity_main.xml x
http://schemas.android.com/apk/res/android" "><? xml version = "l.0" encoding = "utf-8"?> c <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
android: orientation = "horizontal" android: layout_width = "match_parent" android: layout_height = "match_parent" android: gravity = "centre">
{4Th
Le ViewStub peut également être utilisé pour optimiser une mise en page. Pensez à ViewStub comme une "charge paresseuse" pour votre mise en page. La disposition dans le ViewStub ne se déploiera pas tant que cela n'est pas nécessaire, ce qui réduit les vues nécessaires pour gonfler. La mise en page sera plus rapide et utilisera moins de mémoire. C'est une excellente façon de disposer de fonctionnalités rarement utilisées, comme une fonction d'impression, disponible en cas de besoin, mais qui n'occupe pas la mémoire lorsqu'elle n'est pas nécessaire. Voici un exemple de ViewStub:
<ViewStub
android: id = "@ + id / viewStubPrint"
android: inflatedId = "@ id / print"
android: layout = "@ layout / print"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content" />
Il y a deux façons de gonfler réellement le ViewStub:
► Réglez le paramètre de visibilité de ViewStub sur VISIBLE:
((ViewStub) findViewById (R.id.viewStubPrint)). setVisibility (View.VISIBLE);
► Appelez la méthode inflate () sur ViewStub:
Voir la vue = ((ViewStub) findViewById (R.id.viewStubPrint)). Inflate ();
Une fois le ViewStub gonflé, l'identifiant ViewStub sera supprimé de la mise en page et remplacé par l'ID gonflé.
