Просмотрите свой Jetpack Compose Glimmer UI с помощью компонуемых предпросмотров

Jetpack Compose Glimmer — это ваш набор инструментов для создания насыщенного и реалистичного пользовательского интерфейса для очков с искусственным интеллектом. При разработке пользовательского интерфейса Jetpack Compose Glimmer используйте компонуемые превью для быстрой и эффективной визуализации и итерации ваших проектов. Компонуемые превью обеспечивают интерактивную визуализацию компонентов пользовательского интерфейса Jetpack Compose Glimmer непосредственно в Android Studio. Эти превью устраняют необходимость постоянной сборки и запуска приложения на эмуляторе или физическом устройстве для каждого небольшого изменения пользовательского интерфейса, что значительно ускоряет цикл разработки.

Смотрите также
Если вы новичок в работе с компонуемыми предварительными просмотрами при разработке Android, ознакомьтесь с общей документацией по Compose.

Предварительный просмотр компонентов пользовательского интерфейса Jetpack Compose Glimmer

  1. Откройте свой проект XR в последней сборке Canary Android Studio.
  2. Убедитесь, что ваша компонуемая функция аннотирована с помощью @Preview .

  3. В представлении кода нажмите кнопку просмотр» в окне выбора конфигурации для компонуемой функции.

  4. В раскрывающемся меню «Устройство» выберите «Очки ИИ» .

    Это позволяет настроить поверхность предварительного просмотра в соответствии с уникальным разрешением и соотношением сторон дисплея очков ИИ.

    Выберите AI Glasses для устройства в конфигурации предварительного просмотра компонуемой функции.

  5. Для предварительного просмотра выберите режим «Дизайн» или «Разделить» .

    Предварительный просмотр композиции отображается в режиме разделения для моделируемого устройства AI Glasses.

Настройте среду предварительного просмотра

В очках используется аддитивный, прозрачный дисплей. Это означает, что дисплей может только добавлять свет, но не создавать чёрный цвет. В аддитивном дисплее чёрный не является цветом — он выглядит полностью прозрачным. Предварительный просмотр Compose даёт приблизительное представление, которое помогает понять, как пользовательский интерфейс ведёт себя в различных условиях просмотра.

Чтобы смоделировать различные условия просмотра, нажмите значок «Окружение» на панели инструментов предварительного просмотра. Попробуйте разные варианты фона (например, «Светлый», «Тёмный» или «Занятый»), чтобы проверить, достаточно ли контрастны и заметны текст и компоненты.