Cómo optimizar jerarquías de diseño

Prueba hacerlo con Compose

Jetpack Compose es el kit de herramientas de IU recomendado para Android. Obtén información sobre cómo a trabajar con diseños en Compose.

Inspector de diseño 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 aplicación requiere inicialización, diseño y dibujo. Por ejemplo, el uso de instancias anidadas de LinearLayout puede llevar a 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 objeto 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 tu diseño mientras se ejecuta la aplicación. El uso de esta herramienta te ayuda a descubrir ineficiencias en el rendimiento del diseño.

El Inspector de diseño te permite seleccionar procesos en ejecución en un dispositivo conectado o emulador y, luego, muestra 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, la figura 1 muestra un diseño que se usa como un elemento en un objeto 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 importante que los diseños que aumenten varias veces, como este, se optimicen a medida que se multipliquen los beneficios de rendimiento.

Figura 1. Diseño conceptual para un elemento en un 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 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.

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

Como el rendimiento del diseño anterior se ralentiza debido a un LinearLayout anidado, el rendimiento podría mejorarse aplanando el diseño; haz que este 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, el diseño 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:

Figura 3. Modo 3D del Inspector de diseño

Los beneficios de esto se multiplican, ya que este diseño se utiliza para todos los elementos 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 solo un ejemplo de cómo cada diseño tiene usos apropiados. Considera con cuidado si es necesario usar el volumen 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 prevenirla, consulta Jerarquías de vistas y rendimiento.

Usa lint

Es recomendable ejecutar la herramienta lint en los archivos de diseño para buscar posibles optimizaciones de jerarquía de vistas. Lint reemplaza a la herramienta layoutopt y tiene una funcionalidad mucho mayor. A continuación, se muestran ejemplos de reglas de lint de lint:

• Usa elementos de diseño compuestos. Un LinearLayout que contiene unImageView y unTextView se pueden manejar 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 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. Un diseño que no tiene elementos secundarios ni fondo a menudo puede quitarse (ya que es invisible) para obtener una jerarquía de diseño más simple y eficiente.
• Quita los elementos superiores inútiles. Un diseño con elementos secundarios que no tiene elementos hermanos, que no es un ScrollView ni un diseño raíz y que no tiene un fondo puede quitarse. También puedes mover la vista secundaria directamente al elemento superior para obtener una jerarquía de diseño más simple y eficiente.
• Evita los diseños profundos. Los diseños con demasiados elementos anidados son perjudiciales 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 verificaciones de lint es 10.

Otro beneficio de la herramienta lint es su integración en Android Studio. Lint se ejecuta automáticamente cada vez que compilas tu programa. Con Android Studio, 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 de configuración Inspection aparece con las inspecciones compatibles:

Figura 4. Página de configuración de inspección

Lint tiene la capacidad de solucionar automáticamente algunos problemas, proporcionar sugerencias para otros y saltar de manera directa al código ofensivo para su revisión.

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