Analiza struktury layoutu za pomocą Hierarchy Viewer

W poprzednim wpisie przedstawiłem narzędzie w jaki sposób można testować żywotność baterii. Kontynuując temat związany z optymalizacją aplikacji na androida dziś przedstawię narzędzie Hierarchy ViewerTo bardzo przydatne narzędzie które w czytelny sposób pozwoli nam prześledzić układ widoków aplikacji a także wskazać słabe punkty układów plików XML. Owe narzędzie stanowi część pakietu Android Device Monitor.

1. Okno programu Hierarchy Viewer

Pierwsze co musisz zrobić to uruchomić aplikację na telefonie lub emulatorze z opcją Debug USB. Następnie wejść w Android Studio > Tools > Android > Android Device Monitor.  Otworzy Ci się okno i dalej wybierasz: Window > Open Perspective > Hierarchy View. Główne okno prezentuje się tak:

Główne okno aplikacji jest podzielone na poszczególne części:

  1. Windows – w tej sekcji znajdziemy urządzenia podłączone oraz aktualne procesy które działają na poszczególnym urządzeniu. Na screenie powyżej widać tą zakładkę ukrytą.
  2. View Properties – właściwości widoków, tutaj znajdują się szczegółowe dane wybranego widoku. Tutaj również ukryta zakładka.
  3. Tree View – powiększona struktura układów aplikacji.
  4. Tree Overview – tutaj jest widoczna cała hierarchia i prostokąt który możemy przesuwać odwzorowuje powiększony obszar (Tree View).
  5. Layout View –  linie ciemnoczerwone oznacza obszar na wyświetlaczu zajmowanego przez zaznaczony układ. Linie jasnoczerwone oznaczają układ nadrzędny – czyli widok który jest zaznaczony w środkowej części.

Oprócz wyświetlania struktury XML narzędzie oferuje kilka ciekawych funkcji które znajdują się w pasku narzędzi w środkowej części czyli Tree View:

  1. Zapisywanie widoku do pliku PNG.
  2. Eksport widoku do programu typu Photoshop – aby zobaczyć jak widoki nakładają się na siebie.
  3. Odświeżenie widoku – struktura nie odświeża się automatycznie, więc przy zmianie interfejsu warto odświeżyć strukturę.
  4. Otwarcie widoku (obrazu) w nowym oknie.
  5. Obliczenie czasu czyli wyświetlenie czasu oraz “kropek” na strukturze układu – czytaj dalej.

2. Analiza układu XML

Ja krótką analizę przeprowadzę na podstawie projektu Android-UniversalMusicPlayer. Po kliknięciu w pierwszy element widać, że cały układ składa sie z 27 widoków, został zmierzony w czasie (Measure) – 0,246 ms, ułożeny (Layout) – 0,093 ms i narysowaniy w ciągu (Draw) – 25,077 ms.  W sumie to daje nam niecałe 26 ms. Przy takim czasie mogą występować problemy związane z pomijaniem ramek, ale efekt ten nie ma większego wpływu na funkcjonowanie interfejsu użytkownika. Warto też zaznaczyć, że wartości będą różne na każdym urządzeniu. W tym przypadku analiza jest testowane na emulatorze Nexus 6 SDK 23.

Przyglądnijmy się teraz toolbarowi otóż wykonywał się on w niecałe 8 ms. Strzałka która znajduje u góry z lewej strony ekranu rysowała się najdłużej ~ 3,2 ms w odniesieniu do wartości wszystkich widoków na tym samym poziomie hierarchii, Skąd to wiemy? Otóż oznaczają to kropki które pojawiają się w środkowej części. Oznaczają one (od lewej do prawej strony) względną szybkość mierzenia, układania i rysowania.

  • Kolor zielony  – oznacza, że widok jest szybszy niż 50% wszystkich widoków w hierarchii.
  • Kolor Żółty – oznacza, że widok jest wolniejszy niż 50% widoków w hierarchii.
  • Kolor Czerwony – oznacza, że przetwarzanie danego widoku trwa najdłużej spośród wszystkich widoków na tym samym poziomie.


Widoki które mają kolor czerwony powinny dać nam ostrzeżenie i należy jest sprawdzić pod kontem optymalizacji. Oczywiście kolor czerwony nie zawsze oznacza, że widok jest źle skonstruowany.

3. Podsumowanie

Jak widać narzędzie Hierarchy Viewer które przedstawiłem jest proste w obsłudze i dużo z niego można wyciągnąć informacji na temat widoków z których składa się aplikacja na androidzie. Owe narzędzie może bardzo mocno pomóc w optymalizacji struktury layoutu. Oczywiście zachęcam do własnych testów i analiz ponieważ wiele z nich możemy się dowiedzieć o poszczególnych widokach oraz warstwach które mogą na siebie nachodzić, a to nie jest dobra informacja 🙂

Co dalej?

  • Zapisz się na newsletter aby otrzymywać jeszcze więcej materiałów
  • Polub stronę MYENV na Facebooku oraz śledź mnie na Twitterze
  • Zachęcam do komentowania i pisania propozycji tematów, o których chcesz przeczytać
  • Poleć ten wpis za pomocą poniższych przycisków. Będę Ci za to bardzo wdzięczny 🙂
  • Życzę Ci miłego dnia i miłego kodowania 🙂

Menu