Esegui il debug del layout con Layout Inspector

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

Per informazioni sull'editor di layout per le visualizzazioni, consulta Introduzione all'editor di layout.

Figura 1. Controllo layout incorporato per l'app Jetchat.

Inizia

Per avviare il Controllo layout, esegui l'app, vai alla finestra Dispositivi in esecuzione e fai clic su Attiva/disattiva Controllo layout Attiva/disattiva il pulsante di controllo 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 svolgere alcune attività comuni:

  • Per visualizzare la gerarchia ed esaminare le proprietà di ogni vista, utilizza le finestre dello strumento Struttura ad albero dei componenti e Attributi. Il controllo del layout potrebbe richiedere il riavvio dell'attività per accedere agli attributi. Per maggiori informazioni, consulta Evitare il riavvio delle attività.
  • Per selezionare le viste facendo clic direttamente sulle viste o passare al codice facendo doppio clic sulle viste, attiva Attiva/disattiva ispezione approfondita Pulsante di attivazione/disattivazione dell'ispezione approfondita.
  • Per interagire con l'app, disabilita Attiva/disattiva Ispezione approfondita Pulsante di attivazione/disattivazione dell'ispezione approfondita.
  • Per ispezionare i dispositivi fisici, attiva il Mirroring dei dispositivi.
  • Per attivare gli aggiornamenti in tempo reale mentre aggiorni l'interfaccia utente della tua app, verifica che la funzionalità Live Edit sia attiva.
  • Per utilizzare la modalità 3D, acquisisci un'istantanea di Layout Inspector Istantanea di Layout Inspector e poi fai clic su Modalità 3D Pulsante 3D.

Selezionare o isolare una vista

Una vista solitamente disegna qualcosa che l'utente può vedere e con cui può interagire. La struttura dei componenti mostra la gerarchia dell'app in tempo reale con ogni componente di vista, consentendoti di 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 nella struttura dei componenti o nella visualizzazione del layout. Tutti gli attributi di layout per la vista selezionata vengono mostrati nel riquadro Attributi,

Se il layout include visualizzazioni sovrapposte, puoi vedere tutte le visualizzazioni di una regione facendo 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 nella struttura ad albero dei componenti o ruota il layout.

Per lavorare con layout complessi, puoi isolare singole viste in modo che solo un sottoinsieme del layout sia mostrato nella struttura dei componenti e venga visualizzato nella visualizzazione del layout. Per isolare una visualizzazione, acquisisci uno snapshot Istantanea di Layout Inspector, fai clic con il tasto destro del mouse sulla visualizzazione nella struttura dei componenti e seleziona Mostra solo sottoalbero o Mostra solo elementi principali. Per tornare alla visualizzazione completa, fai clic con il tasto destro del mouse sulla visualizzazione e seleziona Mostra tutto. Prima di isolare una vista, devi acquisire un'istantanea.

Nascondi i bordi del layout e visualizza le etichette

Per nascondere il riquadro di delimitazione o visualizzare le etichette di un elemento di layout, fai clic su Visualizza opzioni Pulsante Visualizza opzioni nella parte superiore della Visualizzazione layout e attiva Mostra bordi o Mostra etichetta Visualizza.

Acquisisci gli snapshot della gerarchia del layout

Layout Inspector consente di salvare istantanee della gerarchia di layout dell'app in esecuzione, in modo da poterle condividere con altri o farvi riferimento in un secondo momento.

Gli snapshot acquisiscono i dati che in genere visualizzi quando utilizzi Layout Inspector, tra cui un rendering 3D dettagliato del layout, la struttura ad albero dei componenti del layout View, Compose o ibrido e attributi dettagliati per ogni componente dell'interfaccia utente. Per salvare uno snapshot, fai clic su Esportazione/importazione snapshot Esportazione/importazione snapshot, quindi su Esporta snapshot.

Carica un'istantanea di Layout Inspector salvata in precedenza facendo clic su Importa snapshot.

Modalità 3D

La visualizzazione layout offre una visualizzazione 3D avanzata della gerarchia delle visualizzazioni dell'app in fase di runtime. Per utilizzare questa funzionalità, acquisisci uno snapshot Esportazione/importazione snapshot, fai clic sul pulsante Modalità 3D Pulsante 3D nella finestra di ispezione dello snapshot e ruotalo trascinando il mouse.

Controllo layout: vista 3D
Figura 2. Vista 3D ruotata di un layout.
Controllo layout: visualizzazione della spaziatura dei livelli
Figura 3. Per espandere o comprimere i livelli del layout, usa il cursore Spaziatura tra i livelli.

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

Per confrontare il layout della tua app con un'immagine di riferimento, ad esempio un modello di UI, puoi caricare un overlay di immagini bitmap in Layout Inspector.

  • Per caricare un overlay, seleziona l'opzione Carica overlay nella barra degli strumenti Controllo layout. L'overlay viene ridimensionato per adattarsi al layout.
  • Per regolare la trasparenza dell'overlay, utilizza il cursore Overlay alfa.
  • Per rimuovere l'overlay, fai clic su Cancella overlay

Ispeziona scrittura

Layout Inspector 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 componibile viene ricomposto o ignorato, il che può aiutarti a identificare i problemi della tua app. Ad esempio, alcuni errori di programmazione potrebbero forzare la ricomposizione dell'interfaccia utente in modo eccessivo, con un conseguente peggioramento delle prestazioni. Alcuni errori di codifica possono impedire la ricomposizione dell'interfaccia utente e, di conseguenza, impedire la visualizzazione delle modifiche apportate all'interfaccia sullo schermo.

Scopri di più su Layout Inspector per Compose

Evita i riavvii delle attività

Layout Inspector richiede una delle seguenti impostazioni globali per funzionare correttamente. Se non specifichi un'impostazione globale, Layout Inspector ne imposta automaticamente una.

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    Questa opzione genera informazioni aggiuntive per l'ispezione del processo specificato.

  2. adb shell settings put global debug_view_attributes 1

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

La modifica di un'impostazione globale può causare il riavvio di un'attività. Per evitare il riavvio di un'attività, puoi modificare le impostazioni in Android Studio o le Opzioni sviluppatore nelle impostazioni del dispositivo.

Per abilitare l'aggiornamento automatico in Android Studio, apri Esegui/configurazioni debug selezionando Esegui > Modifica configurazioni dal menu. Passa quindi alla scheda Varie e seleziona la casella Connetti a Layout Inspector senza riavviare l'attività in Opzioni di Layout Inspector.

Opzione di riavvio dell&#39;attività nelle configurazioni dell&#39;esecuzione
Figura 4. Abilita l'aggiornamento automatico dalla finestra di dialogo Esegui/esegui il debug delle configurazioni.

In alternativa, abilita le opzioni sviluppatore del dispositivo, quindi attiva Abilita l'ispezione degli attributi di visualizzazione dalle impostazioni sviluppatore del dispositivo.

Controllo layout autonomo

Per un rendimento ottimale, consigliamo di utilizzare Layout Inspector nella sua modalità incorporata predefinita. Per annullare l'incorporamento di Controllo layout, vai su File (Android Studio su macOS) > Impostazioni > Strumenti > Controllo layout e deseleziona la casella di controllo Attiva il controllo layout incorporato.

Nella modalità autonoma, abilita gli aggiornamenti in tempo reale facendo clic sull'opzione Aggiornamenti in tempo reale nella barra degli strumenti Controllo layout.