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.
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 .
- 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ę .
- Aby korzystać z aplikacji, wyłącz opcję Toggle Deep Invest (Przełącz szczegółową inspekcję) .
- Aby sprawdzić urządzenia fizyczne, włącz powielanie lustrzane urządzeń.
- Aby użyć trybu 3D, użyj zrzutu inspektora układu .
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.
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 u góry wyświetlania układu i przełącz Pokaż obramowanie lub Pokaż etykietę widoku.
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 i obróć go, przeciągając myszą.
Rysunek 5. Obrócono widok 3D układu.
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:
- Otwórz inspektora układu
- Narzędzie do inspekcji układu automatycznie powinno się połączyć z procesem aplikacji. Jeśli nie, wybierz proces aplikacji z menu.
- Aby przechwycić zrzut, kliknij Eksportuj zrzut na pasku narzędzi Inspektora układu.
- 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
.
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.
adb shell settings put global debug_view_attributes_application_package <processname>
Ta opcja generuje dodatkowe informacje na potrzeby inspekcji określonego procesu.
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.
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:
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
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:
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:
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:
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:
Rysunek 18. Podglądy zmiennych rozmiarów czcionek w narzędziu do sprawdzania układu.