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](https://developer.android.com/static/images/training/layout-listitem.png?authuser=8&hl=es)
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](https://developer.android.com/static/images/training/hierarchy-linearlayout.png?authuser=8&hl=es)
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](https://developer.android.com/static/images/training/layout_inspector.png?authuser=8&hl=es)
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 unaImageView
y unaTextView
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](https://developer.android.com/static/images/training/lint.png?authuser=8&hl=es)
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.