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

Narzędzie Layout Inspector w Android Studio umożliwia debugowanie układu aplikacji przez wyświetlanie hierarchii widoków, w której możesz sprawdzić właściwości każdego widoku. Za pomocą narzędzia do sprawdzania układu możesz porównać układ aplikacji z makupami projektu, wyświetlić powiększony widok aplikacji lub widok 3D oraz sprawdzić szczegóły jej układu w czasie działania. Jest to szczególnie przydatne, gdy układ jest tworzony w czasie wykonywania, a nie w całości w pliku XML, i zaczyna się zachowywać w nieoczekiwany sposób.

Rysunek 1. Umieszczony w aplikacji Jetchat element Layout Inspector

Rozpocznij

Aby uruchomić Inspektora układu, uruchom aplikację, otwórz Uruchomione urządzenia i kliknij Przełącz inspektora układu Przycisk przełączania wbudowanego modułu inspekcji układu. Jeśli przełączysz się między wieloma urządzeniami lub projektami, narzędzie do inspekcji układu automatycznie połączy się z procesami debugowania uruchomionymi na pierwszym planie na połączonym urządzeniu.

Oto jak wykonać kilka typowych czynności:

  • Aby wyświetlić hierarchię i zbadać właściwości każdego widoku, użyj funkcji Drzewo komponentów i Atrybuty. Inspektor układu może wymaga ponownego uruchomienia aktywności w celu uzyskania dostępu do atrybutów. Więcej informacji znajdziesz w artykule Wyświetlanie inspekcji atrybutów.
  • Aby wybierać widoki pojedynczym kliknięciem lub przechodzić do kodu przez dwukrotne kliknięcie widoku, włącz Przełączanie do szczegółowej analizy Przycisk przełączania szczegółowej kontroli.
  • Aby móc korzystać z aplikacji, wyłącz Przełączanie funkcji Deep Inspect Przycisk przełączania szczegółowej kontroli.
  • Aby sprawdzić urządzenia fizyczne, włącz lustrowanie urządzenia.
  • Aby włączyć aktualizacje na żywo podczas aktualizowania interfejsu użytkownika aplikacji, sprawdź, czy włączona jest opcja Edycja na żywo.
  • Aby użyć trybu 3D, zrób zrzut inspektora układów Migawka inspektora układu, a potem kliknij Tryb 3D Przycisk 3D.

Wybieranie i odizolowanie widoku

Widok zwykle przedstawia coś, co użytkownik może zobaczyć i z czym może wchodzić w interakcję. Drzewo komponentów pokazuje hierarchię aplikacji w czasie rzeczywistym w każdym widoku który ułatwia debugowanie układu aplikacji, ponieważ można wizualizować elementów aplikacji i powiązanych z nimi wartości.

Aby wybrać widok, kliknij go w drzewie komponentów lub w oknie Wyświetlanie układu. Wszystkie atrybuty układu dla wybranego widoku są widoczne w panelu Atrybuty.

Jeśli układ obejmuje pokrywające się widoki, zobaczysz wszystkie widoki w danym regionie. po kliknięciu prawym przyciskiem myszy w trybie Deep Inspect. Przycisk przełączania szczegółowej kontroli Aby wybrać widok, który nie jest widoczny z przodu, kliknij go w drzewie komponentów lub obróć układ.

Przy pracy ze złożonymi układami możesz oddzielić poszczególne widoki, tak aby tylko podzbiór układu jest widoczny w drzewie komponentów i renderowany w Wyświetlanie układu. Aby wyodrębnić widok, zrób jego zrzut ekranu Migawka inspektora układu, kliknij prawym przyciskiem widok w drzewie komponentów i wybierz Pokaż tylko poddrzewo lub Pokaż tylko rodziców. Aby wrócić do pełnego widoku, kliknij go prawym przyciskiem myszy i wybierz Pokaż wszystko. Zanim oddzielisz widok, musisz wykonać zrzut ekranu.

Ukrywanie obramowania układu i wyświetlanie etykiet

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

Przechwytywanie zrzutów hierarchii układu

Inspektor układu pozwala zapisywać zrzuty hierarchii układu uruchomionej aplikacji, dzięki czemu możesz udostępniać je innym lub wracać do nich później.

Zrzuty zawierają dane, które zwykle można zobaczyć podczas korzystania z Układu Inspektor, w tym szczegółowe wyrenderowanie układu 3D, drzewo komponentów układ widoku, tworzenia i hybrydowego, a także szczegółowe atrybuty poszczególnych interfejsu. Aby zapisać migawkę, kliknij Eksportuj/importuj migawkęEksport/import zrzutu, a następnie Eksportuj migawkę.

Aby załadować wcześniej zapisany zrzut ekranu z inspektora układu, kliknij Importuj zrzut ekranu.

Tryb 3D

Widok układu zawiera zaawansowaną wizualizację 3D hierarchii widoków aplikacji w czasie działania. Aby użyć tej funkcji, zrób zrzut ekranu Eksport/import zrzutu, kliknij przycisk Tryb 3D Przycisk 3D w oknie inspektora zrzutu ekranu i obróć go, przeciągając mysz.

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

Porównaj układ aplikacji z nakładką z obrazem referencyjnym

Aby porównać układ aplikacji z obrazem referencyjnym, np. wersją UI, możesz należy wczytać nakładkę obrazu bitmapowego w inspektorze układów.

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

Sprawdź funkcję tworzenia wiadomości

Narzędzie do sprawdzania układu umożliwia sprawdzanie układu w Compose w uruchomionej aplikacji w emulatorze lub na fizycznym urządzeniu. Za pomocą Inspektora układu możesz sprawdzić, jak często kompozyt jest ponownie składany lub pomijany. Może to pomóc w znalezieniu problemów z aplikacją. Na przykład niektóre błędy kodowania mogą powodować nadmierne ponowne składanie interfejsu użytkownika, co może skutkować niską wydajnością. Niektóre błędy w kodowaniu mogą uniemożliwić przekomponowanie interfejsu użytkownika i tym samym, co zapobiega pojawieniu się zmian w interfejsie widoczne na ekranie.

Więcej informacji o Layout Inspector dla Compose

Wyświetlanie inspekcji atrybutów

Aby działać prawidłowo, Inspektor układu wymaga tych ustawień globalnych:

adb shell settings put global debug_view_attributes 1

Powoduje ona wygenerowanie dodatkowych informacji do sprawdzenia na urządzeniu.

Po uruchomieniu Inspektor układu automatycznie włącza to ustawienie. Ten powoduje ponowne uruchomienie bieżącej aktywności na pierwszym planie. Nie zobaczysz 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.

Oddzielny inspektor układu

Aby uzyskać optymalną wydajność, domyślnie używaj Inspektora układu. w trybie osadzonym. Jeśli chcesz odłączyć narzędzie Layout Inspector, kliknij Plik (Android Studio na komputerze Mac) > Ustawienia > Narzędzia > Layout Inspector i odznacz pole Włącz wbudowane narzędzie Layout Inspector.

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