Otimizar hierarquias de layout

Experimente trabalhar com o Compose

O Jetpack Compose é o kit de ferramentas de UI recomendado para Android. Aprenda a trabalhar com layouts no Compose.

Layout Inspector no Compose →

É um erro comum achar que o uso das estruturas básicas de layout leva a layouts mais eficientes. No entanto, cada widget e layout que você adiciona ao app exige inicialização, layout e desenho. Por exemplo, o uso de instâncias aninhadas de LinearLayout pode levar a uma hierarquia de visualização excessivamente profunda. Além disso, aninhar várias instâncias de LinearLayout que usam o parâmetro layout_weight pode ser especialmente caro, porque cada filho precisa ser medido duas vezes. Isso é particularmente importante quando o layout é inflado repetidamente, como quando usado em um RecyclerView.

Este documento mostra como usar o Layout Inspector e o lint para analisar e otimizar seu layout.

Inspecionar o layout

As Ferramentas do SDK do Android incluem o Layout Inspector, que permite analisar o layout enquanto o app está em execução. O uso dessa ferramenta ajuda a descobrir ineficiências na performance do layout.

O Layout Inspector permite selecionar processos em execução em um dispositivo conectado ou emulador e, em seguida, mostrar a árvore de layout. Os semáforos em cada bloco representam a performance de medição, layout e desenho, ajudando você a identificar possíveis problemas.

Por exemplo, a Figura 1 mostra um layout que é usado como item em uma RecyclerView. Esse layout mostra uma pequena imagem de bitmap à esquerda e dois itens de texto empilhados à direita. É especialmente importante que layouts como este, que são inflados várias vezes, sejam otimizados, porque os benefícios para o desempenho são multiplicados.

Figura 1. Layout conceitual de um item em uma RecyclerView.

O Layout Inspector mostra uma lista de dispositivos disponíveis e os componentes em execução deles. Escolha o componente na guia Windows e clique em Layout Inspector para ver a hierarquia de layout do componente selecionado. Por exemplo, a Figura 2 mostra o layout do item de lista ilustrado na Figura 1.

Figura 2. Hierarquia do layout na figura 1, usando instâncias aninhadas de LinearLayout.

Revisar o layout

Como o desempenho do layout anterior fica lento devido a um LinearLayout aninhado, você pode melhorar o desempenho nivelando o layout, ou seja, fazendo com que ele fique raso e amplo em vez de estreito e profundo. Um ConstraintLayout como nó raiz permite esses layouts. Quando você converte esse design para usar ConstraintLayout, o layout se torna uma hierarquia de dois níveis:

    <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>
    

A inspeção do novo layout vai ficar assim:

Figura 3. Modo 3D do Layout Inspector.

Os benefícios disso são multiplicados, porque esse layout é usado para cada item de uma lista.

A maior parte da diferença se deve ao uso de layout_weight no design LinearLayout, o que pode diminuir a velocidade de medição. Esse é um exemplo de como cada layout tem usos adequados. Considere cuidadosamente se é necessário usar a ponderação de layout.

Em alguns layouts complexos, o sistema pode perder tempo medindo o mesmo elemento da interface mais de uma vez. Esse fenômeno é chamado de dupla tributação. Para mais informações sobre a dupla tributação e como evitá-la, consulte Hierarquias de desempenho e visualização.

Usar lint

É uma boa prática executar a ferramenta lint nos arquivos de layout para procurar possíveis otimizações da hierarquia de visualização. O Lint substitui a ferramenta layoutopt e tem mais funcionalidades. Confira a seguir exemplos de regras de lint:

• Use elementos combinados. É possível processar um LinearLayout que contém um ImageView e um TextView com mais eficiência como um drawable composto.
• Mesclar frame raiz. Se a raiz de um layout for um FrameLayout que não fornece plano de fundo ou preenchimento, você poderá substituí-lo por uma tag de mala direta, que é um pouco mais eficiente.
• Remova folhas inúteis. É possível remover um layout que não tem filhos ou plano de fundo (já que ele é invisível) para uma hierarquia de layout mais simples e eficiente.
• Remova elementos parentes inúteis. Você pode remover um layout com um filho que não tenha irmãos, não seja um ScrollView ou um layout raiz e não tenha plano de fundo. Você também pode mover a visualização filha diretamente para a mãe, visando uma hierarquia de layout mais plana e eficiente.
• Evite layouts muito profundos. Layouts com muito aninhamento prejudicam a performance. Considere usar layouts mais planos, como ConstraintLayout, para melhorar a performance. A profundidade máxima padrão para verificações de lint é 10.

Outro benefício da ferramenta lint é a integração dela ao Android Studio. O Lint é executado automaticamente sempre que você compila seu programa. Com o Android Studio, você também pode executar inspeções de lint para uma variante de build específica ou para todas as variantes.

Você também pode gerenciar perfis de inspeção e configurar inspeções no Android Studio com a opção File > Settings > Project Settings. A página "Inspection Configuration" aparece com as inspeções compatíveis:

Figura 4. Página "Configuração de inspeção".

O Lint corrige automaticamente alguns problemas, oferece sugestões para outros e pula diretamente para o código ofensivo para análise.

Para mais informações, consulte Layouts e Recurso de layout.