Profila il tuo layout con il visualizzatore gerarchia

Il visualizzatore gerarchia è deprecato. Se utilizzi Android Studio 3.1 o versioni successive, consigliamo di utilizzare Layout Inspector per controllare la gerarchia delle visualizzazioni dell'app in fase di esecuzione. Per profilare la velocità di rendering del layout della tua app, utilizza Window.OnFrameMetricsAvailableAscolta come descritto in questo post del blog.

Il visualizzatore gerarchia è uno strumento integrato in Android Device Monitoring che ti consente di misurare la velocità del layout per ogni visualizzazione nella gerarchia del layout. Può aiutarti a individuare i colli di bottiglia delle prestazioni causati dalla struttura della gerarchia di viste.

Nota: il visualizzatore gerarchia non è più in fase di sviluppo. Per esaminare le proprietà nella gerarchia delle viste in fase di esecuzione, ti consigliamo di utilizzare invece l' strumento di controllo del layout in Android Studio. Tuttavia, attualmente lo strumento di controllo del layout non fornisce dettagli di profilazione delle prestazioni del layout.

Questa pagina fornisce un'introduzione al visualizzatore gerarchia e una procedura dettagliata per la profilazione del layout.

Configura

Se stai utilizzando l'emulatore Android, puoi saltare questa sezione. In caso contrario, devi configurare il dispositivo come indicato di seguito.

Nota:sul dispositivo deve essere installato Android 4.1 o una versione successiva.

  1. Attiva le Opzioni sviluppatore sul dispositivo.
  2. Imposta la variabile di ambiente ANDROID_HVPROTO=ddm sulla tua macchina di sviluppo.

    Questa variabile indica alla gerarchia del visualizzatore di connettersi al dispositivo utilizzando il protocollo ddm, che è uguale al protocollo DDMS. Tieni presente che può esistere un solo processo sull'host che si connette al dispositivo, pertanto devi terminare qualsiasi altra sessione di DDMS per eseguire il visualizzatore gerarchia.

Avvia visualizzatore gerarchia

Figura 1. Monitoraggio dispositivi Android

  1. Collega il dispositivo al computer. Se visualizzi una finestra di dialogo sul dispositivo che ti chiede: Vuoi consentire il debug USB?, tocca OK.
  2. Apri il progetto in Android Studio, eseguilo ed eseguilo sul tuo dispositivo.
  3. Avvia Android Device Monitor. Android Studio potrebbe mostrare la finestra di dialogo Disattiva integrazione annunci perché un solo processo può connettersi al dispositivo tramite Ab alla volta e Android Device Monitor richiede una connessione. Fai clic su .

    La figura 1 illustra ciò che appare inizialmente nel monitoraggio dei dispositivi Android.

  4. Nella barra dei menu, seleziona Finestra > Apri Perspective, quindi fai clic su Visualizzazione gerarchia.

    Dovresti vedere una disposizione simile a quella mostrata nella Figura 2. In caso contrario, seleziona Finestra > Reimposta Perspective per tornare al layout predefinito.

  5. Fai doppio clic sul nome del pacchetto dell'app nella scheda Windows a sinistra. Compila i riquadri con la gerarchia di visualizzazione dell'app.

Acquisisci familiarità con gli strumenti

Figura 2. Pannelli Visualizzatore gerarchia.

Il visualizzatore gerarchia fornisce i seguenti riquadri (come mostrato nella figura 2):

  • Visualizzazione ad albero (al centro): mostra una visualizzazione ad albero della gerarchia di viste. Puoi trascinare e ingrandire l'albero utilizzando il mouse e il controllo dello zoom in basso. Ogni nodo indica il nome della classe e l'ID View.
  • Panoramica dell'albero (in alto a destra): ti offre una panoramica della gerarchia di visualizzazioni completa della tua app. Sposta il rettangolo grigio per modificare l'area visibile nella visualizzazione ad albero.
  • Visualizzazione layout (in basso a destra): mostra una vista del frame del tuo layout. Il contorno della vista attualmente selezionata è rosso e la relativa vista principale è rosso chiaro.

    Se fai clic su una visualizzazione qui, la selezioni anche nella visualizzazione ad albero e viceversa.

La gerarchia delle viste è un'istantanea del layout, quindi non si aggiorna automaticamente. Per aggiornare la visualizzazione della gerarchia, fai clic su Ricarica la gerarchia delle viste .

Per invalidare una visualizzazione (richiedi che la chiamata di sistema onDraw() durante il successivo aggiornamento del layout), seleziona una visualizzazione nella gerarchia e fai clic su Rendi nullo il layout (equivale a chiamare invalidate() nella vista). Per richiedere la visualizzazione (ed eventualmente per i bambini) fai clic su Richiedi disposizione .

Se passi a un'altra app, devi selezionare l'app dalla scheda Windows nel riquadro a sinistra per visualizzarne la gerarchia delle visualizzazioni.

Per visualizzare i dettagli della vista, inclusi la misurazione, il layout e i tempi di disegno (come mostrato nella Figura 3), fai clic sulla vista nella visualizzazione ad albero. Fai doppio clic sulla visualizzazione per ingrandirla.

Figura 3. Le parti della visualizzazione del nodo vista.

Per vedere le proprietà della vista, fai clic sulla scheda Visualizza proprietà nel riquadro a sinistra, come mostrato nella Figura 4.

Figura 4. Posizione della scheda Visualizza proprietà.

Per salvare uno screenshot a più livelli del tuo layout in un file di Adobe Photoshop (PSD), fai clic su Acquisisci i livelli delle finestre nella barra degli strumenti. Ogni vista viene salvata come un proprio livello, così puoi creare facilmente una nuova simulazione nascondendo e modificando ogni visualizzazione.

Profila il tuo layout

Figura 5. Visualizza la gerarchia dopo la profilazione.

Ora che sai come utilizzare lo strumento, puoi utilizzarlo per profilare la gerarchia delle visualizzazioni e interpretare i risultati.

  1. In Visualizzazione ad albero o in Visualizzazione layout, fai clic sul nodo Visualizza di cui vuoi modificare il profilo.
  2. Per iniziare la profilazione, fai clic su Ottieni tempi di layout nella parte superiore della Visualizzazione ad albero.

    Per le gerarchie di viste di grandi dimensioni, la profilazione può richiedere alcuni secondi.

Ogni vista secondaria del nodo selezionato riceve tre puntini, che possono essere verdi, gialli o rossi.

  • Il punto a sinistra rappresenta il processo di disegno della pipeline di rendering.
  • Il punto centrale rappresenta la fase di layout.
  • Il punto a destra rappresenta la fase di esecuzione.

Figura 6. In che modo i punti colorati si collegano
alla pipeline di rendering.

Questi punti corrispondono all'incirca alla fase di misurazione, layout e disegno della pipeline di elaborazione. Il colore dei punti indica le prestazioni relative di questo nodo rispetto a tutti gli altri nodi del profilo della famiglia locale.

  • Verde indica che la visualizzazione viene visualizzata più velocemente di almeno la metà delle altre visualizzazioni.
  • Giallo indica che la visualizzazione viene visualizzata più velocemente nella metà inferiore delle altre visualizzazioni.
  • Rosso indica che la visualizzazione è tra la metà più lenta.

Interpretazione dei risultati

Il visualizzatore gerarchia misura le prestazioni di ogni nodo rispetto alle viste di pari livello, pertanto in un profilo sono sempre presenti nodi rossi, a meno che tutte le viste non abbiano un rendimento identico, e non significa necessariamente che il rendimento di quello rosso sia scarso (solo perché è la visualizzazione più lenta del gruppo di visualizzazioni locali).

Il visualizzatore gerarchia rasterizza il layout per acquisire le informazioni sulle tempistiche. La rasterizzazione è il processo di conversione di una primitiva di alto livello, come un cerchio o un carattere vettore, e trasformarla in pixel sullo schermo. In genere, la rasterizzazione viene eseguita dalla GPU sul tuo dispositivo, ma nel caso della rasterizzazione software viene eseguito il rendering sulla CPU con il software normale. Ciò significa che i tempi assoluti indicati nei report sono corretti l'uno rispetto all'altro, ma sono gonfii e variano a seconda del carico di lavoro della CPU complessivo e in fase di modifica sul dispositivo e sulla macchina di sviluppo. Di conseguenza, non riflette le velocità reali delle prestazioni su un dispositivo e è necessario profili più volte per avere un'idea delle misurazioni medie.

Un nodo rosso è un potenziale problema in qualsiasi situazione in cui la tua app abbia prestazioni lente inaspettate. In un'impostazione relativa, è sempre presente un nodo più lento; assicurati solo che sia il nodo previsto. I seguenti esempi illustrano come interpretare i punti rossi.

  • Cerca i punti rossi nei nodi foglia o visualizza i gruppi con pochi figli. Questo potrebbe indicare un problema. L'app potrebbe non essere lenta o potrebbe non essere lenta sul dispositivo, ma è necessario sapere perché il punto è rosso. Systrace o Traceview possono fornire ulteriori informazioni.
  • Se hai un gruppo di visualizzazioni con molti bambini e una fase di misurazione rossa, dai un'occhiata ai bambini per vedere il loro rendimento.
  • Una visualizzazione con puntini gialli o rossi potrebbe non avere un buon rendimento sul dispositivo. È qui che i numeri effettivi sono utili. Systrace o Traceview possono fornire ulteriori informazioni.
  • Se la vista principale di una gerarchia ha una fase di misurazione rossa, una fase di layout rossa e una fase di disegno gialla, questo è un comportamento abbastanza tipico perché è l'elemento principale di tutte le altre viste e il suo layout non è terminato fino al termine dell'attività secondaria.
  • Se un nodo foglia in un albero con più di 20 visualizzazioni ha una fase di disegno in rosso, questo è un problema. Controlla se nel tuo metodo di onDraw() è presente il codice che non dovrebbe essere presente.

Per ulteriori suggerimenti sul layout, consulta la pagina Come migliorare le prestazioni del layout.