El Inspector de diseño 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 del 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ño, haz lo siguiente:
- Ejecuta tu app en un emulador o dispositivo conectado.
- Haz clic en Tools > Layout Inspector.
En el diálogo Choose Process que aparece, selecciona el proceso de la app que desees 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ño captura una instantánea, la guarda como archivo .li y la abre.
Como se muestra en la figura 2, el Inspector de diseño presenta lo siguiente:
- Árbol de vistas: Es la jerarquía de vistas en el diseño.
- Barra de herramientas del inspector de diseños: Son las herramientas para el inspector de diseños.
- 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.
- 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 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ñ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 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ño no se actualiza automáticamente. Para capturar los cambios de diseño, 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 pestaña nueva.
Figura 3: Instantáneas del Inspector de diseño (archivos .li) en la ventana Project
Para volver a cargar una captura de pantalla anterior, haz doble clic en el archivo .li en project-name/captures/.