Cómo depurar tu diseño con el inspector de diseños

El inspector de diseños de Android Studio te permite comparar el diseño de tu app con modelos de diseños, ver una vista ampliada de tu app y examinar los detalles de su diseño en el tiempo de ejecución, lo cual 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.

Anteriormente, gran parte de las funciones del inspector de diseños se proporcionaba mediante las herramientas obsoletas "Hierarchy Viewer" y "Pixel Perfect".

Cómo abrir el inspector de diseños

Para abrir el inspector de diseños, haz lo siguiente:

  1. Ejecuta tu app en un emulador o dispositivo conectado.
  2. Haz clic en Tools > Layout Inspector.
  3. En el diálogo Choose Process que aparece, selecciona el proceso de la app que quieras inspeccionar y haz clic en OK.

    Figura 1: El diálogo Choose Process

    De manera predeterminada, en el diálogo Choose Process, solo se enumeran los procesos para el proyecto abierto actualmente en Android Studio que se está ejecutando en el dispositivo o emulador. Si deseas inspeccionar otra app del dispositivo, marca la opción Show all processes. Si estás usando un dispositivo con derechos de administrador o un emulador sin Google Play Store, verás todas las apps en ejecución. De lo contrario, solo verás las apps en ejecución que son depurables.

El inspector de diseños captura una instantánea, la guarda como archivo .li y, luego, la abre.

Como se muestra en la figura 2, el inspector de diseños presenta lo siguiente:

  1. Árbol de vistas: Es la jerarquía de vistas en el diseño.
  2. Barra de herramientas del inspector de diseños: Son las herramientas para el inspector de diseños.
  3. Captura de pantalla: Es la captura de pantalla del diseño de la app como aparece en tu dispositivo con los límites de diseño para cada vista.
  4. Tabla de propiedades: Son las propiedades de diseño para la vista seleccionada.

Figura 2: El inspector de diseños

Cómo seleccionar una vista

Para seleccionar una vista, haz clic en ella en el árbol de vistas o la captura de pantalla. Todos los atributos de diseño de la vista seleccionada aparecen en la tabla de propiedades.

Si tu diseño incluye vistas superpuestas, entonces solo puedes hacer clic en la vista que se encuentra al frente de la captura de pantalla. Para seleccionar una vista que no esté al frente, haz clic en el árbol de vistas.

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 vistas y se procese en la captura de pantalla.

Solo puedes aislar una vista si el dispositivo aún está conectado. Para ello, es necesario que el dispositivo procese el diseño de manera que el inspector de diseños pueda tomar otra captura de pantalla.

Para aislar una vista, realiza una de las siguientes acciones:

  • Haz doble clic en la vista en la captura de pantalla.
  • Haz clic con el botón derecho en la vista en el árbol de vistas y selecciona Render Subtree Preview.

Para volver a la vista contenida, haz clic en la flecha que aparece en la esquina superior izquierda del árbol de vistas.

Cómo ocultar límites de diseño

Para ocultar el cuadro delimitador de un elemento de diseño, haz clic con el botón derecho en el elemento en el árbol de vistas y anula la selección de la opción Show layout bounds.

No se puede seleccionar un elemento de diseño al que se le anuló la selección de Show layout bounds haciendo clic en la captura de pantalla.

Cómo acercar y usar una cuadrícula de referencia para inspeccionar los detalles del diseño

Puedes controlar la superposición de la cuadrícula y el nivel de zoom de la captura de pantalla mediante los botones de la barra de herramientas del editor de diseño.

  • Para ampliar la captura de pantalla, haz clic en Zoom In .
  • Para alejar la captura de pantalla, haz clic en Zoom Out .
  • Para ver el diseño en una ampliación en la que un píxel de la captura de pantalla corresponde a un píxel del dispositivo, haz clic en Actual Size .
  • Para superponer una cuadrícula de píxeles, haz clic en Grid . La cuadrícula solo está disponible para los niveles de zoom altos.

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ños.

  • Para cargar una superposición, haz clic en Load Overlay  en la parte superior del inspector de diseños. Se escalará la superposición para que se adapte al diseño.
  • Para ajustar la transparencia de la superposición, usa el control deslizante Alpha.
  • Para quitar la superposición, haz clic en Clear Overlay .

Cómo tomar una nueva captura de pantalla para captar los cambios en el diseño

Si se modifica el diseño del dispositivo, el inspector de diseños no se actualiza automáticamente. Para capturarlos, deberás crear una nueva captura de pantalla haciendo clic nuevamente en Tools > Layout Inspector.

Cada captura de pantalla se guarda en un archivo .li separado en project-name/captures/ y se abre en una nueva pestaña.

Figura 3: Las capturas de pantalla del inspector de diseños (archivos .li) en la ventana Project

Para volver a cargar la captura de pantalla anterior, haz doble clic en el archivo .li en project-name/captures/.