In Android Studio sono disponibili strumenti per il debug dell'interfaccia utente di Compose.
Layout Inspector
L'ispettore layout 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 l'ispettore di layout per controllare la frequenza con cui un composable viene ricomposto o saltato, il che può aiutarti a identificare i problemi della tua app. Ad esempio, alcuni errori di codifica potrebbero costringere la UI a ricomporsi eccessivamente, il che può causare prestazioni scadenti. Alcuni errori di codifica possono impedire la ricomposizione dell'interfaccia utente e, di conseguenza, impedire la visualizzazione delle modifiche dell'interfaccia utente sullo schermo. Se non hai mai utilizzato l'ispettore layout, consulta le linee guida su come eseguirlo.
Ottenere i conteggi delle ricostruzioni
Quando esegui il debug dei layout di Compose, è importante sapere quando i composabili si ricompogono per capire se l'interfaccia utente è implementata correttamente. Ad esempio, se si ricompone troppe volte, l'app potrebbe eseguire più lavoro del necessario. D'altra parte, i componenti che non si ricompilano quando prevedi che lo facciano possono portare a comportamenti inaspettati.
L'ispettore layout mostra quando i composabili distinti nella gerarchia del layout vengono ricompositi o ignorati mentre interagisci con l'app. In Android Studio, le ricostruzioni vengono evidenziate per aiutarti a determinare dove nell'interfaccia utente vengono ricompositi i composabili.
Figura 1. Le ricostruzioni vengono evidenziate in Layout Inspector.
La parte evidenziata mostra un overlay con gradiente del composable nella sezione Immagine dell'ispezione del layout e scompare gradualmente per consentirti di avere un'idea di dove si trova nell'interfaccia utente il composable con il maggior numero di ricostruzioni. Se un composable si ricompone a una frequenza superiore a un altro, il primo composable riceve un colore di overlay con gradiente più intenso. Se fai doppio clic su un composable nell'ispettore del layout, viene visualizzato il codice corrispondente per l'analisi.
Apri la finestra Visualizzatore layout 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. La selezione di un nodo componibile mostra le dimensioni e i parametri del componibile, a meno che non si tratti di una funzione in linea, nel qual caso i parametri non possono essere mostrati. Puoi anche visualizzare informazioni simili nel riquadro Attributi quando selezioni un composable dalla Struttura ad albero dei componenti o dalla Visualizzazione layout.
La reimpostazione del conteggio può aiutarti a comprendere le ricostruzioni 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 composizioni e salti in Layout Inspector.
Semantica di composizione
In Compose, le semantiche descrivono l'interfaccia utente in un modo alternativo comprensibile per i servizi di accessibilità e per il framework di test. Puoi utilizzare l'ispettore di layout per esaminare le informazioni semantiche nei layout di Compose.
Figura 4. Informazioni semantiche visualizzate utilizzando lo strumento di controllo del layout.
Quando selezioni un nodo Compose, utilizza il riquadro Attributi per verificare se dichiara direttamente le informazioni semantiche, unisce la semantica dei suoi nodi figlio 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 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 di loro.
Controllo dell'interfaccia utente di Componi
Per aiutarti a creare UI più adattabili e accessibili in Jetpack Compose, Android Studio fornisce una modalità di controllo dell'interfaccia utente in Anteprima di Compose. Questa funzionalità è simile a 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 l'interfaccia utente funzioni su diverse dimensioni dello schermo. Nel riquadro Problemi, lo strumento mostra i problemi rilevati, ad esempio testo allungato su schermi di grandi dimensioni o basso contrasto di colore.
Per accedere a questa funzionalità, fai clic sull'icona di controllo dell'interfaccia utente in Anteprima composizione:
Il controllo dell'interfaccia utente mostra automaticamente l'anteprima dell'interfaccia utente in configurazioni diverse e evidenzia i problemi rilevati in queste configurazioni. Nel riquadro Problemi, quando fai clic su un problema, puoi visualizzarne i dettagli, le correzioni suggerite e i rendering che ne evidenziano l'area.
