Debugowanie układu przy użyciu Inspektora układu

Inspektor układu w Androidzie Studio umożliwia debugowanie układu aplikacji przez wyświetlanie hierarchii widoków, w której możesz sprawdzać właściwości każdego widoku. Za pomocą narzędzia Layout Inspector możesz porównać układ aplikacji z makietami projektu, wyświetlić powiększony lub trójwymiarowy widok aplikacji oraz sprawdzić szczegóły jej układu w czasie działania. Jest to szczególnie przydatne, gdy układ jest tworzony w czasie działania, a nie w całości w XML-u, i zachowuje się w nieoczekiwany sposób.

Rysunek 1. Wbudowany Layout Inspector w aplikacji Jetchat.

Rozpocznij

Aby uruchomić inspektora układu, uruchom aplikację, otwórz okno Running Devices (Uruchomione urządzenia) i kliknij Toggle Layout Inspector (Przełącz inspektora układu) Przycisk przełączania wbudowanego inspektora układu. Jeśli przełączasz się między wieloma urządzeniami lub projektami, Inspektor układu automatycznie łączy się z procesami, które można debugować i które działają na pierwszym planie podłączonego urządzenia.

Oto jak wykonać niektóre typowe zadania:

  • Aby wyświetlić hierarchię i sprawdzić właściwości każdego widoku, użyj okien narzędzi Drzewo komponentówAtrybuty. Inspektor układu może wymagać ponownego uruchomienia aktywności, aby uzyskać dostęp do atrybutów. Więcej informacji znajdziesz w artykule Wyświetlanie inspekcji atrybutów.
  • Aby wybierać widoki, klikając je bezpośrednio, lub przechodzić do kodu, klikając widoki dwukrotnie, włącz Przełącz głębokie sprawdzanie Przycisk przełączania szczegółowego sprawdzania.
  • Aby korzystać z aplikacji, wyłącz Przełączanie szczegółowego sprawdzania Przycisk przełączania szczegółowego sprawdzania.
  • Aby sprawdzić urządzenia fizyczne, włącz kopiowanie ekranu urządzenia.
  • Aby włączyć aktualizacje na żywo podczas aktualizowania interfejsu aplikacji, sprawdź, czy opcja Edycja na żywo jest włączona.
  • Aby użyć trybu 3D, zrób zrzut inspektora układu Zrzut Layout Inspector, a następnie kliknij Tryb 3D Przycisk 3D.

Wybieranie lub izolowanie widoku

Widok zwykle rysuje coś, co użytkownik może zobaczyć i z czym może wejść w interakcję. Drzewo komponentów pokazuje hierarchię aplikacji w czasie rzeczywistym z każdym komponentem widoku. Pomaga to w debugowaniu układu aplikacji, ponieważ możesz wizualizować elementy w aplikacji i wartości z nimi powiązane.

Aby wybrać widok, kliknij go w drzewie komponentów lub wyświetlaczu układu. Wszystkie atrybuty układu wybranego widoku pojawią się w panelu Atrybuty.

Jeśli układ zawiera nakładające się widoki, możesz zobaczyć wszystkie widoki w regionie, klikając prawym przyciskiem myszy w trybie Szczegółowe sprawdzanie.Przycisk przełączania szczegółowego sprawdzania Aby wybrać widok, który nie jest na pierwszym planie, kliknij go w drzewie komponentów lub obróć układ.

Aby pracować ze złożonymi układami, możesz wyodrębnić poszczególne widoki, tak aby w drzewie komponentów była wyświetlana tylko część układu, a w wyświetlaczu układu – tylko renderowana. Aby wyodrębnić widok, zrób zrzutZrzut Layout Inspector, kliknij prawym przyciskiem myszy widok w drzewie komponentów i wybierz Pokaż tylko poddrzewo lub Pokaż tylko elementy nadrzędne. Aby wrócić do pełnego widoku, kliknij go prawym przyciskiem myszy i wybierz Pokaż wszystko. Przed wyodrębnieniem widoku musisz zrobić zrzut.

Ukrywanie obramowań układu i wyświetlanie etykiet

Aby ukryć ramkę lub wyświetlić etykiety elementu układu, kliknij Wyświetl opcje Przycisk Wyświetl opcje u góry Wyświetlania układu i włącz lub wyłącz Pokaż obramowania lub Pokaż etykietę widoku.

Przechwytywanie zrzutów hierarchii układu

Inspektor układu umożliwia zapisywanie migawek hierarchii układu uruchomionej aplikacji, dzięki czemu możesz udostępniać je innym osobom lub korzystać z nich w późniejszym czasie.

Migawki zawierają dane, które zwykle widzisz podczas korzystania z Inspektora układu, w tym szczegółowe renderowanie 3D układu, drzewo komponentów widoku, układu Compose lub hybrydowego oraz szczegółowe atrybuty każdego komponentu interfejsu. Aby zapisać migawkę, kliknij Eksportowanie/importowanie migawki Eksportowanie i importowanie zrzutów, a następnie Eksportuj migawkę.

Wczytaj wcześniej zapisaną migawkę inspektora układu, klikając Import Snapshot (Importuj migawkę).

Tryb 3D

Wyświetlanie układu to zaawansowana wizualizacja 3D hierarchii widoków aplikacji w czasie działania. Aby użyć tej funkcji, zrób migawkęEksportowanie i importowanie zrzutów, kliknij przycisk Tryb 3DPrzycisk 3D w oknie inspektora migawki i obróć ją, przeciągając myszą.

Layout Inspector: widok 3D
Rysunek 2. Obrócony widok 3D układu.
Inspektor układu: widok odstępów między warstwami
Rysunek 3. Aby rozwinąć lub zwinąć warstwy kompozycji, użyj suwaka Odstęp między warstwami.

Porównywanie układu aplikacji z nakładką obrazu referencyjnego

Aby porównać układ aplikacji z obrazem referencyjnym, np. makietą interfejsu, możesz w inspektorze układu wczytać nakładkę obrazu bitmapowego.

  • Aby wczytać nakładkę, na pasku narzędzi Inspektora układu wybierz opcję Wczytaj nakładkę. Nakładka jest skalowana tak, aby pasowała do układu.
  • Aby dostosować przezroczystość nakładki, użyj suwaka Przezroczystość nakładki.
  • Aby usunąć nakładkę, kliknij Wyczyść nakładkę.

Sprawdź tworzenie

Narzędzie Layout Inspector umożliwia sprawdzanie układu Compose w działającej aplikacji w emulatorze lub na urządzeniu fizycznym. Za pomocą inspektora układu możesz sprawdzić, jak często komponent jest ponownie komponowany lub pomijany. Pomoże Ci to wykryć problemy z aplikacją. Niektóre błędy w kodzie mogą na przykład powodować nadmierne ponowne komponowanie interfejsu, co może negatywnie wpływać na wydajność. Niektóre błędy w kodzie mogą uniemożliwiać ponowne komponowanie interfejsu, a tym samym wyświetlanie zmian na ekranie.

Więcej informacji o narzędziu Layout Inspector w Compose

Inspekcja atrybutu wyświetlania

Aby działać prawidłowo, inspektor układu wymaga tego ustawienia globalnego:

adb shell settings put global debug_view_attributes 1

Ta opcja generuje dodatkowe informacje do sprawdzenia wszystkich procesów na urządzeniu.

Inspektor układu automatycznie włącza to ustawienie po uruchomieniu. Spowoduje to ponowne uruchomienie bieżącej aktywności na pierwszym planie. Nie zobaczysz innego ponownego uruchomienia aktywności, chyba że flaga zostanie ręcznie wyłączona na urządzeniu.

Aby wyłączyć flagę, uruchom to polecenie adb:

adb shell settings delete global debug_view_attributes

Możesz też wyłączyć opcję Włącz inspekcję atrybutu wyświetlaniaopcjach programisty na urządzeniu.

Samodzielny Layout Inspector

Aby uzyskać optymalną wydajność, zalecamy korzystanie z Inspektora układu w domyślnym trybie osadzonym. Jeśli chcesz odłączyć Inspektor układu, kliknij Plik (Android Studio na macOS)> Ustawienia > Narzędzia > Inspektor układu i odznacz pole wyboru Włącz osadzony Inspektor układu.

W trybie samodzielnym włącz aktualizacje na żywo, klikając opcję Aktualizacje na żywo na pasku narzędzi Inspektora układu.