Gli strumenti per il debug della UI di Compose sono disponibili in Android Studio.
Layout Inspector
Layout Inspector ti consente di ispezionare un layout di Compose all'interno di un'app in esecuzione in un emulatore o su un dispositivo fisico. Puoi utilizzare Layout Inspector per verificare la frequenza con cui un componibile viene ricomposto o ignorato, il che può aiutarti a identificare i problemi della tua app. Ad esempio, alcuni errori di programmazione potrebbero forzare la ricomposizione eccessiva della UI, il che può causare prestazioni scadenti. Alcuni errori di programmazione possono impedire la ricomposizione della UI e, di conseguenza, la visualizzazione delle modifiche alla UI sullo schermo. Se non hai mai utilizzato Layout Inspector, consulta le indicazioni su come eseguirlo.
Ottieni i conteggi di ricomposizione
Durante il debug dei layout di Compose, sapere quando i componibili vengono ricomposti è importante per capire se la UI è implementata correttamente. Ad esempio, se la ricomposizione avviene troppe volte, l'app potrebbe eseguire più lavoro del necessario. D'altra parte, i componenti che non si ricompongono quando ti aspetti che lo facciano possono causare comportamenti imprevisti.
Layout Inspector mostra quando i singoli componibili nella gerarchia del layout sono stati ricomposti o ignorati mentre interagisci con l'app. In Android Studio, le ricomposizioni vengono evidenziate per aiutarti a determinare dove si trovano i componibili nella UI.
Figura 1. Le ricomposizioni sono evidenziate in Layout Inspector.
La parte evidenziata mostra un overlay con gradiente del componibile nella sezione dell'immagine di Layout Inspector e scompare gradualmente in modo da darti un'idea di dove si trova nella UI il componibile con il maggior numero di ricomposizioni. Se un componibile viene ricomposto a una frequenza superiore rispetto a un altro componibile, il primo riceve un colore di overlay con gradiente più intenso. Se fai doppio clic su un componibile in Layout Inspector, viene visualizzato il codice corrispondente per l'analisi.
Apri la finestra di Layout Inspector e connettiti al processo dell'app. Nell'albero dei componenti, accanto alla gerarchia del layout vengono visualizzate due colonne. La prima colonna mostra il numero di composizioni per ogni nodo e la seconda colonna mostra il numero di salti per ogni nodo. Se selezioni un nodo componibile, vengono visualizzate le dimensioni e i parametri del componibile, a meno che non si tratti di una funzione incorporata, nel qual caso i parametri non possono essere visualizzati. Puoi anche visualizzare informazioni simili nel riquadro Attributi quando selezioni un componibile dall'albero dei componenti o dalla visualizzazione del layout.
La reimpostazione del conteggio può aiutarti a comprendere le ricomposizioni o i salti durante un'interazione specifica con la tua app. Se vuoi reimpostare il conteggio, fai clic su Reimposta nella parte superiore del riquadro Albero dei componenti.
Figura 3. Attiva il contatore di composizione e salto in Layout Inspector.
Semantica di Compose
In Compose, la semantica descrive la tua UI in un modo alternativo comprensibile per i servizi di accessibilità e per il framework di test. Puoi utilizzare Layout Inspector per esaminare le informazioni semantiche nei layout di Compose.
Quando selezioni un nodo di Compose, utilizza il riquadro Attributi per verificare se dichiara direttamente le informazioni semantiche, se unisce la semantica dei relativi nodi secondari o entrambe le cose. Per identificare rapidamente i nodi che includono la semantica, dichiarata o unita, utilizza il menu a discesa Opzioni di visualizzazione nel riquadro Albero dei componenti e seleziona Evidenzia i livelli di semantica. In questo modo vengono evidenziati solo i nodi dell'albero che includono la semantica e puoi utilizzare la tastiera per spostarti rapidamente tra i nodi.
Controllo UI di Compose
Per aiutarti a creare UI più adattabili e accessibili in Jetpack Compose, Android Studio fornisce una modalità di controllo della UI nell'anteprima di Compose. Questa funzionalità è simile ad Accessibility Scanner per le visualizzazioni.
Quando attivi la modalità di controllo dell'interfaccia utente di Compose in un'anteprima di Compose, Android Studio controlla automaticamente l'interfaccia utente di Compose e suggerisce miglioramenti per renderla più accessibile e adattabile. Android Studio verifica che la UI funzioni su schermi di dimensioni diverse. Nel riquadro Problemi, lo strumento mostra i problemi che rileva, ad esempio testo allungato su schermi di grandi dimensioni o contrasto di colore basso.
Per accedere a questa funzionalità, fai clic sull'icona Controllo UI nell'anteprima di Compose:
UI Check visualizza automaticamente l'anteprima della UI in diverse configurazioni ed evidenzia i problemi rilevati. Nel riquadro Problemi, quando fai clic su un problema, puoi visualizzarne i dettagli, le correzioni suggerite e i rendering che evidenziano l'area del problema.
Risolvi con l'AI
Per i problemi rilevati in modalità Controllo UI, puoi utilizzare l'agente AI per proporre e applicare correzioni del codice dell'applicazione. Fai clic sul pulsante Correggi con l'AI su un problema nel riquadro Problemi. L'agente analizza il problema e il codice per suggerire modifiche che risolvono il problema di accessibilità o adattabilità.
