Layout Inspector in Android Studio consente di ispezionare ed eseguire il debug del layout all'interno di un'app in esecuzione in un emulatore o su un dispositivo fisico. Puoi ispezionare gli attributi di ogni componente, confrontare il layout dell'app con i mockup di progettazione e visualizzare una visualizzazione ingrandita dell'app.
Puoi anche 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 dell'UI, causando prestazioni scadenti. Alcuni errori di codifica possono impedire la ricomposizione dell'UI e, di conseguenza, impedire la visualizzazione delle modifiche dell'UI sullo schermo.
Per ulteriori informazioni, consulta Eseguire il debug dell'UI di Compose.
Inizia
Per avviare Layout Inspector, esegui l'app, vai alla finestra
Running Devices e fai clic su Toggle Layout Inspector
. 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 sul dispositivo connesso.
Ecco come eseguire alcune attività comuni:
- Per visualizzare la gerarchia di oggetti View e ispezionare gli attributi di ogni componente, utilizza le finestre degli strumenti Component Tree (Albero dei componenti) e Attributes (Attributi). Layout Inspector potrebbe richiedere il riavvio di un'attività per accedere agli attributi.
- Per selezionare i componenti, attiva prima Toggle Deep Inspect
, quindi fai clic sui
componenti. In alternativa, vai al codice facendo doppio clic sui componenti. - Per interagire con l'app, disattiva Toggle Deep Inspect (Attiva/disattiva ispezione approfondita)
. - Per ispezionare i dispositivi fisici, attiva il mirroring del dispositivo.
- Per attivare gli aggiornamenti in tempo reale durante l'aggiornamento dell'UI dell'app, verifica che Live Edit sia attivato.
Selezionare o isolare un componente
Un componente in genere disegna qualcosa che l'utente può vedere e con cui può interagire. L'albero dei componenti mostra la gerarchia dell'app in tempo reale con ogni componente componibile, 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 un componente, fai clic su di esso nell'albero dei componenti o nella visualizzazione del layout. Tutti gli attributi del layout per il componente selezionato vengono visualizzati nel riquadro Attributi.
Se il layout include componenti sovrapposti, puoi visualizzare tutti i componenti
in una regione facendo clic con il tasto destro del mouse in modalità Ispezione approfondita
. Per selezionare un componente che non è in primo piano, fai clic su di esso nell'albero dei componenti.
Per lavorare con layout complessi, puoi isolare i singoli componenti in modo che solo un sottoinsieme del layout venga mostrato nell'albero dei componenti e sottoposto a rendering nella visualizzazione del layout. Per isolare un componente, fai clic con il tasto destro del mouse sul componente 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 sul componente e seleziona Mostra tutto.
Nascondere i bordi del layout e visualizzare le etichette
Per nascondere il riquadro di delimitazione o le etichette dei componenti per un elemento di layout, fai clic su
Opzioni di visualizzazione
nella parte superiore della visualizzazione del 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, tra cui un rendering dettagliato del layout, l'albero dei componenti del layout di Compose, View o ibrido e gli attributi dettagliati di ogni componente dell'UI. Per salvare uno snapshot, fai clic su Esportazione/importazione snapshot
e poi su
Esporta snapshot.
Carica uno snapshot di Layout Inspector salvato in precedenza facendo clic su Importa snapshot.
Confrontare il layout dell'app con un overlay immagine di riferimento
Per confrontare il layout dell'app con un'immagine di riferimento, ad esempio un mockup dell'UI, puoi caricare un overlay immagine bitmap in Layout Inspector.
- Per caricare un overlay, seleziona l'opzione Carica overlay
dalla barra degli strumenti di Layout Inspector. L'overlay viene scalato per adattarsi al layout. - Per regolare la trasparenza dell'overlay, utilizza il cursore Overlay Alpha.
- Per rimuovere l'overlay, fai clic su Cancella overlay.

Layout Inspector autonomo
Per prestazioni ottimali, ti consigliamo di utilizzare Layout Inspector 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 Enable embedded Layout Inspector (Attiva Layout Inspector incorporato).
In modalità autonoma, attiva gli aggiornamenti in tempo reale facendo clic sull'opzione Live Updates
dalla barra degli strumenti di Layout Inspector.