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

Narzędzie Layout Inspector w Android Studio umożliwia sprawdzanie i debugowanie układu w działającej aplikacji w emulatorze lub na urządzeniu fizycznym. Możesz sprawdzić atrybuty każdego komponentu, porównać układ aplikacji z makietami projektu i wyświetlić powiększony widok aplikacji.

android layout

Możesz też użyć narzędzia Layout Inspector, aby sprawdzić, jak często funkcja kompozycyjna jest ponownie komponowana lub pomijana. Pomoże Ci to zidentyfikować problemy z aplikacją. Na przykład niektóre błędy w kodzie mogą wymuszać nadmierną rekompozycję interfejsu, co może powodować niską wydajność. Niektóre błędy w kodzie mogą uniemożliwiać ponowne komponowanie interfejsu, a tym samym wyświetlanie zmian w interfejsie na ekranie.

Więcej informacji znajdziesz w artykule Debugowanie interfejsu Compose.

Rozpocznij

Aby uruchomić narzędzie Layout Inspector, uruchom aplikację, otwórz okno Uruchomione urządzenia i kliknij Przełącz narzędzie Layout Inspector . Jeśli przełączasz się między wieloma urządzeniami lub projektami, narzędzie Layout Inspector automatycznie łączy się z procesami z możliwością debugowania, które działają na pierwszym planie połączonego urządzenia.

Oto jak wykonać niektóre typowe zadania:

• Aby wyświetlić hierarchię widoków i sprawdzić atrybuty każdego komponentu, użyj okien narzędzi Drzewo komponentów i Atrybuty. Aby uzyskać dostęp do atrybutów, Inspektor układu może wymagać ponownego uruchomienia aktywności.
• Aby wybrać komponenty, najpierw włącz Przełączanie szczegółowego sprawdzania , a potem kliknij komponenty. Możesz też przejść do kodu, klikając dwukrotnie komponenty.
• Aby korzystać z aplikacji, wyłącz Przełącz głębokie sprawdzanie .
• 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.

Wybieranie lub izolowanie komponentu

Komponent 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 kompozycyjnym. Pomaga to w debugowaniu układu aplikacji, ponieważ możesz wizualizować elementy w aplikacji i powiązane z nimi wartości.

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

Jeśli układ zawiera nakładające się komponenty, możesz wyświetlić wszystkie komponenty w regionie, klikając prawym przyciskiem myszy w trybie Szczegółowe sprawdzanie . Aby wybrać komponent, który nie znajduje się na pierwszym planie, kliknij go w drzewie komponentów.

Aby pracować ze złożonymi układami, możesz wyodrębnić poszczególne komponenty, tak aby w drzewie komponentów i wyświetlaczu układu była widoczna tylko część układu. Aby wyodrębnić komponent, kliknij go prawym przyciskiem myszy w drzewie komponentów i wybierz Pokaż tylko poddrzewo lub Pokaż tylko elementy nadrzędne. Aby wrócić do pełnego widoku, kliknij komponent prawym przyciskiem myszy i wybierz Pokaż wszystko.

Ukrywanie granic układu i wyświetlanie etykiet

Aby ukryć ramkę ograniczającą lub etykiety komponentów elementu układu, kliknij Opcje widoku u góry Wyświetlania układu i wyłącz opcję Pokaż obramowania lub Pokaż etykietę widoku.

Przechwytywanie zrzutów hierarchii układu

[narzędzie] Layout Inspector umożliwia zapisywanie migawek hierarchii układu uruchomionej aplikacji, dzięki czemu możesz udostępniać je innym 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 układu, drzewo komponentów układu Compose, View lub hybrydowego oraz szczegółowe atrybuty każdego komponentu interfejsu. Aby zapisać migawkę, kliknij Eksportowanie/importowanie migawki , a następnie Eksportuj migawkę.

Aby wczytać zapisany wcześniej zrzut narzędzia Layout Inspector, kliknij Import Snapshot (Importuj zrzut).

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ę z obrazem bitmapowym.

• 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ę.

Samodzielne narzędzie 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.

Dodatkowe materiały

Wyświetla treści

• Debugowanie układu za pomocą narzędzia Layout Inspector (widoki)