Ottimizzazione delle gerarchie di layout

Prova il metodo Scrivi

Jetpack Compose è il toolkit consigliato per la UI per Android. Scopri come utilizzare i layout in Compose.

Layout Inspector in Scrivi →

Capita spesso che l'utilizzo delle strutture di layout di base porti ai 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 profonde. Inoltre, nidificare diverse istanze di LinearLayout che utilizzano il parametro layout_weight può essere particolarmente costoso, poiché ogni 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 tuo layout.

Esamina il layout

Gli strumenti SDK per Android includono lo strumento Layout Inspector, che consente di analizzare il layout mentre l'app è in esecuzione. Se utilizzi questo strumento, puoi scoprire le inefficienze relative alle prestazioni del layout.

Layout Inspector consente di selezionare i processi in esecuzione su un dispositivo connesso o un emulatore e di visualizzare la struttura di layout. I semafori su ogni blocco rappresentano le sue prestazioni di misurazione, layout e disegno e ti aiutano a identificare potenziali problemi.

Ad esempio, la figura 1 mostra un layout utilizzato come elemento in un 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, gonfiati più volte, vengano ottimizzati, man mano che i vantaggi in termini di prestazioni vengono moltiplicati.

Figura 1. Layout concettuale per un elemento in un 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 Layout Inspector per visualizzare la gerarchia di layout del componente selezionato. Ad esempio, la figura 2 mostra il layout per la voce dell'elenco illustrato nella figura 1.

Figura 2. Gerarchia dei layout per il layout nella figura 1, utilizzando istanze nidificate di LinearLayout.

Rivedi il layout

Poiché le prestazioni del layout precedente rallentano a causa di un elemento LinearLayout nidificato, potresti migliorare le prestazioni appiattindo il layout, in altre parole, rendendo il layout superficiale e largo anziché stretto e profondo. Un ConstraintLayout come nodo principale consente questi layout. Quando converti questo design in modo che utilizzi 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>
    

Il controllo del nuovo layout ha il seguente aspetto:

Figura 3. Modalità 3D di Layout Inspector.

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

Gran parte della differenza è dovuta all'uso di layout_weight nella progettazione di LinearLayout, che può rallentare la misurazione. Questo è un esempio di come ogni layout presenta utilizzi appropriati. Valuta attentamente se è necessario utilizzare il peso del layout.

In alcuni layout complessi, il sistema potrebbe sprecare sforzi nel misurare lo stesso elemento UI più di una volta. Questo fenomeno è chiamato doppia tassazione. Per ulteriori informazioni sulla doppia tassazione e su come prevenirla, consulta Rendimento e gerarchie di visualizzazione.

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 maggiori funzionalità. Di seguito sono riportati alcuni esempi di regole lint:

• Utilizza drawable composti. Puoi gestire un LinearLayout che contiene un ImageView e un TextView in modo più efficiente come disegnabile composto.
• Unisci frame principale. Se la radice di un layout è un 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 senza sfondo o senza elementi secondari, in quanto invisibile, per creare una gerarchia di layout più semplice ed efficiente.
• Rimuovere genitori inutili. Puoi rimuovere un layout con un asset secondario che non ha elementi di pari livello, non è un ScrollView o un layout principale e non ha uno sfondo. Puoi anche spostare la vista secondaria direttamente in quella principale per una gerarchia di layout più semplice ed efficiente.
• Evita layout profondi. I layout con nidificazione eccessiva incidono negativamente 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 è l'integrazione in Android Studio. Lint viene eseguito automaticamente ogni volta che compili il programma. Con Android Studio, puoi anche eseguire ispezioni lint per una specifica variante di build 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 dell'ispezione con le ispezioni supportate:

Figura 4. pagina di configurazione dell'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.