Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Cómo depurar tu diseño con Inspector de diseño y Validación de diseño

El Inspector de diseño de Android Studio te permite comparar el diseño de tu app con modelos de diseño, acceder a una vista ampliada o 3D de tu app y examinar los detalles de su diseño en el tiempo de ejecución, lo cual, en especial, resulta útil cuando tu diseño se compila durante el tiempo de ejecución, en lugar de en 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.

Cómo abrir el Inspector de diseño

Para abrir el Inspector de diseño, haz lo siguiente:

  1. Ejecuta tu app en un emulador o dispositivo conectado.
  2. Haz clic en Tools > Layout Inspector.

Como se muestra en la figura 1, el Inspector de diseño presenta lo siguiente:

  1. Árbol de componentes: es la jerarquía de las vistas del diseño.
  2. Pantalla de diseño: representa el diseño de la app como aparece en tu dispositivo o emulador, con los límites de diseño para cada vista.
  3. Barra de herramientas del Inspector de diseño: son las herramientas para el Inspector de diseño.
  4. Atributos: son los atributos de diseño para la vista seleccionada.

Captura de pantalla del Inspector de diseño con etiquetas que indican el árbol de componentes, la barra de herramientas del Inspector de diseños, la pantalla de diseño y los atributos

Figura 1: El Inspector de diseño

Cómo seleccionar una vista

Para seleccionar una vista, haz clic en ella, en el árbol de componentes o en la pantalla de diseño. Todos los atributos de diseño de la vista seleccionada aparecen en el panel Atributos.

Si tu diseño incluye vistas superpuestas, para seleccionar una vista que no se encuentre al frente, puedes hacer clic en ella, en el árbol de componentes o rotar el diseño y hacer clic en la vista deseada.

Cómo aislar una vista

Para trabajar con diseños complejos, puedes aislar vistas individuales de manera que solo un subconjunto del diseño se muestre en el árbol de componentes y se procese en la pantalla de diseño.

Para aislar una vista, haz clic con el botón derecho en la vista, en el árbol de componentes 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 de límite o ver las etiquetas de un elemento de diseño, haz clic en View Options Ícono de opciones de vista del Inspector de diseño en vivo, en la parte superior de la pantalla de diseño, y activa o desactiva Show Borders o Show View Label.

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, haz clic en Load Overlay , en la parte superior del Inspector de diseño. 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 .

Inspector de diseño en vivo

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 la API nivel 29 o superior.

Para habilitar el Inspector de diseño en vivo, ve a File > Settings > Experimental y marca la casilla junto a Enable Live Layout Inspector. Luego, haz clic en la casilla de verificación junto a Live updates sobre la pantalla de diseño.

El Inspector de diseño en vivo incluye una jerarquía de diseño dinámico, que actualiza el árbol de componentes y la pantalla de diseño como vistas en el cambio de dispositivo.

Además, la pila de resolución de valores de propiedad te permite investigar dónde se origina un valor de propiedad de recurso en el código fuente y navegar a su ubicación siguiendo los hipervínculos en el panel de propiedades.

Pila de resolución de valores de propiedad

Figura 2: Valores de propiedad en el panel Atributos con hipervínculos a las definiciones de propiedades.

Por último, la pantalla de diseño incluye una visualización 3D avanzada de la jerarquía de vistas de tu app en el tiempo de ejecución. Para usar esta función, en la ventana del Inspector de diseños en vivo, simplemente haz clic en el diseño y, para rotarlo, arrastra el mouse. Para expandir o contraer las capas del diseño, usa el control deslizante Layer Spacing.

Inspector de diseño: vista 3D

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

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 Validación de diseño en IDE de Android Studio

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

  • Pixel Devices
  • Custom
  • Color Blind
  • Font Sizes


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

Dispositivos Pixel

Obtén una vista previa de cómo aparece tu diseño en los dispositivos Pixel:

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

Figura 4: Vistas previas de los dispositivos Pixel en la herramienta Validación de diseño

Custom

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

Animación en la que se muestra cómo personalizar la pantalla de un dispositivo, en la herramienta Validación de diseño

Figura 5: Cómo configurar una pantalla personalizada en la herramienta Validación de diseño

Color Blind

Para que tu app sea más accesible para los usuarios con daltonismo, valida tu 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 6: Vistas previas de simulación de daltonismo en la herramienta 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 7: Vistas previas de los tamaños de fuente variables en la herramienta Validación de diseño