Esegui il debug del layout con Layout Inspector

Layout Inspector in Android Studio ti 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.

android layout

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 un rendimento scadente. 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 Dispositivi in esecuzione e fai clic su Attiva/disattiva Layout Inspector . Se passi da un dispositivo o progetto all'altro, Layout Inspector si connette automaticamente ai processi abilitati al 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 Albero dei componenti e Attributi. Layout Inspector potrebbe richiedere il riavvio di un'attività per accedere agli attributi.
• Per selezionare i componenti, attiva prima Attiva/disattiva ispezione approfondita , quindi fai clic sui componenti. In alternativa, vai al codice facendo doppio clic sui componenti.
• Per interagire con l'app, disattiva 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, assicurati che la modifica live sia attivata.

Seleziona o isola 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.

Nascondi i bordi del layout e visualizza 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 della visualizzazione.

Acquisisci 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, inclusi un rendering dettagliato del layout, l'albero dei componenti del layout di Compose, View o ibrido e gli attributi dettagliati per ogni componente dell'UI. Per salvare uno snapshot, fai clic su Esportazione/importazione snapshot e poi su Esporta snapshot.

Per caricare uno snapshot di Layout Inspector salvato in precedenza, fai clic su Importa snapshot.

Confronta 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 una overlay immagine bitmap in Layout Inspector.

• Per caricare una sovrapposizione, seleziona l'opzione Carica sovrapposizione dalla barra degli strumenti di Layout Inspector. La sovrapposizione viene scalata per adattarsi al layout.
• Per regolare la trasparenza della sovrapposizione, utilizza il cursore Alfa sovrapposizione.
• Per rimuovere la sovrapposizione, fai clic su Cancella sovrapposizione.

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 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 di Layout Inspector.

Risorse aggiuntive

Visualizza contenuti

• Eseguire il debug del layout con Layout Inspector (Visualizzazioni)