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. Esta función es importante, sobre todo, cuando el diseño se aumenta repetidamente, 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 el 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. Usar 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 emulador o dispositivo 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. En este diseño, se 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 se aumentan varias veces, se optimicen, a medida que se multiplican los beneficios de rendimiento.

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

El Inspector de diseño muestra una lista de dispositivos disponibles y los componentes en ejecución. Elige tu componente en la pestaña de Windows y haz clic en Layout Inspector 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: La 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, hacer que el diseño sea simple y ancho, en lugar de estrecho y profundo. Un ConstraintLayout como nodo raíz permite estos diseños. Cuando conviertes este diseño para usar ConstraintLayout, pasa 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:

Una 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 cómo cada diseño tiene los usos apropiados. Considera cuidadosamente si es necesario usar el peso del diseño.

En algunos diseños complejos, el sistema puede malgastar recursos para medir el mismo elemento de 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 un LinearLayout que contiene un ImageView y un TextView de manera más eficiente como elemento de diseño compuesto.
  • Combina el marco raíz. Si la raíz de un diseño es un elemento FrameLayout que no proporciona fondo ni relleno, puedes reemplazarlo por una etiqueta de combinación, que es un poco más eficiente.
  • Quita las hojas inútiles. 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 simple y eficiente.
  • Quita a los padres inútiles. Puedes quitar un diseño con un elemento secundario que no tenga elementos del mismo nivel, que no sea un elemento ScrollView ni un diseño raíz, y que no tenga un fondo. También puedes mover la vista secundaria directamente a la vista superior para obtener una jerarquía de diseño más simple 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, a fin de mejorar el rendimiento. La profundidad máxima predeterminada para las comprobaciones de lint es 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 las 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:

Imagen que muestra el menú Inspections de Android Studio
Figura 4: página 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.