Pixel Perfect

Se dio de baja Pixel Perfect. A partir de Android Studio 3.1, debes usar Layout Inspector para comparar el diseño de tu app con los modelos de diseño, mostrar una vista ampliada de tu app y examinar los detalles del diseño.

Pixel Perfect es una herramienta integrada en Android Device Monitor que muestra una vista ampliada de tu app para que puedas inspeccionar la posición y las propiedades del diseño, así como ayudar a que el diseño de la app coincida con los modelos correspondientes.

Cómo iniciar Pixel Perfect

Figura 1: Android Device Monitor

  1. Conecta el dispositivo a la computadora. Si aparece un diálogo en el dispositivo con la pregunta ¿Permitir depuración por USB?, presiona Aceptar.
  2. Abre el proyecto en Android Studio, compílalo y ejecútalo en el dispositivo.
  3. Inicia Android Device Monitor. Android Studio podría mostrar un diálogo Disable adb integration debido a que el dispositivo permite que solo se conecte un proceso mediante adb a la vez, y Android Device Monitor está solicitando una conexión. Por lo tanto, haz clic en Yes.

    En la figura 1, se muestra el contenido que aparece en Android Device Monitor inicialmente.

  4. En la barra de menú, selecciona Window > Open Perspective y, luego, haz clic en Pixel Perfect.
  5. Haz doble clic en el nombre del dispositivo en la pestaña Windows ubicada a la izquierda. Se completarán los paneles con la pantalla del dispositivo y se pasará a la pestaña Pixel Perfect Tree.

Familiarízate con las herramientas

Se mostrarán los siguientes tres paneles:

  • View Object (izquierda): Es una lista jerárquica de los objetos de View visibles en la pantalla, incluidos los que son propiedad del sistema. Cuando haces clic en una vista, se destaca la posición en el panel Pixel Perfect de la derecha.
  • Pixel Perfect Loupe (centro): Esta es la imagen de la pantalla ampliada. Está superpuesta por una cuadrícula en la que cada cuadrado representa un píxel. Para ver la información de un píxel, haz clic en su cuadrado. Se mostrará la información de color y las coordenadas X/Y en la parte inferior del panel.

    La cruz del panel corresponde a la cruz de posicionamiento en el panel de Pixel Perfect (a la derecha).

    Para hacer zoom, usa el control deslizante Zoom en la parte inferior del panel, o usa la rueda de desplazamiento del mouse.

  • Pixel Perfect (derecha): Muestra la pantalla del dispositivo.

    La cruz de este panel corresponde a la cruz del panel Loupe.

    También se muestra aquí en negrita y en color rojo la vista seleccionada en el panel View Object. Las vistas de elementos secundarios y principales tienen un recuadro rojo.

    El recuadro de diseño puede tener otros rectángulos, ya sea dentro o fuera de él, y cada uno indica parte de la vista. Los rectángulos violeta o verde indican el recuadro de límite de la vista. Los recuadros blanco o negro dentro del recuadro de diseño representan el relleno de la vista. Los rectángulos exteriores blanco o negro representan los márgenes. Los recuadros de margen y relleno son blancos si el fondo del diseño es negro, y viceversa.

    Puedes guardar una captura de pantalla haciendo clic en Save as PNG, en la parte superior de la ventana.

Figura 2: La ventana de Pixel Perfect

De manera predeterminada, estos paneles no se actualizan cuando cambia la IU en la pantalla. Para habilitar la actualización automática, habilita Auto Refresh en la parte superior de la ventana y, luego, establece una frecuencia de actualización con el control deslizante Refresh Rate de la parte inferior del panel Loupe.

También puedes actualizar el panel de Pixel Perfect y el panel Loupe automáticamente haciendo clic en Refresh Screenshot en la parte superior de la ventana. Es posible que aún debas actualizar el panel View Object haciendo clic en Refresh Tree en la parte superior de la ventana.

Cómo agregar una imagen superpuesta

La ventana de Pixel Perfect te ayuda a coincidir el diseño de tu app con una imagen de modelo, ya que te permite cargar un mapa de bits como una superposición en la ventana Pixel Perfect.

Para usar una imagen de mapa de bits como una superposición, sigue estos pasos:

  • En la parte superior de Pixel Perfect, haz clic en Load Overlay y selecciona tu imagen.
  • Pixel Perfect muestra la superposición sobre la pantalla en el panel de Pixel Perfect. La esquina inferior izquierda de la imagen de mapa de bits (X=0, Y= valor máximo) está anclada en el píxel inferior izquierdo (X=0, Y= máximo de pantalla) de la pantalla.

    De forma predeterminada, una superposición tiene una transparencia del 50%. Puedes ajustarla con el control deslizante Overlay de la parte inferior del panel Loupe.

    Además, de forma predeterminada, no se muestra la superposición en el panel Loupe. Para mostrarla, establece Show in Loupe en la parte superior de la ventana.