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

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ć Layout Inspector, aby sprawdzić, jak często komponent jest ponownie komponowany lub pomijany, co może pomóc w identyfikowaniu problemów z aplikacją. Na przykład niektóre błędy w kodzie mogą powodować nadmierne ponowne komponowanie interfejsu, co może pogorszyć wydajność. Niektóre błędy w kodzie mogą uniemożliwiać ponowne komponowanie interfejsu, a tym samym uniemożliwiać wyświetlanie zmian w interfejsie na ekranie.

Więcej informacji znajdziesz w artykule Debugowanie interfejsu Compose.

Rozpocznij

Aby uruchomić Layout Inspector, uruchom aplikację, otwórz okno Running Devices (Działające urządzenia) i kliknij Toggle Layout Inspector (Przełącz Layout Inspector) . Jeśli przełączasz się między kilkoma urządzeniami lub projektami, Layout Inspector automatycznie łączy się z procesami debugowania działającymi na pierwszym planie podłączonego urządzenia.

Oto jak wykonać niektóre typowe zadania:

• Aby wyświetlić hierarchię i sprawdzić atrybuty każdego komponentu, użyj okien narzędzi Component Tree (Drzewo komponentów) i Attributes (Atrybuty). Layout Inspector może wymagać ponownego uruchomienia aktywności, aby uzyskać dostęp do atrybutów.
• Aby wybrać komponenty, najpierw włącz Toggle Deep Inspect , a następnie kliknij komponenty. Możesz też przejść do kodu, klikając komponenty dwukrotnie.
• Aby korzystać z aplikacji, wyłącz Toggle Deep Inspect .
• Aby sprawdzić urządzenia fizyczne, włącz dublowanie urządzenia.
• Aby włączyć aktualizacje na żywo podczas aktualizowania interfejsu aplikacji, sprawdź, czy włączona jest funkcja Live Edit.

Wybieranie lub izolowanie komponentu

Komponent zwykle rysuje coś, co użytkownik może zobaczyć i z czym może wchodzić w interakcję. Component Tree (Drzewo komponentów) pokazuje hierarchię aplikacji w czasie rzeczywistym z każdym komponentem, co pomaga 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 Component Tree (Drzewo komponentów) lub Layout Display (Wyświetlanie układu). Wszystkie atrybuty układu wybranego komponentu pojawiają się w panelu Attributes (Atrybuty).

Jeśli układ zawiera nakładające się komponenty, możesz zobaczyć wszystkie komponenty w regionie, klikając prawym przyciskiem myszy w trybie Deep Inspect (Głębokie sprawdzanie) . Aby wybrać komponent, który nie jest na pierwszym planie, kliknij go w Component Tree (Drzewo komponentów).

Aby pracować ze złożonymi układami, możesz izolować poszczególne komponenty, tak aby w Component Tree (Drzewo komponentów) i Layout Display (Wyświetlanie układu) wyświetlał się tylko podzbiór układu. Aby wyizolować komponent, kliknij go prawym przyciskiem myszy w Component Tree (Drzewo komponentów) i wybierz Show Only Subtree (Pokaż tylko poddrzewo) lub Show Only Parents (Pokaż tylko elementy nadrzędne). Aby wrócić do pełnego widoku, kliknij komponent prawym przyciskiem myszy i wybierz Show All (Pokaż wszystko).

Ukrywanie obramowań układu i wyświetlanie etykiet

Aby ukryć pole ograniczenia lub etykiety komponentów elementu układu, kliknij View Options (Opcje widoku) u góry Layout Display (Wyświetlanie układu) i przełącz Show Borders (Pokaż obramowania) lub Show View Label (Pokaż etykietę widoku).

Tworzenie zrzutów hierarchii układu

Layout Inspector umożliwia zapisywanie zrzutów hierarchii układu działającej aplikacji, dzięki czemu możesz udostępniać je innym osobom lub odwoływać się do nich później.

Zrzuty zawierają dane, które zwykle widzisz podczas korzystania z Layout Inspector, w tym szczegółowe renderowanie układu, drzewo komponentów układu Compose, View lub układu hybrydowego oraz szczegółowe atrybuty każdego komponentu interfejsu. Aby zapisać zrzut, kliknij Snapshot Export/Import , a następnie Export Snapshot.

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

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

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

• Aby wczytać nakładkę, na pasku narzędzi Layout Inspector kliknij Load Overlay . Nakładka jest skalowana tak, aby pasowała do układu.
• Aby dostosować przezroczystość nakładki, użyj suwaka Overlay Alpha (Alfa nakładki).
• Aby usunąć nakładkę, kliknij Clear Overlay (Wyczyść nakładkę).

Samodzielny Layout Inspector

Aby uzyskać optymalną wydajność, zalecamy korzystanie z Layout Inspector w domyślnym trybie wbudowanym. Jeśli chcesz odłączyć Layout Inspector, kliknij File (Plik) (Android Studio na macOS) > Settings (Ustawienia) > Tools (Narzędzia) > Layout Inspector (Layout Inspector) i odznacz pole wyboru Enable embedded Layout Inspector (Włącz wbudowany Layout Inspector).

W trybie samodzielnym włącz aktualizacje na żywo, klikając opcję Live Updates na pasku narzędzi Layout Inspector.

Dodatkowe materiały

Wyświetlanie treści

• Debugowanie układu za pomocą Layout Inspector (Views)