Cómo depurar tu diseño con el Inspector de diseño y la validación de diseño

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

El Inspector de diseño de Android Studio te permite depurar el diseño de tu app mediante una jerarquía de vistas e inspeccionar las propiedades de cada vista. Con el Inspector de diseño, puedes comparar el diseño de tu app con las simulaciones de diseño, mostrar una vista ampliada o 3D de tu app, y examinar los detalles del diseño durante el tiempo de ejecución, lo que resulta útil cuando tu diseño se compila durante el tiempo de ejecución, en lugar de en el XML, y se comporta de manera inesperada.

La Validación de diseño te permite obtener una vista previa simultánea de los diseños en diferentes dispositivos y configuraciones de pantalla, incluidos idiomas del usuario o tamaños de fuente variables, lo que facilita realizar pruebas de una variedad de problemas habituales de diseño.

Para abrir el Inspector de diseño, ejecuta tu app en un dispositivo o emulador conectado y, luego, selecciona Tools > Layout Inspector.

Instantánea del Inspector de diseño para la app de ejemplo de Sunflower

Figura 1: Instantánea del Inspector de diseño para la app de ejemplo de Sunflower. El Inspector de diseño muestra lo siguiente de izquierda a derecha: Component Tree, Layout Display y Attributes.

  • Component Tree: Es la jerarquía de las vistas del diseño.
  • Layout Display: Representa el diseño de la app como aparece en tu dispositivo o emulador, con los límites de diseño para cada vista.
  • Attributes: Son los atributos de diseño para la vista seleccionada. El Inspector de diseño requiere reiniciar la actividad para acceder a los atributos. Para obtener más información, consulta Reinicio de actividad.

Para obtener información sobre el editor de diseño, consulta Introducción al editor de diseño.

Actualizaciones en tiempo real

Layout Display procesa el diseño de tu app según aparece en el dispositivo o emulador, y se muestran los límites de diseño para cada vista. Puedes hacer clic en cada componente para inspeccionarlo.

El Inspector de diseño en vivo proporciona estadísticas completas y en tiempo real sobre la IU de tu app mientras se implementa en un dispositivo o emulador que ejecuta el nivel de API 29 o superior.

Para habilitar el Inspector de diseño en vivo, selecciona la opción Live Updates en la barra de herramientas del Inspector de diseño.

El Inspector de diseño en vivo incluye una jerarquía de diseño dinámico, que actualiza Component Tree y la Layout Display como vistas en el cambio de dispositivo.

Cómo seleccionar o aisla una vista

Una vista suele mostrar un elemento que el usuario puede ver y con el que puede interactuar. Component Tree muestra la jerarquía de tu app en tiempo real con cada componente de la vista, lo que te ayuda a depurar el diseño, ya que puedes visualizar los elementos dentro de la app y los valores asociados a ellos.

Para seleccionar una vista, haz clic en ella, en Component Tree o Layout Display. Todos los atributos de diseño de la vista seleccionada aparecen en el panel Attributes.

Si tu diseño incluye vistas superpuestas, para seleccionar una vista que no se encuentre al frente, puedes hacer clic en ella en Component Tree o rotar el diseño.

Para trabajar con diseños complejos, puedes aislar vistas individuales de manera que solo un subconjunto del diseño se muestre en Component Tree y se procese en Layout Display.

Menú de vista aislada

Figura 2: Para aislar una vista, haz clic con el botón derecho en la vista, en Component Tree, y selecciona Show Only Subtree o Show Only Parents.

Para volver a la vista completa, haz clic con el botón derecho en la vista y selecciona Show All.

Cómo ocultar bordes de diseño y ver etiquetas

Para ocultar el cuadro delimitador o ver las etiquetas de un elemento de diseño, haz clic en View Options Botón View Options, en la parte superior de Layout Display, y activa o desactiva Show Borders o Show View Label.

Menú desplegable de View Options

Figura 3: Para ocultar los bordes del diseño y ver las etiquetas, haz clic en el segundo View Options de la barra de herramientas Layout Inspector.

Modo 3D

Layout Display incluye una visualización 3D avanzada de la jerarquía de vistas de tu app durante el tiempo de ejecución. Para usar esta función, en la ventana del Inspector de diseño en vivo, haz clic en el botón Modo 3D Botón 3D y arrastra el mouse para rotar el cursor.

Inspector de diseño: vista 3D

Figura 4: Vista 3D rotada de un diseño.

Inspector de diseño: vista de espaciado de capas

Figura 5: Para expandir o contraer las capas del diseño, usa el control deslizante Layer Spacing.

Cómo comparar el diseño de la app con una superposición de imágenes de referencia

Para comparar el diseño de tu app con una imagen de referencia, como un modelo de IU, puedes cargar una superposición de imágenes de mapa de bits en el Inspector de diseño.

  • Para cargar una superposición, selecciona la opción Load Overlay en la barra de herramientas Layout Inspector. Se escalará la superposición para que se adapte al diseño.
  • Para ajustar la transparencia de la superposición, usa el control deslizante Overlay Alpha.
  • Para quitar la superposición, haz clic en Clear Overlay .

Validación de diseño

La Validación de diseño es una herramienta visual que te permite obtener una vista previa simultánea de los diseños en dispositivos y configuraciones de pantalla diferentes, lo que puede ayudar a detectar problemas en tus diseños al comienzo del proceso. Para acceder a esta función, haz clic en la pestaña Layout Validation, en la esquina superior derecha de la ventana del IDE:

Captura de pantalla de la pestaña de validación de diseño

Figura 6: Pestaña Layout Validation.

Para alternar entre los conjuntos de configuración disponibles, selecciona una de las siguientes opciones del menú desplegable Reference Devices en la parte superior de la ventana de Validación de diseño:

  • Dispositivos de referencia
  • Personalizado
  • Color Blind
  • Font Sizes

Captura de pantalla del menú desplegable de la herramienta de validación de diseño

Figura 7: Opción Reference Devices del menú desplegable.

Dispositivos de referencia

Los dispositivos de referencia son un conjunto de dispositivos que recomendamos para hacer pruebas. Incluyen interfaces de teléfonos, dispositivos plegable, tablets y computadoras de escritorio. Debes obtener una vista previa de cómo aparece tu diseño en este conjunto de dispositivos de referencia:

Captura de pantalla de las vistas previas de diseño para diferentes dispositivos de referencia

Figura 8: Vistas previas de los dispositivos de referencia en la herramienta de validación de diseño.

Custom

Para personalizar la configuración de la pantalla de la vista previa, elige entre una variedad de parámetros de configuración, como el idioma, el dispositivo o la orientación de la pantalla:

Cómo personalizar la visualización de un dispositivo en la herramienta de validación de diseño

Figura 9: Cómo configurar una pantalla personalizada en la herramienta de validación de diseño.

Color Blind

A fin de que tu app sea más accesible para los usuarios con daltonismo, valida el diseño con simulaciones de tipos frecuentes de esta afección:

Captura de pantalla de las vistas previas de simulación para diferentes tipos de daltonismo

Figura 10: Vistas previas de simulación de daltonismo en la herramienta de validación de diseño.

Font Sizes

Prueba tus diseños con fuentes más grandes para validar tus diseños en varios tamaños de fuente y mejorar la accesibilidad de tu app para los usuarios con discapacidad visual:

Vistas previas de diseños de apps en diferentes tamaños de fuente con errores de diseño visibles para fuentes grandes

Figura 11: Vistas previas de los tamaños de fuente variables en la herramienta de validación de diseño.

Cómo capturar instantáneas de jerarquía de diseño

El Inspector de diseño te permite guardar instantáneas de la jerarquía de diseño de tu app en ejecución para que puedas compartirlas fácilmente con otras personas o consultarlas más adelante.

Las instantáneas capturan los datos que normalmente verías cuando usas el Inspector de diseño, lo que incluye una renderización 3D detallada del diseño; el árbol de componentes de la vista, de Compose o de un diseño híbrido; y atributos detallados de cada componente de la IU. Para guardar una instantánea, haz lo siguiente:

  1. Abre el Inspector de diseño.
  2. El Inspector de diseño debería conectarse al proceso de tu app automáticamente. De lo contrario, selecciona el proceso de la app en el menú desplegable.
  3. Cuando quieras capturar una instantánea, haz clic en Export snapshot Ícono de exportación en la barra de herramientas del Inspector de diseño.
  4. En el cuadro de diálogo del sistema que aparece, especifica el nombre con el que quieres guardar la instantánea y su ubicación. Asegúrate de guardar el archivo con una extensión *.li.

Luego, para cargar una instantánea del Inspector de diseño, selecciona File > Open en la barra de menú principal y abre un archivo *.li.

GIF de instantánea del Inspector de diseño

Figura 12: Cómo tomar una instantánea en el Inspector de diseño.

Inspecciona Compose

El Inspector de diseño te permite inspeccionar un diseño de Compose dentro de la app en ejecución en un emulador o dispositivo físico. Puedes usar el Inspector de diseño para verificar con qué frecuencia se recompone o se omite un elemento que admite composición, lo que puede ayudar a identificar problemas con tu app. Por ejemplo, algunos errores de codificación podrían hacer que la IU se recomponga en exceso, lo que puede causar un rendimiento deficiente. Algunos errores de codificación pueden evitar que se vuelva a componer la IU y, por lo tanto, evitar que los cambios de la IU se muestren en la pantalla.

Recuentos de recomposición de Compose en el Inspector de diseño

Cuando depuras tus diseños de Compose, es importante saber cuándo los elementos que admiten composición se vuelven a componer para comprender si tu IU se implementó correctamente. Por ejemplo, si se vuelve a componer demasiadas veces, es posible que tu app esté haciendo más trabajo del necesario. Por otro lado, los componentes que no se recomponen cuando esperas que lo hagan pueden generar comportamientos inesperados.

El Inspector de diseño te permite ver cuándo se vuelven a componer o se omiten elementos que admiten composición discretos en la jerarquía de diseño. Esta información se muestra en vivo mientras interactúas con tu app.

Para comenzar, asegúrate de que tu app use el nivel de API 29 o superior, y Compose 1.2.0-alpha03 o una versión posterior. Luego, implementa tu app como lo harías normalmente.

Composición y contador de omisiones en el Inspector de diseño

Figura 13: El contador de composición y omisión del Inspector de diseño.

Abre la ventana Layout Inspector y conéctate al proceso de tu app. En Component Tree, aparecen dos columnas junto a la jerarquía de diseño. La primera muestra la cantidad de composiciones de cada nodo, y la segunda indica la cantidad de omisiones de cada nodo. Si seleccionas un nodo que admite composición, se mostrarán las dimensiones y los parámetros del elemento, a menos que sea una función intercalada, en cuyo caso no se pueden mostrar los parámetros. También puedes ver información similar en el panel Attributes cuando seleccionas un elemento que admite composición en Component Tree o Layout Display.

Restablecer el recuento puede ayudarte a comprender las recomposiciones o las omisiones que se producen durante una interacción específica con tu app. Si deseas restablecer el recuento, haz clic en Reset cerca de la parte superior del panel Component Tree.

Cómo habilitar la composición y omitir el contador en el Inspector de diseño

Figura 14: Cómo habilitar la composición y omitir el contador en el Inspector de diseño.

Semántica de Compose

En Compose, Semantics describe la IU de una manera alternativa que pueden comprender los servicios de accesibilidad y el framework de prueba. Puedes usar el Inspector de diseño para inspeccionar información semántica en los diseños de Compose.

Información semántica que se muestra con el Inspector de diseño

Figura 15: Información semántica que se muestra con el Inspector de diseño.

Cuando selecciones un nodo de Compose, usa el panel Attributes para verificar si declara información semántica directamente, si combina semántica de sus elementos secundarios, o si realiza ambas. Para identificar en menos tiempo qué nodos incluyen semántica, ya sea declarada o combinada, selecciona el menú desplegable View Options en el panel Component Tree y selecciona Highlight Semantics Layers. Esto destaca solo los nodos del árbol que incluyen semántica, y puedes usar el teclado para navegar entre ellos con rapidez.

Cómo evitar que se reinicie la actividad

El Inspector de diseño requiere uno de los siguientes parámetros de configuración global para funcionar de manera correcta. Si no especificas una configuración global, el Inspector de diseño la configurará automáticamente.

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    Esta opción genera información adicional para la inspección del proceso especificado.

  2. adb shell settings put global debug_view_attributes 1

    Esta opción genera información adicional para la inspección de todos los procesos del dispositivo.

Si cambias una configuración global, es posible que se reinicie la actividad. Para evitar que se reinicie una actividad, puedes cambiar la configuración en Android Studio o las Opciones para desarrolladores en la configuración del dispositivo.

Para habilitar la actualización automática en Android Studio, abre Run/Debug Configurations. Para ello, selecciona Run > Edit Configurations en el menú. Luego, navega a la pestaña Miscellaneous y marca el cuadro Connect to Layout Inspector without restarting activity en Layout Inspector Options.

Opción de reinicio de actividad en configuraciones de ejecución

Figura 16: Cómo habilitar la actualización automática desde la configuración de ejecución y depuración.

Como alternativa, habilita las opciones para desarrolladores de tu dispositivo y, luego, activa Habilitar inspección de atributos de vista en la configuración para desarrolladores del dispositivo.