Cómo optimizar jerarquías de diseño

Prueba el estilo de Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Obtén información para trabajar con diseños en Compose.

Es un error común pensar que con las estructuras de diseño básicas se crean los diseños más eficientes. Sin embargo, cada widget y diseño que agregas a la app requiere inicialización, diseño y dibujo. Por ejemplo, el uso de instancias anidadas de LinearLayout puede generar una jerarquía de vistas demasiado profunda. Además, anidar varias instancias de LinearLayout que usan el parámetro layout_weight puede ser muy costoso, ya que cada elemento secundario debe medirse dos veces. Esto es importante, en especial, cuando el diseño se aumenta de manera repetida, como cuando se usa en un RecyclerView.

En este documento, se muestra cómo usar el Inspector de diseño y lint para examinar y optimizar tu diseño.

Inspecciona tu diseño

Las herramientas del SDK de Android incluyen la herramienta Inspector de diseño, que te permite analizar el diseño mientras se ejecuta la app. El uso de esta herramienta te ayudará a descubrir ineficiencias en el rendimiento del diseño.

El Inspector de diseño te permite seleccionar procesos en ejecución en un dispositivo o emulador conectado y, luego, mostrar el árbol de diseño. Los semáforos en cada bloque representan su rendimiento de medición, diseño y dibujo, lo que te ayuda a identificar posibles problemas.

Por ejemplo, en la figura 1, se muestra un diseño que se usa como un elemento en un RecyclerView. Este diseño muestra una pequeña imagen de mapa de bits a la izquierda y dos elementos de texto apilados a la derecha. Es muy importante que los diseños como este que aumentan varias veces se optimicen, a medida que se multiplican los beneficios de rendimiento.

Una imagen que muestra un solo elemento de una lista: una imagen y dos textos alineados verticalmente
Figura 1: Diseño conceptual de un elemento en un RecyclerView

El Inspector de diseño muestra una lista de dispositivos disponibles y sus componentes en ejecución. Elige el componente en la pestaña Windows y haz clic en el Inspector de diseño para ver la jerarquía de diseño del componente seleccionado. Por ejemplo, en la figura 2, se muestra el diseño del elemento de la lista ilustrado en la figura 1.

Una imagen que muestra el Inspector de diseño y la composición de LinearLayout
Figura 2: Jerarquía de diseño para el diseño de la figura 1, con instancias anidadas de LinearLayout

Revisa tu diseño

Debido a que el rendimiento del diseño anterior se ralentiza debido a un LinearLayout anidado, puedes mejorar el rendimiento aplanando el diseño; es decir, haciendo que el diseño sea superficial y ancho, en lugar de estrecho y profundo. Un ConstraintLayout como nodo raíz permite estos diseños. Cuando conviertas este diseño para usar ConstraintLayout, pasará a ser una jerarquía de dos niveles:

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

La inspección del nuevo diseño se ve de la siguiente manera:

Imagen que muestra el Inspector de diseño 3D
Figura 3: Modo 3D del Inspector de diseño.

Los beneficios de esto se multiplican, porque este diseño se usa para cada elemento de una lista.

La gran diferencia se debe al uso de layout_weight en el diseño LinearLayout, que puede ralentizar la medición. Este es un ejemplo de los usos apropiados de cada diseño. Considera cuidadosamente si es necesario usar el peso del diseño.

En algunos diseños complejos, el sistema puede desperdiciar esfuerzos para medir el mismo elemento de la IU más de una vez. Este fenómeno se denomina tributación doble. Para obtener más información sobre la tributación doble y cómo evitarla, consulta Jerarquías de vistas y rendimiento.

Usa lint

Te recomendamos que ejecutes la herramienta lint en los archivos de diseño para buscar posibles optimizaciones de jerarquía de vistas. Lint reemplaza la herramienta layoutopt y tiene una mayor funcionalidad. Los siguientes son ejemplos de reglas de lint:

  • Usa elementos de diseño compuestos. Puedes controlar de manera más eficiente un LinearLayout que contenga una ImageView y una TextView como elemento de diseño compuesto.
  • Combina el marco raíz. Si la raíz de un diseño es un FrameLayout que no proporciona fondo ni relleno, puedes reemplazarlo por una etiqueta de combinación, lo cual es un poco más eficiente.
  • Quita las hojas que no sirven. Puedes quitar un diseño que no tenga elementos secundarios ni fondo (ya que es invisible) para obtener una jerarquía de diseño más plana y eficiente.
  • Quita los elementos superiores inútiles. Puedes quitar un diseño con un elemento secundario que no tenga elementos del mismo nivel, que no sea un diseño ScrollView ni raíz, y que no tenga un fondo. También puedes mover la vista secundaria directamente a la superior para obtener una jerarquía de diseño más plana y eficiente.
  • Evita los diseños profundos. Los diseños con demasiada anidación son malos para el rendimiento. Considera usar diseños más planos, como ConstraintLayout, para mejorar el rendimiento. La profundidad máxima predeterminada para las comprobaciones de lint es de 10.

Otro beneficio de la herramienta lint es su integración con Android Studio. Lint se ejecuta automáticamente cada vez que compilas tu programa. Con Android Studio, también puedes ejecutar inspecciones de lint para una variante de compilación específica o para todas las variantes de compilación.

También puedes administrar perfiles de inspección y configurar inspecciones dentro de Android Studio con la opción File > Settings > Project Settings. La página Inspection Configuration aparece con las inspecciones compatibles:

Una imagen que muestra el menú Inspections de Android Studio
Figura 4: Inspection Configuration.

Lint puede corregir automáticamente algunos problemas, proporcionar sugerencias para otros y saltar directamente al código ofensivo para su revisión.

Para obtener más información, consulta Diseños y Recurso de diseño.