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

Inspektor układu w Android Studio umożliwia debugowanie układu aplikacji przez pokazywanie hierarchii widoków i sprawdzanie właściwości każdego z nich. Dzięki Inspektorowi układu możesz porównywać układ swojej aplikacji z modelami projektu, wyświetlać ją w powiększeniu lub w widoku 3D oraz sprawdzać szczegóły jej układu w czasie działania. Jest to szczególnie przydatne, gdy układ jest stworzony w czasie działania, a nie w całości w formacie XML, a układ działa w nieoczekiwany sposób.

Weryfikacja układu umożliwia jednoczesne wyświetlanie podglądu układów na różnych urządzeniach i konfiguracji wyświetlania (w tym zmiennych rozmiarów czcionek i języków użytkownika), co ułatwia testowanie pod kątem wielu typowych problemów z układem.

Aby otworzyć Inspektora układu, uruchom aplikację na połączonym urządzeniu lub w emulatorze, a potem kliknij Narzędzia > Inspektor układu. Jeśli przełączasz się między wieloma urządzeniami lub projektami, Inspektor układu automatycznie połączy się z procesami, które można debugować, uruchomionymi na pierwszym planie połączonego urządzenia.

Zrzut inspektora układu dla przykładowej aplikacji Sunflower

Rysunek 1. Zrzut inspektora układu dla przykładowej aplikacji Sunflower. Narzędzie Układ Inspektor układu wyświetla (od lewej do prawej): drzewo komponentów, Wyświetlanie układu i Atrybuty.

  • Drzewo komponentów: hierarchia widoków w układzie.
  • Wyświetlanie układu: renderowanie układu aplikacji w takiej postaci, w jakiej pojawia się na urządzeniu lub emulatorze, z granicami układu widocznymi dla każdego widoku.
  • Atrybuty: atrybuty układu dla wybranego widoku danych. Inspektor układu wymaga ponownego uruchomienia działania, aby uzyskać dostęp do atrybutów. Więcej informacji znajdziesz w artykule Ponowne uruchamianie aktywności.

Aby dowiedzieć się więcej o Edytorze układu dla widoków, przeczytaj Wprowadzenie do edytora układu.

Wbudowany inspektor układu (eksperymentalny)

Począwszy w Android Studio Hedgehog, możesz uruchomić Inspektor układu bezpośrednio w oknie narzędzia Działające urządzenia. Ta eksperymentalna funkcja znacznie poprawia wydajność Inspektora układu, oszczędza miejsce na ekranie i pomaga uporządkować proces debugowania interfejsu w jednym oknie narzędzia. Aby włączyć tryb umieszczony:

  • W systemie Windows kliknij Plik > Ustawienia > Funkcja eksperymentalna > Inspektor układu
  • W systemie macOS otwórz Android Studio > Ustawienia > Eksperymentalne > Inspektor układu

Poniżej pokazujemy, jak zacząć i jak wykonać typowe zadania:

  • Aby uruchomić Inspektora układu, otwórz okno Uruchomione urządzenia i kliknij Przełącz inspektora układu Przycisk przełączania umieszczonego inspektora układu.
  • Aby wyświetlić hierarchię i sprawdzić właściwości każdego widoku danych, użyj okien Drzewo komponentów i Panel atrybutów.
  • Aby wybrać widoki danych, klikając je jednym kliknięciem, lub przejść do kodu, klikając je dwukrotnie, włącz Przełącz szczegółową inspekcję Przycisk przełączania szczegółowej inspekcji.
  • Aby korzystać z aplikacji, wyłącz opcję Toggle Deep Invest (Przełącz szczegółową inspekcję) Przycisk przełączania szczegółowej inspekcji.
  • Aby sprawdzić urządzenia fizyczne, włącz powielanie lustrzane urządzeń.
  • Aby użyć trybu 3D, użyj zrzutu inspektora układu Zrzut inspektora układu.

Inspektor układu umieszczonego

Rysunek 2. Wbudowany inspektor układu dla aplikacji Jetchat

Aktualizacje na żywo

Wyświetlanie układu renderuje układ aplikacji tak, jak jest on widoczny na urządzeniu lub emulatorze, a granice układu są widoczne dla każdego widoku. Możesz kliknąć każdy komponent, aby go sprawdzić.

Inspektor układu transmisji na żywo zapewnia pełny wgląd w interfejs aplikacji w czasie rzeczywistym, gdy jest ona wdrażana na urządzeniu lub emulatorze obsługującym interfejs API na poziomie 29 lub wyższym.

Aby włączyć Inspektora układu na żywo, wybierz opcję Aktualizacje na żywo na pasku narzędzi Inspektor układu.

Inspektor układu na żywo zawiera dynamiczną hierarchię układu, która aktualizuje drzewo komponentów i Wyświetlanie układu w zależności od zmiany widoków na urządzeniu.

Wybieranie i izolowanie widoku

Widok zazwyczaj rysuje coś, co użytkownik może zobaczyć i zareagować. Drzewo komponentów pokazuje hierarchię aplikacji w czasie rzeczywistym dla każdego komponentu widoku, co ułatwia debugowanie układu aplikacji, ponieważ umożliwia wizualizację elementów w aplikacji i powiązanych z nimi wartości.

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

Jeśli Twój układ obejmuje nakładające się widoki, możesz wybrać widok, który nie znajduje się na wierzchu, klikając go w drzewie komponentów lub obracając układ.

Aby pracować ze złożonymi układami, możesz wyizolować poszczególne widoki, tak aby tylko część układu była widoczna w drzewie komponentów i renderowana na widoku układu.

Menu Wyizoluj widok

Rysunek 3. Aby wyodrębnić widok, kliknij go prawym przyciskiem myszy w drzewie komponentów i wybierz Pokaż tylko poddrzewo lub Pokaż tylko elementy nadrzędne.

Aby powrócić do pełnego widoku, kliknij go prawym przyciskiem myszy i wybierz Pokaż wszystko.

Ukryj obramowanie układu i wyświetl etykiety

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

Menu opcji wyświetlania

Rysunek 4. Aby ukryć obramowanie układu i wyświetlić etykiety, kliknij drugi przycisk Opcje widoku na pasku narzędzi Inspektor układu.

Tryb 3D

Wyświetlanie układu obejmuje zaawansowaną wizualizację 3D hierarchii widoków aplikacji w czasie działania. Aby użyć tej funkcji, w oknie Inspektora układu na żywo kliknij przycisk Tryb 3D Przycisk 3D i obróć go, przeciągając myszą.

Inspektor układu: widok 3D

Rysunek 5. Obrócono widok 3D układu.

Inspektor układu: widok odstępów warstw

Rysunek 6. Aby rozwinąć lub zwinąć warstwy szablonu, użyj suwaka Odstępy między warstwami.

Porównanie układu aplikacji z nakładką z obrazem referencyjnym

Aby porównać układ aplikacji z obrazem referencyjnym, np. podglądem interfejsu, możesz wczytać nakładkę obrazu bitmapy w Inspektorze układu.

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

Rób zrzuty hierarchii układu

Inspektor układów umożliwia zapisywanie zrzutów hierarchii układu uruchomionej aplikacji, dzięki czemu można je łatwo udostępniać innym osobom lub odwołać się do nich później.

Zrzuty zawierają dane, które zwykle można zobaczyć w Inspektorze układu. Zawierają one szczegółowe renderowanie 3D układu, drzewo komponentów widoku, tworzenia lub układu hybrydowego oraz szczegółowe atrybuty każdego komponentu UI. Aby zapisać zrzut, wykonaj te czynności:

  1. Otwórz inspektora układu
  2. Narzędzie do inspekcji układu automatycznie powinno się połączyć z procesem aplikacji. Jeśli nie, wybierz proces aplikacji z menu.
  3. Aby przechwycić zrzut, kliknij Eksportuj zrzut Ikona eksportowania na pasku narzędzi Inspektora układu.
  4. W wyświetlonym oknie systemowym podaj nazwę i lokalizację zapisania zrzutu. Pamiętaj, by zapisać plik z rozszerzeniem *.li.

Aby wczytać zrzut inspektora układów, wybierz Plik > Otwórz na głównym pasku menu i otwórz plik *.li.

GIF ze zrzutem Inspektora układu

Rysunek 7. Robienie zrzutu w inspektorze układu.

Sprawdź tworzenie wiadomości

Inspektor układu umożliwia sprawdzenie układu tworzenia wiadomości w działającej aplikacji w emulatorze lub na urządzeniu fizycznym. Możesz użyć Inspektora układu, aby sprawdzić, jak często element kompozycyjny jest ponownie tworzony lub pomijany. Pomoże Ci to zidentyfikować problemy z aplikacją. Na przykład niektóre błędy w kodzie mogą zmusić interfejs do zbyt częstego tworzenia nowych elementów, co może obniżyć wydajność. Niektóre błędy w kodzie mogą uniemożliwiać ponowne utworzenie nowego interfejsu, a tym samym zapobiegać wyświetlaniu się zmian w interfejsie na ekranie.

Więcej informacji o Inspektorze układu na potrzeby tworzenia

Unikanie ponownego uruchamiania aktywności

Do prawidłowego działania Inspektor układu wymaga jednego z poniższych ustawień globalnych. Jeśli nie określisz ustawienia globalnego, Inspektor układu automatycznie je ustawi.

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    Ta opcja generuje dodatkowe informacje na potrzeby inspekcji określonego procesu.

  2. adb shell settings put global debug_view_attributes 1

    Ta opcja generuje dodatkowe informacje na potrzeby kontroli dotyczące wszystkich procesów na urządzeniu.

Zmiana ustawienia globalnego może spowodować ponowne uruchomienie aktywności. Aby uniknąć ponownego uruchomienia aktywności, możesz zmienić ustawienia w Android Studio lub Opcje programisty w ustawieniach urządzenia.

Aby włączyć automatyczne odświeżanie w Android Studio, otwórz Konfiguracja uruchamiania/debugowania, wybierając w menu Uruchom > Edytuj konfiguracje. Następnie otwórz kartę Różne i w sekcji Opcje Inspektora układu zaznacz pole Połącz z Inspektorem układu bez ponownego uruchamiania aktywności.

Opcja ponownego uruchamiania aktywności w konfiguracjach uruchamiania

Rysunek 12. Włącz automatyczne odświeżanie w sekcji Konfiguracja uruchamiania/debugowania.

Możesz też włączyć na urządzeniu opcje dla programistów, a potem włączyć Włącz sprawdzanie atrybutów wyświetlania w ustawieniach programisty urządzenia.

Weryfikacja układu

Weryfikacja układu to narzędzie wizualne, które umożliwia jednoczesne wyświetlanie podglądu układów na różnych urządzeniach i konfiguracjach wyświetlacza. Pomaga wychwytywać problemy występujące w układach na wcześniejszym etapie procesu. Aby uzyskać dostęp do tej funkcji, kliknij kartę Sprawdzanie układu w prawym górnym rogu okna IDE:

Zrzut ekranu karty Sprawdzanie układu

Rysunek 13. Sprawdzanie układu.

Aby przełączać się między dostępnymi zestawami konfiguracji, wybierz jedną z tych opcji w menu Urządzenia referencyjne u góry okna Weryfikacja układu:

  • Urządzenia referencyjne
  • Możliwość
  • Użytkownik z daltonizmem
  • Rozmiary czcionek

Zrzut ekranu z menu w narzędziu do sprawdzania poprawności układu

Rysunek 14. Opcja menu referencyjnego Urządzenia.

Urządzenia referencyjne

Urządzenia referencyjne to zestaw urządzeń, które zalecamy w ramach testów. Są to interfejsy na telefonie, urządzeniu składanym, tablecie i komputerze. Sprawdź, jak układ wygląda na tych urządzeniach referencyjnych:

Zrzut ekranu z podglądem układu dla różnych urządzeń referencyjnych

Rysunek 15. Wyświetl podglądy urządzeń w narzędziu do weryfikacji układu.

Możliwość

Aby dostosować konfigurację wyświetlania na potrzeby podglądu, wybierz jedno z wielu ustawień, w tym język, urządzenie i orientację ekranu:

Dostosowywanie wyświetlania urządzenia w narzędziu do weryfikacji układu

Rysunek 16. Skonfiguruj sposób wyświetlania niestandardowego w narzędziu do sprawdzania poprawności układu.

Użytkownik z daltonizmem

Aby ułatwić dostęp do aplikacji użytkownikom z zaburzeniami rozpoznawania barw, zweryfikuj układ swojego układu za pomocą symulacji typowych rodzajów daltonizmu:

Zrzut ekranu z podglądami symulacji różnych typów daltonizmu

Rysunek 17. Podgląd symulacji daltonizmu w narzędziu do walidacji układu.

Rozmiary czcionek

Sprawdź układy przy użyciu różnych rozmiarów czcionek i popraw dostępność aplikacji dla użytkowników z wadą wzroku, testując układy z większymi czcionkami:

podgląd układów aplikacji z różnymi rozmiarami czcionek z widocznymi błędami układu w przypadku dużych czcionek;

Rysunek 18. Podglądy zmiennych rozmiarów czcionek w narzędziu do sprawdzania układu.