In Android Studio sono disponibili strumenti per il debug della UI di Compose.
Layout Inspector
Layout Inspector ti consente di ispezionare un layout di Compose all'interno di un'app in esecuzione su un emulatore o un dispositivo fisico. Puoi utilizzare Layout Inspector per verificare la frequenza con cui un elemento componibile viene ricomposto o ignorato, il che può aiutarti a identificare i problemi con la tua app. Ad esempio, alcuni errori di codifica potrebbero forzare la ricomposizione eccessiva della UI, causando un calo delle prestazioni. Alcuni errori di codifica possono impedire la ricomposizione della UI e, di conseguenza, impedire che le modifiche alla UI vengano visualizzate sullo schermo. Se non hai mai utilizzato Layout Inspector, consulta le indicazioni su come eseguirlo.
Visualizzare i conteggi delle ricomposizioni
Quando esegui il debug dei layout di Compose, è importante sapere quando gli elementi componibili vengono ricomposti per capire se la UI è implementata correttamente. Ad esempio, se viene ricomposta troppe volte, l'app potrebbe eseguire più operazioni del necessario. D'altra parte, i componenti che non vengono ricomposti quando ti aspetti che lo facciano possono portare a comportamenti imprevisti.
Layout Inspector ti mostra quando gli elementi componibili discreti nella gerarchia dei layout sono stati ricomposti o ignorati durante l'interazione con l'app. In Android Studio, le ricomposizioni vengono evidenziate per aiutarti a determinare in quale punto della UI vengono ricomposti gli elementi componibili.
Figura 1. Le ricomposizioni sono evidenziate in Layout Inspector.
La parte evidenziata mostra una sovrapposizione sfumata dell'elemento componibile nella sezione delle immagini di Layout Inspector e scompare gradualmente, in modo che tu possa farti un'idea di dove si trova nella UI l'elemento componibile con il maggior numero di ricomposizioni. Se un elemento componibile viene ricomposto a una velocità superiore rispetto a un altro, il primo riceve un colore di sovrapposizione sfumato più intenso. Se fai doppio clic su un elemento componibile in Layout Inspector, viene visualizzato il codice corrispondente per l'analisi.
Apri la finestra Layout Inspector e connettiti al processo dell'app. Nell' albero dei componenti sono presenti due colonne accanto alla gerarchia dei layout. La prima colonna mostra il numero di composizioni per ogni nodo, mentre la seconda mostra il numero di ignorazioni per ogni nodo. Se selezioni un nodo componibile, vengono visualizzate le dimensioni e i parametri dell'elemento componibile, a meno che non si tratti di una funzione inline, nel qual caso i parametri non possono essere visualizzati. Puoi anche visualizzare informazioni simili nel riquadro Attributi quando selezioni un elemento componibile dall'albero dei componenti o dalla visualizzazione del layout.
La reimpostazione del conteggio può aiutarti a comprendere le ricomposizioni o le ignorazioni durante un'interazione specifica con l'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 ignorazioni in Layout Inspector.
Semantica di Compose
In Compose, la semantica descrive la UI in modo alternativo, comprensibile per i servizi di accessibilità e per il framework di test. Puoi utilizzare Layout Inspector per ispezionare 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, unisce la semantica dei relativi figli o entrambe le cose. Per identificare rapidamente i nodi che includono la semantica, dichiarata o unita, seleziona il menu a discesa Opzioni di visualizzazione nel riquadro Albero dei componenti e seleziona Evidenzia livelli semantici. In questo modo vengono evidenziati solo i nodi dell'albero che includono la semantica e puoi utilizzare la tastiera per spostarti rapidamente tra di essi.
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 in Anteprima di Compose. Questa funzionalità è simile a Accessibility Scanner per le visualizzazioni.
Quando attivi la modalità di controllo della UI di Compose in Anteprima di Compose, Android Studio esegue automaticamente il controllo della UI 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 rilevati, ad esempio il testo allungato su schermi di grandi dimensioni o il contrasto di colore basso.
Per accedere a questa funzionalità, fai clic sull'icona Controllo UI in Anteprima di Compose:
Il controllo della UI visualizza automaticamente l'anteprima della UI in configurazioni diverse ed evidenzia i problemi riscontrati in configurazioni diverse. 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 i problemi con l'AI
Per i problemi rilevati nella modalità di controllo della UI, puoi utilizzare l'agente AI per proporre e applicare correzioni del codice. Fai clic sul pulsante Risolvi i problemi con l'AI su un problema nel riquadro Problemi. L'agente analizza il problema e il codice per suggerire modifiche che risolvano il problema di accessibilità o adattabilità.
