Optimiza las jerarquías de diseño

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 generar una jerarquía de vista demasiado profunda. Además, anidar varias instancias de LinearLayout que usan el parámetro layout_weight puede ser especialmente costoso, ya que cada elemento secundario debe medirse dos veces. Esto es importante cuando el diseño se aumenta varias veces, como cuando se usa en una ListView o GridView.

En esta lección, aprenderás a usar el Hierarchy Viewer y Lint para examinar y optimizar tu diseño.

Inspecciona tu diseño

Las herramientas del SDK de Android incluyen una herramienta llamada Hierarchy Viewer que permite analizar el diseño mientras se ejecuta la aplicación. El uso de esta herramienta te ayuda a descubrir cuellos de botella en el rendimiento del diseño.

Hierarchy Viewer permite seleccionar procesos en ejecución en un dispositivo o emulador conectado 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, en la figura 1, se muestra un diseño que se usa como un elemento en una ListView. 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 de un elemento en una ListView

Hierarchy Viewer 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 Hierarchy View 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 al aplanar el diseño; haz que este sea simple y ancho, en lugar de estrecho y profundo. Un RelativeLayout como nodo raíz permite estos diseños. Por lo tanto, cuando este diseño se convierte para usar RelativeLayout, puedes ver que pasa a ser una jerarquía de 2 niveles. La inspección del nuevo diseño se ve así:

Figura 4: Jerarquía de diseño para el diseño de la figura 1, con RelativeLayout

Los beneficios, por pequeños que parezcan, se multiplican varias veces porque 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 velocidad de medición. Este es solo un ejemplo de cómo cada diseño tiene usos apropiados y de por qué debes considerar 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

Siempre es recomendable ejecutar la herramienta lint en los archivos de diseño para buscar posibles optimizaciones de jerarquía de vistas. Lint reemplazó a la herramienta Layoutopt y tiene una funcionalidad mucho mayor. Algunos ejemplos de reglas de lint son los siguientes:

  • Usa elementos de diseño compuestos: Un LinearLayout que contiene una ImageView y una TextView se puede manejar de manera más eficiente como un elemento de diseño compuesto.
  • Fusiona el marco raíz: Si un FrameLayout es la raíz de un diseño y no proporciona fondo ni relleno, etc., puede reemplazarse por una etiqueta de fusión que es un poco más eficiente.
  • Hoja inútil: 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.
  • Elemento superior inútil: Un diseño con elementos secundarios que no tiene elementos hermanos, que no es una ScrollView ni un diseño raíz y que no tiene un fondo puede quitarse y hacer que sus elementos secundarios se muevan directamente al elemento superior para obtener una jerarquía de diseño más simple y eficiente.
  • Diseños profundos: Los diseños con demasiados elementos anidados son perjudiciales para el rendimiento. Considera usar diseños más planos, como RelativeLayout o GridLayout, para mejorar el rendimiento. La profundidad máxima predeterminada es 10.

Otro beneficio de Lint es que está integrado 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 5: 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 relacionada con esta lección, consulta Diseños XML y Recurso de diseño.