Esegui il debug del layout con Layout Inspector

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.

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

Inizia

Per avviare Layout Inspector, esegui l'app, vai alla finestra Running Devices e fai clic su Toggle Layout Inspector Pulsante
di attivazione/disattivazione
del controllo 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 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 Pulsante di attivazione/disattivazione
ispezione approfondita, 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) Pulsante di attivazione/disattivazione
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 Attiva/disattiva il pulsante
Analizza in dettaglio. 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 Pulsante 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 Snapshot
Esportazione/importazione 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.

Risorse aggiuntive

Visualizzare i contenuti