Ottimizzazione delle gerarchie di layout

Prova la modalità Scrivi
Jetpack Compose è il toolkit dell'interfaccia utente consigliato per Android. Scopri come utilizzare i layout in Compose.

È un equivoco comune secondo cui l'utilizzo delle strutture di base che consente di ottenere layout più efficienti. Tuttavia, ogni widget e layout che aggiungi all'app richiede inizializzazione, layout e disegno. Ad esempio, l'utilizzo di istanze nidificate di LinearLayout può portare a una gerarchia di visualizzazioni eccessivamente profonda. Inoltre, nidificare diverse istanze di LinearLayout che utilizzano il parametro layout_weight può essere particolarmente costoso, in quanto ogni elemento figlio deve essere misurato due volte. Ciò è particolarmente importante quando il layout viene gonfiato ripetutamente, ad esempio quando utilizzato in un RecyclerView.

Questo documento mostra come utilizzare Layout Inspector e lint per esaminare e ottimizzare il layout.

Ispezionare il layout

Gli strumenti dell'SDK Android includono lo strumento Layout Inspector, che consente di analizzare il layout mentre è in esecuzione l'app. Questo strumento consente di scoprire inefficienze nelle prestazioni del layout.

Layout Inspector consente di selezionare i processi in esecuzione su un dispositivo o emulatore connesso, quindi di visualizzare la struttura ad albero del layout. I semafori su ogni blocco ne rappresentano le prestazioni di tipo Misura, Layout e Disegna e ti aiuta a identificare i potenziali problemi.

Ad esempio, la figura 1 mostra un layout utilizzato come elemento in un elemento RecyclerView. Questo layout mostra una piccola immagine bitmap a sinistra e due elementi di testo impilati a destra. È particolarmente importante che i layout come questo, aumentati più volte, siano ottimizzati, man mano che vengono moltiplicati i vantaggi in termini di rendimento.

Un'immagine che mostra un singolo elemento in un elenco: un'immagine e due testi allineati verticalmente
Figura 1. Layout concettuale per un elemento in un elemento RecyclerView.

Layout Inspector mostra un elenco dei dispositivi disponibili e dei relativi componenti in esecuzione. Scegli il componente dalla scheda Windows e fai clic su Controllo layout per visualizzare la gerarchia di layout del componente selezionato. Ad esempio, la figura 2 mostra il layout dell'elemento dell'elenco illustrato nella figura 1.

Un'immagine che mostra Layout Inspector e la composizione LinearLayout
Figura 2. Gerarchia del layout per il layout di figura 1, utilizzando istanze nidificate di LinearLayout.

Rivedere il layout

Poiché le prestazioni del layout precedente rallentano a causa di un elemento LinearLayout nidificato, potresti migliorarne le prestazioni su larga scala, in altre parole rendendolo più ampio e basso, anziché più stretto e profondo. Un ConstraintLayout come nodo radice consente questi layout. Quando converti questo design in modo da utilizzare ConstraintLayout, il layout diventa una gerarchia a due livelli:

    <androidx.constraintlayout.widget.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/root"
      android:layout_width="match_parent"
      android:layout_height="52dp"
      android:background="#e4e6e4"
      android:padding="4dp">

      <ImageView
          android:id="@+id/image"
          android:layout_width="48dp"
          android:layout_height="48dp"
          android:background="#5c5c74"
          android:contentDescription="An example box"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/title"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_marginStart="4dp"
          android:background="#745c74"
          app:layout_constraintBottom_toTopOf="@+id/subtitle"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@id/image"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/subtitle"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:background="#7e8d6e"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="@id/title"
          app:layout_constraintTop_toBottomOf="@+id/title" />
  </androidx.constraintlayout.widget.ConstraintLayout>
    

L'ispezione del nuovo layout ha il seguente aspetto:

Un&#39;immagine che mostra l&#39;ispettore di layout 3D
Figura 3. Modalità 3D di Layout Inspector.

I vantaggi vengono moltiplicati, perché questo layout viene utilizzato per ogni elemento di un elenco.

La maggior parte della differenza è dovuta all'utilizzo di layout_weight nel design LinearLayout, che può rallentare la misurazione. Questo è un esempio di come ogni layout ha utilizzi appropriati. Valuta attentamente se è necessario usare il peso del layout.

In alcuni layout complessi, il sistema potrebbe sprecare lo sforzo di misurare lo stesso elemento UI più volte. Questo fenomeno è chiamato doppia tassazione. Per saperne di più sulla doppia imposizione e su come evitarla, consulta Prestazioni e visualizzazione delle gerarchie.

Usa lint

È buona norma eseguire lo strumento lint sui file di layout per cercare possibili ottimizzazioni della gerarchia delle visualizzazioni. Lint sostituisce lo strumento Layoutopt e offre una maggiore funzionalità. Di seguito sono riportati alcuni esempi di regole lint:

  • Utilizza disegnabili composti. Puoi gestire un LinearLayout che contiene un ImageView e un TextView in modo più efficiente come una traccia composta.
  • Unisci frame principale. Se la radice di un layout è un elemento FrameLayout che non fornisce sfondo o spaziatura interna, puoi sostituirlo con un tag di unione, che è leggermente più efficiente.
  • Rimuovi le foglie inutili. Puoi rimuovere un layout che non ha elementi secondari o senza sfondo, poiché è invisibile, per una gerarchia di layout più piatta ed efficiente.
  • Rimuovi i genitori inutili. Puoi rimuovere un layout con un elemento secondario che non ha fratelli, non ha un layout ScrollView o principale e non ha uno sfondo. Puoi anche spostare la vista secondaria direttamente nella vista principale per avere una gerarchia di layout più piatta ed efficiente.
  • Evita layout profondi. I layout con una nidificazione eccessiva hanno un impatto negativo sulle prestazioni. Valuta la possibilità di utilizzare layout più piatti, come ConstraintLayout, per migliorare le prestazioni. La profondità massima predefinita per i controlli lint è 10.

Un altro vantaggio dello strumento lint è la sua integrazione in Android Studio. Lint viene eseguito automaticamente ogni volta che compili il programma. Con Android Studio, puoi anche eseguire ispezioni di lint per una variante di build specifica o per tutte le varianti di build.

Puoi anche gestire i profili di ispezione e configurare le ispezioni in Android Studio con l'opzione File > Impostazioni > Impostazioni progetto. Viene visualizzata la pagina Configurazione ispezione con le ispezioni supportate:

Un&#39;immagine che mostra il menu Ispezioni di Android Studio
Figura 4. pagina Configurazione ispezione.

Lint può risolvere automaticamente alcuni problemi, fornire suggerimenti per altri e passare direttamente al codice in questione per la revisione.

Per ulteriori informazioni, consulta Layout e risorsa Layout.