Ottimizzazione delle gerarchie di layout

Prova Compose

Jetpack Compose è il toolkit UI consigliato per Android. Scopri come lavorare con i layout in Compose.

Layout Inspector in Compose →

È un errore comune pensare che l'utilizzo delle strutture di layout di base porti ai layout più efficienti. Tuttavia, ogni widget e layout che aggiungi alla tua app richiede inizializzazione, layout e disegno. Ad esempio, l'utilizzo di istanze nidificate di LinearLayout può portare a una gerarchia di oggetti View eccessivamente profonda. Inoltre, la nidificazione di più istanze di LinearLayout che utilizzano il parametro layout_weight può essere particolarmente costosa, poiché ogni elemento secondario deve essere misurato due volte. Questo è particolarmente importante quando il layout viene espanso ripetutamente, ad esempio quando viene utilizzato in un RecyclerView.

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

Esaminare il layout

Gli strumenti dell'SDK Android includono lo strumento Layout Inspector, che ti consente di analizzare il layout mentre l'app è in esecuzione. L'utilizzo di questo strumento ti aiuta a scoprire le inefficienze nel rendimento del layout.

Layout Inspector ti consente di selezionare i processi in esecuzione su un dispositivo connesso o un emulatore, quindi di visualizzare l'albero del layout. I semafori su ogni blocco rappresentano il rendimento di misurazione, layout e disegno, aiutandoti 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 di questo tipo, che vengono espansi più volte, siano ottimizzati, poiché i vantaggi in termini di rendimento vengono moltiplicati.

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

Modificare il layout

Poiché il rendimento del layout precedente rallenta a causa di un LinearLayout nidificato, potresti migliorare il rendimento appiattendo il layout, in altre parole rendendolo superficiale e ampio, anziché stretto e profondo. Un ConstraintLayout come nodo radice consente questi layout. Quando converti questo design per 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 è simile alla seguente:

I vantaggi di questa operazione 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 abbia utilizzi appropriati. Valuta attentamente se è necessario utilizzare il peso del layout.

In alcuni layout complessi, il sistema potrebbe sprecare risorse misurando lo stesso elemento UI più di una volta. Questo fenomeno è chiamato doppia tassazione. Per saperne di più sulla doppia tassazione e su come evitarla, consulta Rendimento e gerarchie di visualizzazione.

Utilizzare lint

È una buona pratica eseguire lo strumento lint sui file di layout per cercare possibili ottimizzazioni della gerarchia di oggetti View. Lint sostituisce lo strumento layoutopt e ha una maggiore funzionalità. Di seguito sono riportati alcuni esempi di regole lint rules:

• Utilizzare drawable composti. Puoi gestire un LinearLayout che contiene unImageView e unTextView in modo più efficiente come drawable composto.
• Unire il frame radice. 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.
• Rimuovere le foglie inutili. Puoi rimuovere un layout che non ha elementi secondari o sfondo, poiché è invisibile, per una gerarchia di layout più semplice ed efficiente.
• Rimuovere i genitori inutili. Puoi rimuovere un layout con un elemento secondario che non ha elementi di pari livello, non è un ScrollView o un layout radice e non ha uno sfondo. Puoi anche spostare la vista bambino direttamente nell'elemento principale per una gerarchia di layout più semplice ed efficiente
• Evitare layout profondi. I layout con troppa nidificazione sono dannosi per il rendimento. Per migliorare il rendimento, valuta la possibilità di utilizzare layout più semplici, come ConstraintLayout, . 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 lint per una variante di compilazione specifica o per tutte le varianti di compilazione.

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 di ispezione con le ispezioni supportate:

Lint può correggere automaticamente alcuni problemi, fornire suggerimenti per altri e passare direttamente al codice problematico per la revisione.

Per saperne di più, consulta Layout e Risorsa layout.