Превратите свое Android-приложение в 3D с помощью XR

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Ваше 2D-мобильное или широкоэкранное Android-приложение по умолчанию работает в Android XR, отображаясь как 2D-панель внутри 3D-пространства. Вы можете добавить захватывающие функции XR, чтобы улучшить ваше существующее 2D-приложение Android, перенеся его из опыта плоского экрана в динамическую 3D-среду.

При переносе вашего Android-приложения в XR учитывайте эти важные принципы.

• Пространственные возможности : Android XR предлагает широкий спектр пространственных функций, доступных для вашего приложения, но вам не обязательно реализовывать каждую отдельную возможность. Стратегически реализуйте те, которые дополняют визуальную иерархию, макеты и пользовательские пути вашего приложения. Рассмотрите возможность включения пользовательских сред и нескольких панелей для создания по-настоящему захватывающего опыта. Обратитесь к руководству по пространственному дизайну пользовательского интерфейса, чтобы определить оптимальную интеграцию пространственных элементов.
• Адаптивный пользовательский интерфейс : XR дает вам гибкость в разработке просторного пользовательского интерфейса, который легко адаптируется к бесконечному полотну и свободно изменяемым размерам окон. Одним из наиболее важных соображений является использование нашего руководства по дизайну больших экранов для оптимизации макета вашего приложения для этой обширной среды. Даже если ваше приложение в настоящее время предназначено только для мобильных устройств, вы все равно можете использовать захватывающие среды для улучшения пользовательского опыта, но пользовательский интерфейс, оптимизированный для больших экранов, является одним из лучших способов оптимизировать ваше приложение для Android XR.
• UI-фреймворк : мы рекомендуем создавать UI с помощью Jetpack Compose для XR. Если ваше приложение в настоящее время использует Views, ознакомьтесь с работой с Views в XR, чтобы узнать больше об использовании взаимодействия Compose при работе с Views, или оцените работу напрямую с библиотекой Jetpack SceneCore.
• Публикация в Play Store : Чтобы убедиться, что ваше приложение с поддержкой XR будет доступно для обнаружения в Play Store:
  • Рассмотрите возможность оптимизации вашего приложения, удалив все ненужные требования к функциям .
  • Убедитесь, что ваше приложение не отключено от публикации XR в Google Play Console, чтобы предотвратить исключение вашего приложения из результатов поиска в Play Store.

<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

Советы по преобразованию 2D-компонентов пользовательского интерфейса в 3D

Соблюдение этих советов может сыграть решающую роль в создании ощущения, что ваше приложение оптимизировано для XR.

• Отдайте приоритет совместимости с большими экранами : убедитесь, что пользовательский интерфейс вашего приложения соответствует принципам дизайна больших экранов , чтобы обеспечить оптимальную читаемость текста и контента в обширных средах XR.
• Используйте пространственные функции стратегически : определите ключевые моменты в пути пользователя к вашему приложению, где внедрение пространственных функций улучшит опыт и позволит использовать уникальные возможности платформы.
• Размещайте пространственные панели с учетом удобства пользователя : при проектировании макета с использованием пространственных панелей располагайте их на удобном расстоянии от пользователя, чтобы они не перегружали его и не создавали ощущения слишком близкого расположения.
• Используйте адаптивный пользовательский интерфейс для пространственных макетов : используйте концепции адаптивного пользовательского интерфейса, такие как панели и постепенное раскрытие, чтобы эффективно разбить макет на несколько пространственных панелей, оптимизируя представление информации.
• Используйте орбитеры для постоянных элементов и шаблонов : зарезервируйте орбитеры для постоянных и контекстных элементов UX, таких как навигация и элементы управления. Ограничьте использование орбитеров, чтобы сохранить ясность и избежать беспорядка.
• Разумно используйте возвышение : применяйте пространственное возвышение к временным компонентам, которые остаются неподвижными и не прокручиваются вместе с содержимым. Избегайте возвышения больших областей, чтобы предотвратить визуальный дискомфорт и поддерживать сбалансированную визуальную иерархию.
• Сборка с Material Design : если вы создаете с последней альфа-версией компонентов Material Design и адаптивными макетами, вы можете добавить оболочку «EnableXrComponentOverrides», чтобы включить изменения XR в вашем приложении. Прочитайте нашу документацию Material Design для XR, чтобы узнать больше.

Jetpack Compose для XR представляет новые компоненты, которые управляют улучшениями XR, чтобы вам не пришлось этого делать. Например, вы можете использовать SpatialPopup и SpatialDialog для замены их 2D-аналогов. Эти компоненты отображаются как типичный 2D-пользовательский интерфейс, когда пространственный пользовательский интерфейс недоступен, и они показывают пространственный пользовательский интерфейс вашего приложения, когда могут. Использовать их так же просто, как внести однострочное изменение для замены соответствующего элемента 2D-UI.

Преобразовать диалог в SpatialDialog

// Previous approach
Dialog(
    onDismissRequest = onDismissRequest
) {
    MyDialogContent()
}

// New XR differentiated approach
SpatialDialog(
    onDismissRequest = onDismissRequest
) {
    MyDialogContent()
}
SpatialDialog.kt

Преобразовать всплывающее окно в SpatialPopup

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}
SpatialPopup.kt

Улучшение 2D-элементов пользовательского интерфейса

Если вы хотите поднять пользовательский интерфейс с более детализированным контролем, мы предоставляем SpatialElevation , чтобы вы могли поднять любой компонуемый элемент в вашем приложении на уровень выше пространственной панели на оси Z, которую вы задаете с помощью SpatialElevationLevel . Это помогает привлечь внимание пользователя, создает лучшую иерархию и улучшает читаемость, как показано в следующем примере.

// Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(spatialElevationLevel = SpatialElevationLevel.Level4) {
    ComposableThatShouldElevateInXr()
}
SpatialElevation.kt

Ключевые моменты кодекса

• Не пространственно распределяйте и не приподнимайте большие области и плоскости, такие как нижние и боковые листы.
• Не располагайте элементы пользовательского интерфейса, которые можно прокручивать, выше содержимого.

Перенос 2D-компонентов на орбитальные аппараты

Орбитеры — это плавающие элементы, которые обычно содержат элементы управления, с которыми может взаимодействовать пользователь. Орбитеры могут быть прикреплены к пространственным панелям или другим сущностям, таким как пространственные макеты. Они позволяют контенту иметь больше места и дают пользователям быстрый доступ к функциям, не загораживая основной контент.

В следующем примере кода показано, как можно перенести компонент 2D-пользовательского интерфейса на орбитер.

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterEdge.Start,
    offset = dimensionResource(R.dimen.start_orbiter_padding),
    alignment = Alignment.Top
) {
    NavigationRail()
}
Orbiter.kt

Ключевые моменты об орбитальных аппаратах

• Орбитеры — это компоненты, предназначенные для присоединения существующих элементов пользовательского интерфейса к пространственной панели.
• Ознакомьтесь с нашим руководством по проектированию приложений Android XR, чтобы узнать, какие элементы следует перенести для орбитальных устройств и какие шаблоны следует избегать.
• Мы рекомендуем адаптировать только несколько компонентов навигации, таких как навигационная панель, верхняя панель приложений или нижняя панель приложений.
• Орбитеры не отображаются, если пространственный пользовательский интерфейс не включен. Например, они не отображаются в Home Space или на таких устройствах, как телефоны, планшеты и складные устройства.

Перенос 2D-компонентов на пространственные панели

Пространственные панели являются основными строительными блоками пользовательского интерфейса приложений Android XR.

Панели служат контейнерами для элементов пользовательского интерфейса, интерактивных компонентов и иммерсивного контента. При проектировании вы можете добавлять такие компоненты, как орбитеры для пользовательских элементов управления, а также пространственно поднимать элементы пользовательского интерфейса, чтобы привлекать внимание к определенным взаимодействиям.

Ключевые моменты кодекса

• Ознакомьтесь с руководством по проектированию приложений Android XR, чтобы узнать, какие элементы следует перенести на панели, а также узнать, каких шаблонов следует избегать.
• Следуйте рекомендациям по пространственному размещению панелей:
  • Панели должны появляться по центру на расстоянии 1,5 м от глаз пользователя.
  • Контент должен отображаться в центре 41° поля зрения пользователя.
• Панели остаются на месте при перемещении пользователя. Привязка доступна только для сквозного режима.
• Придерживайтесь рекомендуемых системой 32 dp скругленных углов для панелей.
• Зоны касания должны быть 56 dp и не менее 48 dp.
• Сохраняйте коэффициент контрастности для удобства чтения, особенно если вы используете прозрачный фон.
• Следуйте принципам цветового дизайна Android и используйте цветовую систему Material Design для реализации темных и светлых тем в вашем приложении.
• Используйте API пространственных панелей с существующими элементами пользовательского интерфейса.

Перенос 2D-интерфейса на единую пространственную панель

По умолчанию ваше приложение отображается с одной панелью в Home Space. Узнайте, как переходить между Home Space и Full Space . Чтобы перенести этот контент в Full Space, вы можете использовать SpatialPanel .

Вот пример того, как это можно сделать.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    Subspace {
        SpatialPanel(
            SubspaceModifier
                .resizable(true)
                .movable(true)
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}
SpatialPanel.kt

Перенесите свой 2D-интерфейс на несколько пространственных панелей

Вы можете использовать одну пространственную панель для пользовательского интерфейса вашего приложения или перенести свой 2D-пользовательский интерфейс на несколько пространственных панелей. Если вы решите использовать несколько панелей для пользовательского интерфейса вашего приложения, вы можете позиционировать и вращать панели (аналогично компоновке вашего пользовательского интерфейса в 2D). Вы начнете с четкого видения дизайна того, чего вы хотите достичь, а затем вы сможете использовать API-интерфейсы пространственной компоновки пользовательского интерфейса ( SpatialBox , SpatialRow , SpatialColumn , SpatialLayoutSpacer , SpatialAlignment ) и модификаторы подпространства для позиционирования и вращения панелей. Есть несколько ключевых шаблонов, которых вам следует избегать при реализации нескольких панелей.

• Избегайте перекрывающихся панелей, которые могут помешать пользователю увидеть важную информацию.
• Не перегружайте пользователя панелями.
• Избегайте размещения панелей в неудобных или незаметных местах. Пример: панели, размещенные позади пользователя, трудно заметить.
• Дополнительную информацию о разработке пространственного пользовательского интерфейса можно найти в нашем полном руководстве .

SpatialRow {
    SpatialPanel(
        SubspaceModifier
            .width(384.dp)
            .height(592.dp)
    ) {
        StartSupportingPanelContent()
    }
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        App()
    }
    SpatialPanel(
        SubspaceModifier
            .width(288.dp)
            .height(480.dp)
    ) {
        EndSupportingPanelContent()
    }
}
SpatialRow.kt

Проверка пространственных возможностей

Когда вы решаете, отображать ли определенный элемент пользовательского интерфейса, избегайте проверки определенных устройств или режимов XR. Проверка устройств или режимов, а не возможностей, может вызвать проблемы, когда возможности на данном устройстве со временем меняются. Вместо этого используйте LocalSpatialCapabilities.current.isSpatialUiEnabled для прямой проверки необходимых возможностей пространственного отображения, как показано в следующем примере. Такой подход гарантирует, что ваше приложение правильно адаптируется к широкому спектру возможностей XR без необходимости обновления каждый раз, когда появляются новые устройства или меняются возможности.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    SupportingInfoPanel()
} else {
    ButtonToPresentInfoModal()
}

// Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled
SpatialCapabilities.kt

Используйте окружение для изменения окружения пользователя.

Если вы хотите создать ощущение погружения в свое приложение, изменив окружение пользователя, вы можете сделать это с помощью окружений. Добавление окружения в код — это простое изменение, которое вы можете сделать без значительного влияния на существующий пользовательский интерфейс вашего приложения. Для получения дополнительной информации о настройке окружения обязательно ознакомьтесь с нашим полным руководством .

Добавить 3D-контент

3D-контент, такой как 3D-модели и пространственное видео, может помочь создать более захватывающий опыт и добавить пространственное понимание. Ваше приложение может отображать 3D-контент только при наличии пространственных возможностей, поэтому вам сначала нужно проверить, доступны ли пространственные возможности.

Обратитесь к соответствующему руководству по добавлению 3D-моделей , пространственного видео или пространственного звука .