Narzędzia do debugowania interfejsu Compose są dostępne w Android Studio.
Inspektor układu
Kontroler układu umożliwia sprawdzanie układu w Compose w uruchomionej aplikacji w emulatorze lub na urządzeniu fizycznym. Za pomocą narzędzia do sprawdzania układu możesz sprawdzić, jak często kompozyt jest ponownie składany lub pomijany. Może to pomóc w zidentyfikowaniu problemów z aplikacją. Na przykład niektóre błędy kodowania mogą powodować nadmierne ponowne składanie interfejsu użytkownika, co może prowadzić do niskiej wydajności. Niektóre błędy w kodzie mogą uniemożliwiać ponowne skompilowanie interfejsu, przez co zmiany w interfejsie nie będą widoczne na ekranie. Jeśli dopiero zaczynasz korzystać z inspektora układu, zapoznaj się z tymi wskazówkami dotyczącymi jego uruchamiania.
Pobieranie liczby elementów do ponownego złożenia
Podczas debugowania układów kompozytowych ważne jest, aby wiedzieć, kiedy komponenty są ponownie tworzone. Pozwoli Ci to zrozumieć, czy interfejs jest prawidłowo zaimplementowany. Jeśli na przykład jest ona zbyt często rekomponowana, aplikacja może wykonywać więcej pracy niż to konieczne. Z drugiej strony komponenty, które nie są ponownie składane zgodnie z oczekiwaniami, mogą powodować nieoczekiwane działanie.
W wyświetlanym oknie Inspekcja układu możesz sprawdzić, czy podczas interakcji z aplikacją poszczególne komponenty w hierarchii układu zostały przekomponowane lub pominięte. W Android Studio przekompilowane komponenty są wyróżnione, aby ułatwić Ci określenie, w której części interfejsu użytkownika są przekomponowane.
Rysunek 1. Rekompozycje są wyróżnione w inspektorze układu.
Zaznaczona część pokazuje w sekcji Obraz w inspektorze układu gradientowe nakładanie komponentu, który stopniowo znika, aby można było zobaczyć, gdzie w interfejsie znajduje się komponent z największą liczbą rekompozycji. Jeśli jeden komponent składany jest przekształcany z większą szybkością niż inny, pierwszy z nich otrzyma mocniejszą barwę gradientu nakładki. Jeśli klikniesz dwukrotnie kompozyt w inspektorze układu, zostaniesz przekierowany do odpowiedniego kodu na potrzeby analizy.
Otwórz okno Wykrywacz układu i połącz się z procesem aplikacji. W drzewie komponentów obok hierarchii układu są widoczne 2 kolumny. Pierwsza kolumna zawiera liczbę utworów w każdym węźle, a druga – liczbę pomijań w każdym węźle. Po wybraniu węzła składanego wyświetlane są wymiary i parametry składanego, chyba że jest to funkcja wbudowana, w którym to przypadku parametry nie są wyświetlane. Podobne informacje możesz też zobaczyć w panelu Atrybuty, gdy wybierzesz kompozytywny element w drzewie komponentów lub w oknie Wyświetlanie układu.
Zliczanie można zresetować, aby lepiej zrozumieć, jak często użytkownicy zmieniają kompozycję lub przewijają treści podczas konkretnej interakcji z aplikacją. Aby zresetować zliczanie, kliknij Zresetuj u góry panelu Drzewo komponentów.
Rysunek 3. Włącz w Layout Inspector kompozycję i licznik pomijania.
Semantyka
W Compose semantyka opisuje interfejs użytkownika w sposób alternatywny, zrozumiały dla usług ułatwień dostępu i ramy testowania. Za pomocą narzędzia do inspekcji układu możesz sprawdzić informacje semantyczne w układach tworzenia wiadomości.
Rysunek 4 Informacje semantyczne wyświetlane za pomocą inspektora układu.
Wybierając węzeł Compose, użyj panelu Atrybuty, aby sprawdzić, czy deklaruje on informacje semantyczne bezpośrednio, czy zlewa semantykę z węzłów podrzędnych, czy też robi jedno i drugie. Aby szybko określić, które węzły zawierają semantyczne deklaracje lub złączenie, w panelu Drzewo komponentów kliknij menu Opcje widoku i wybierz Zaznacz warstwy semantyczne. W ten sposób wyróżniane są tylko węzły w drzewie, które zawierają semantykę. Możesz szybko poruszać się między nimi za pomocą klawiatury.
Sprawdzanie interfejsu tworzenia
Aby ułatwić tworzenie bardziej dostosowujących się i dostępnych interfejsów w Jetpack Compose, Android Studio udostępnia w podglądzie Compose tryb sprawdzania interfejsu. Ta funkcja jest podobna do Accessibility Scanner.
Gdy aktywujesz tryb sprawdzania interfejsu Compose w ramach podglądu Compose, Android Studio automatycznie sprawdzi interfejs Compose i zaproponuje ulepszenia, które ułatwią jego obsługę i dostosowanie. Android Studio sprawdza, czy interfejs działa na różnych rozmiarach ekranu. W panelu Problemy narzędzie wyświetla wykryte problemy, takie jak tekst rozciągnięty na dużych ekranach lub niski kontrast kolorów.
Aby uzyskać dostęp do tej funkcji, kliknij ikonę sprawdzania interfejsu w podglądzie tworzenia:
Sprawdzanie interfejsu użytkownika automatycznie wyświetla podgląd interfejsu w różnych konfiguracjach i wyróżnia problemy znalezione w różnych konfiguracjach. Po kliknięciu problemu w panelu Problemy możesz zobaczyć szczegóły problemu, sugerowane poprawki i renderowania, które wskazują obszar problemu.
