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 esaminare gli attributi di ogni componente, confrontare il layout dell'app con i mockup di progettazione e visualizzare una vista ingrandita dell'app.

android layout

Puoi anche utilizzare Layout Inspector per controllare la frequenza con cui un composable 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 tua UI, il che può causare un rendimento scarso. Alcuni errori di codifica possono impedire la ricomposizione della UI e, di conseguenza, la visualizzazione delle modifiche alla UI sullo schermo.

Per saperne di più, consulta Eseguire il debug della 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 del dispositivo connesso.

Ecco come eseguire alcune attività comuni:

• Per visualizzare la gerarchia di oggetti View e controllare 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 analisi approfondita e poi fai clic sui componenti. In alternativa, vai al codice facendo doppio clic sui componenti.
• Per interagire con l'app, disattiva Attiva/disattiva analisi approfondita .
• Per ispezionare 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 live sia attivata.

Selezionare o isolare un componente

Un componente 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 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 layout. Tutti gli attributi di layout per il componente selezionato vengono visualizzati nel riquadro Attributi.

Se il layout include componenti sovrapposti, puoi visualizzare tutti i componenti in una regione quando fai clic con il tasto destro del mouse in modalità Ispezione approfondita . Per selezionare un componente che non si trova 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 visualizzato nel display 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 di un elemento del layout, fai clic su 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 vedi quando utilizzi Layout Inspector, inclusa una visualizzazione dettagliata del layout, l'albero dei componenti del layout Compose, View o ibrido e gli attributi dettagliati per ogni componente della tua 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.

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'interfaccia utente, puoi caricare una sovrapposizione di immagini bitmap in Layout Inspector.

• Per caricare un overlay, seleziona l'opzione Carica overlay dalla barra degli strumenti Ispettore layout. 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.

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

Risorse aggiuntive

Visualizza contenuti

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