Esegui il debug del layout con Layout Inspector

Layout Inspector in Android Studio ti consente di eseguire il debug del layout della tua app mostrando una gerarchia di visualizzazione in cui puoi esaminare le proprietà di ogni visualizzazione. Con Layout Inspector, puoi confrontare il layout dell'app con i mockup di progettazione, visualizzare una vista ingrandita o 3D dell'app ed esaminare i dettagli del layout in runtime. Ciò è particolarmente utile quando il layout viene creato in fase di runtime anziché interamente in XML e il layout si comporta in modo imprevisto.

Figura 1. Layout Inspector incorporato per l'app Jetchat.

Inizia

Per avviare lo strumento di controllo del layout, esegui l'app, vai alla finestra Dispositivi in esecuzione e fai clic su Attiva/disattiva lo strumento di controllo del layout Pulsante di attivazione/disattivazione dello strumento di ispezione del layout incorporato. Se passi da un dispositivo o progetto all'altro, Layout Inspector si connette automaticamente ai processi di cui è possibile eseguire il debug in esecuzione in primo piano del dispositivo connesso.

Ecco come eseguire alcune attività comuni:

  • Per visualizzare la gerarchia e controllare le proprietà di ogni visualizzazione, utilizza le finestre degli strumenti Albero dei componenti e Attributi. Layout Inspector potrebbe richiedere il riavvio di un'attività per accedere agli attributi. Per saperne di più, consulta Visualizzare l'ispezione degli attributi.
  • Per selezionare le visualizzazioni con un solo clic direttamente sulle visualizzazioni o per passare al codice facendo doppio clic sulle visualizzazioni, attiva Attiva/disattiva ispezione approfondita Pulsante di attivazione/disattivazione dell'ispezione approfondita.
  • Per interagire con l'app, disattiva Attiva/disattiva analisi approfondita Pulsante di attivazione/disattivazione dell'ispezione approfondita.
  • Per esaminare i dispositivi fisici, attiva il mirroring del dispositivo.
  • Per attivare gli aggiornamenti in tempo reale durante l'aggiornamento della UI dell'app, verifica che Modifica in tempo reale sia attivata.
  • Per utilizzare la modalità 3D, acquisisci uno snapshot di Layout Inspector Snapshot di Layout Inspector e poi fai clic su Modalità 3D Pulsante 3D.

Selezionare o isolare una visualizzazione

Una visualizzazione di solito disegna qualcosa che l'utente può vedere e con cui può interagire. L'albero dei componenti mostra la gerarchia della tua app in tempo reale con ogni componente di visualizzazione, il che ti aiuta a eseguire il debug del layout dell'app perché puoi visualizzare gli elementi all'interno dell'app e i valori associati.

Per selezionare una visualizzazione, fai clic su di essa nell'albero dei componenti o nella visualizzazione layout. Tutti gli attributi di layout per la visualizzazione selezionata vengono visualizzati nel riquadro Attributi.

Se il layout include viste sovrapposte, puoi visualizzare tutte le viste in una regione quando fai clic con il tasto destro del mouse in modalità Ispezione approfondita Pulsante di attivazione/disattivazione dell'ispezione approfondita. Per selezionare una visualizzazione che non è in primo piano, fai clic su di essa nell'albero dei componenti o ruota il layout.

Per lavorare con layout complessi, puoi isolare le singole visualizzazioni in modo che solo un sottoinsieme del layout venga mostrato nell'albero dei componenti e visualizzato nel display del layout. Per isolare una visualizzazione, scatta un'istantanea Snapshot di Layout Inspector, fai clic con il tasto destro del mouse sulla visualizzazione nell'albero dei componenti e seleziona Mostra solo sottoalbero o Mostra solo genitori. Per tornare alla visualizzazione completa, fai clic con il tasto destro del mouse sulla visualizzazione e seleziona Mostra tutto. Devi creare uno snapshot prima di isolare una visualizzazione.

Nascondere i bordi del layout e visualizzare le etichette

Per nascondere il riquadro di selezione o visualizzare le etichette di un elemento del layout, fai clic su Opzioni visualizzazione Pulsante Opzioni di visualizzazione nella parte superiore di Visualizzazione layout e attiva/disattiva Mostra bordi o Mostra etichetta visualizzazione.

Acquisire snapshot della gerarchia del layout

Layout Inspector ti consente di salvare snapshot della gerarchia del layout dell'app in esecuzione, in modo da poterli condividere con altri o consultarli in un secondo momento.

Gli snapshot acquisiscono i dati che in genere vengono visualizzati quando si utilizza Layout Inspector, inclusa una rappresentazione 3D dettagliata del layout, l'albero dei componenti del layout View, Compose o ibrido e gli attributi dettagliati per ogni componente della UI. Per salvare uno snapshot, fai clic su Esportazione/importazione snapshot Esportazione/importazione di snapshot e poi su Esporta snapshot.

Carica uno snapshot di Layout Inspector salvato in precedenza facendo clic su Importa snapshot.

Modalità 3D

La funzionalità Layout Display offre una visualizzazione 3D avanzata della gerarchia delle visualizzazioni della tua app in fase di runtime. Per utilizzare questa funzionalità, scatta un'istantanea Esportazione/importazione di snapshot, fai clic sul pulsante Modalità 3D Pulsante 3D nella finestra dell'inspector dell'istantanea e ruotala trascinando il mouse.

Layout Inspector: visualizzazione 3D
Figura 2. Visualizzazione 3D ruotata di un layout.
Layout Inspector: layer spacing view
Figura 3. Per espandere o comprimere i livelli del layout, utilizza il cursore Spaziatura livelli.

Confrontare il layout dell'app con l'overlay di un'immagine di riferimento

Per confrontare il layout dell'app con un'immagine di riferimento, ad esempio un mockup dell'interfaccia utente, puoi caricare un overlay di immagini bitmap in Layout Inspector.

  • Per caricare un overlay, seleziona l'opzione Carica overlay dalla barra degli strumenti Layout Inspector. L'overlay viene scalato per adattarsi al layout.
  • Per regolare la trasparenza della sovrapposizione, usa il cursore Alpha sovrapposizione.
  • Per rimuovere l'overlay, fai clic su Cancella overlay

Ispeziona Scrivi

Layout Inspector ti consente di esaminare un layout di Compose all'interno di un'app in esecuzione in 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 della tua app. Ad esempio, alcuni errori di codifica potrebbero forzare la ricomposizione eccessiva della tua UI, causando un rendimento scarso. Alcuni errori di codifica possono impedire la ricomposizione della UI e, di conseguenza, la visualizzazione delle modifiche sullo schermo.

Scopri di più su Layout Inspector per Compose

Visualizza controllo attributi

Layout Inspector richiede la seguente impostazione globale per funzionare correttamente:

adb shell settings put global debug_view_attributes 1

Questa opzione genera informazioni aggiuntive per l'ispezione di tutti i processi sul dispositivo.

Layout Inspector attiva automaticamente l'impostazione all'avvio. In questo modo l'attività in primo piano corrente viene riavviata. Non vedrai un altro riavvio dell'attività a meno che il flag non venga disattivato manualmente sul dispositivo.

Per disattivare il flag, esegui il seguente comando adb:

adb shell settings delete global debug_view_attributes

In alternativa, disattiva l'opzione Attiva controllo attributi visualizzazione dalle opzioni sviluppatore del dispositivo.

Layout Inspector autonomo

Per prestazioni ottimali, ti consigliamo di utilizzare lo strumento di ispezione del layout nella modalità incorporata predefinita. Se vuoi annullare l'incorporamento di Layout Inspector, vai a File (Android Studio su macOS)> Impostazioni > Strumenti > Layout Inspector e deseleziona la casella di controllo Attiva Layout Inspector incorporato.

In modalità autonoma, attiva gli aggiornamenti in tempo reale facendo clic sull'opzione Aggiornamenti in tempo reale dalla barra degli strumenti Ispettore layout.