Obtén una vista previa de tu IU de Glimmer de Jetpack Compose con vistas previas de elementos componibles

Jetpack Compose Glimmer es tu kit de herramientas de IU para crear experiencias enriquecidas y envolventes para lentes inteligentes con IA de visualización. A medida que desarrollas tu IU de Glimmer de Jetpack Compose, usa vistas previas de elementos componibles para visualizar tus diseños y realizar iteraciones en ellos de forma rápida y eficiente. Las vistas previas de elementos componibles te brindan una renderización interactiva en vivo de tus componentes de IU de Glimmer de Jetpack Compose directamente en Android Studio. Estas vistas previas eliminan la necesidad de compilar y ejecutar continuamente tu app en un emulador o dispositivo físico para cada pequeño cambio en la IU, lo que acelera drásticamente tu ciclo de desarrollo.

Obtén una vista previa de los componentes de la IU de Glimmer de Jetpack Compose

  1. Abre tu proyecto de XR en la compilación Canary más reciente de Android Studio.
  2. Verifica que tu función de componibilidad tenga la anotación @Preview.

  3. En la vista Código, haz clic en el selector de configuración de vista previa para la función de componibilidad.

  4. En el menú desplegable Dispositivo, selecciona Lentes con IA.

    Esto ajusta la superficie de vista previa para que coincida con la resolución y la relación de aspecto únicas de la pantalla de los lentes con IA.

    Selecciona AI Glasses para el dispositivo en la configuración de vista previa de la función de componibilidad.

  5. Selecciona la vista Diseño o Dividir para ver la vista previa.

    La vista previa del elemento componible se muestra en la vista dividida para un dispositivo simulado de AI Glasses.

Ajusta el entorno de vista previa

Los lentes usan una pantalla transparente aditiva. Esta característica significa que la pantalla solo puede agregar luz, no puede crear el color negro. Con una pantalla aditiva, el negro no es un color, sino que aparece 100% transparente. La vista previa de Compose proporciona una aproximación que te ayuda a comprender cómo se comporta la IU en diferentes condiciones de visualización.

Para simular diferentes condiciones de visualización, haz clic en el ícono de entorno en la barra de herramientas del panel de vista previa. Prueba diferentes opciones de fondo (por ejemplo, Claro, Oscuro o Ocupado) para verificar si el texto y los componentes tienen el contraste y la visibilidad adecuados.