Narzędzia do debugowania interfejsu Compose są dostępne w Android Studio.
Layout Inspector
Layout Inspector umożliwia sprawdzanie układu Compose w uruchomionej aplikacji w emulatorze lub na urządzeniu fizycznym. Za pomocą narzędzia Layout Inspector możesz sprawdzić, jak często funkcja kompozycyjna jest rekomponowana lub pomijana, co może pomóc w identyfikowaniu problemów z aplikacją. Na przykład niektóre błędy kodowania 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. Jeśli dopiero zaczynasz korzystać z narzędzia Layout Inspector, zapoznaj się ze wskazówkami dotyczącymi jego uruchamiania.
Uzyskiwanie liczby rekompozycji
Podczas debugowania układów Compose wiedza o tym, kiedy funkcje kompozycyjne rekomponują, jest ważna, aby zrozumieć, czy interfejs jest prawidłowo zaimplementowany. Jeśli na przykład rekompozycja jest wykonywana zbyt wiele razy, aplikacja może wykonywać więcej pracy, niż jest to konieczne. Z drugiej strony komponenty, które nie są rekomponowane, gdy tego oczekujesz, mogą prowadzić do nieoczekiwanych zachowań.
Narzędzie Layout Inspector pokazuje, kiedy poszczególne elementy kompozycyjne w hierarchii układu zostały ponownie skomponowane lub pominięte podczas interakcji z aplikacją. W Android Studio ponowne kompozycje są wyróżnione, aby ułatwić Ci określenie, gdzie w interfejsie elementy kompozycyjne są ponownie komponowane.
Rysunek 1. Rekompilacje są wyróżnione w narzędziu Layout Inspector.
Wyróżniona część pokazuje nakładkę gradientową elementu kompozycyjnego w sekcji obrazu w narzędziu Layout Inspector i stopniowo znika, dzięki czemu możesz zobaczyć, gdzie w interfejsie znajduje się element kompozycyjny z największą liczbą rekompozycji. Jeśli jeden element kompozycyjny jest rekomponowany częściej niż inny, pierwszy z nich otrzymuje mocniejszy kolor nakładki gradientowej. Jeśli klikniesz dwukrotnie element kompozycyjny w narzędziu Layout Inspector, przejdziesz do odpowiedniego kodu do analizy.
Otwórz okno Layout Inspector i połącz się z procesem aplikacji. W drzewie komponentów obok hierarchii układu widoczne są 2 kolumny. Pierwsza kolumna pokazuje liczbę kompozycji dla każdego węzła, a druga kolumna wyświetla liczbę pominięć dla każdego węzła. Wybranie węzła funkcji kompozycyjnej powoduje wyświetlenie jej wymiarów i parametrów, chyba że jest to funkcja wbudowana, w którym to przypadku nie można wyświetlić parametrów. Podobne informacje możesz też zobaczyć w panelu Atrybuty, gdy wybierzesz element kompozycyjny w drzewie komponentów lub w widoku układu.
Zresetowanie liczby może pomóc Ci zrozumieć rekompozycje lub pominięcia podczas konkretnej interakcji z aplikacją. Jeśli chcesz zresetować liczbę, kliknij Resetuj u góry panelu Drzewo komponentów.
Rysunek 3. Włącz licznik kompozycji i pominięć w narzędziu Layout Inspector.
Semantyka tworzenia
W Compose Semantics opisuje interfejs w alternatywny sposób, który jest zrozumiały dla usług ułatwień dostępu i platformy testowej. Możesz użyć narzędzia Layout Inspector, aby sprawdzić informacje semantyczne w układach Compose.
Po wybraniu węzła Compose użyj panelu Atrybuty, aby sprawdzić, czy deklaruje on informacje semantyczne bezpośrednio, scala semantykę z elementów podrzędnych czy wykonuje obie te czynności. Aby szybko określić, które węzły zawierają semantykę (zadeklarowaną lub scaloną), w panelu Drzewo komponentów kliknij menu Opcje wyświetlania i wybierz Wyróżnij warstwy semantyczne. Spowoduje to podświetlenie tylko tych węzłów w drzewie, które zawierają semantykę. Możesz szybko przechodzić między nimi za pomocą klawiatury.
Sprawdzanie interfejsu Compose
Aby pomóc Ci tworzyć bardziej elastyczne i dostępne interfejsy w Jetpack Compose, Android Studio udostępnia tryb sprawdzania interfejsu w podglądzie Compose. Ta funkcja jest podobna do Accessibility Scannera w przypadku widoków.
Gdy aktywujesz tryb sprawdzania interfejsu Compose w podglądzie Compose, Android Studio automatycznie sprawdza interfejs Compose i sugeruje ulepszenia, aby interfejs był bardziej dostępny i elastyczny. Android Studio sprawdza, czy interfejs działa na różnych rozmiarach ekranu. W panelu Problemy narzędzie pokazuje wykryte problemy, takie jak rozciągnięty tekst na dużych ekranach lub niski kontrast kolorów.
Aby uzyskać dostęp do tej funkcji, kliknij ikonę sprawdzania interfejsu w podglądzie Compose:
Sprawdzanie interfejsu automatycznie wyświetla podgląd interfejsu w różnych konfiguracjach i wyróżnia problemy znalezione w różnych konfiguracjach. Gdy w panelu Problemy klikniesz problem, zobaczysz jego szczegóły, sugerowane rozwiązania i renderowania, które wyróżniają obszar problemu.
Napraw za pomocą AI
W przypadku problemów wykrytych w trybie sprawdzania interfejsu możesz użyć agenta AI, aby zaproponować i zastosować poprawki kodu. W panelu Problemy kliknij przycisk Napraw za pomocą AI obok problemu. Agent analizuje problem i kod, aby zaproponować zmiany, które rozwiążą problem z dostępnością lub dostosowaniem.
