Как добавить в приложение Android поддержку XR

Поддерживаемые XR-устройства
Это руководство поможет вам создавать продукты для таких XR-устройств.
Подробнее о типах устройств XR…
XR-шлемы
Проводные XR-очки
Подробнее о типах устройств XR…

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

При переносе приложения Android в XR учитывайте следующие важные принципы.

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

Преобразование двухмерных компонентов интерфейса в трехмерные

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

  • Обеспечьте совместимость с большими экранами. Убедитесь, что интерфейс приложения соответствует принципам дизайна для больших экранов. Это поможет сделать текст и контент более читабельными в расширенных средах XR.
  • Используйте пространственные функции стратегически. Определите ключевые моменты на пути пользователя в приложении, когда добавление пространственных функций улучшит его опыт и позволит воспользоваться уникальными возможностями платформы.
  • Размещайте пространственные панели так, чтобы пользователю было удобно. При разработке макета с пространственными панелями размещайте их на комфортном расстоянии от пользователя, чтобы не перегружать его и не создавать ощущение, что они находятся слишком близко.
  • Используйте адаптивный интерфейс для пространственных макетов. Используйте концепции адаптивного интерфейса, такие как панели и постепенное раскрытие, чтобы эффективно разбить макет на несколько пространственных панелей и оптимизировать представление информации.
  • Используйте орбитеры для постоянных элементов и шаблонов. Орбитеры подходят для постоянных и контекстных элементов UX, таких как навигация и элементы управления. Ограничьте использование орбитеров, чтобы сохранить ясность и избежать беспорядка.
  • Используйте высоту с умом. Применяйте пространственную высоту к временным компонентам, которые остаются неподвижными и не прокручиваются вместе с контентом. Не поднимайте большие области, чтобы не создавать визуальный дискомфорт и поддерживать сбалансированную визуальную иерархию.

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

Как преобразовать диалоговое окно в SpatialDialog

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

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

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

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

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

Приподнимите элементы интерфейса

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

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

Важные сведения о коде

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

Перенос двухмерных компонентов в орбитеры

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

Непространственная панель навигации

Непространственная панель навигации

Пространственная (адаптированная для XR) панель навигации

Пространственная (адаптированная для XR) панель навигации

В примере кода ниже показано, как перенести двухмерный компонент интерфейса в орбитер.

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterPosition.TopStart(
        horizontalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
        offset = DpVolumeOffset(x = dimensionResource(R.dimen.start_orbiter_padding))
    )
) {
    NavigationRail()
}

Основные сведения об орбитальных аппаратах

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

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

Пространственные панели – это основные элементы интерфейса приложений Android XR.

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

Важные сведения о коде

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

Перенос двухмерного интерфейса на одну пространственную панель

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

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

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    Subspace {
        SpatialPanel(
            modifier = SubspaceModifier.movable().resizable(),
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}

Как перенести двухмерный интерфейс на несколько пространственных панелей

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

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

Непространственный контент

Контент без пространственного звучания

Пространственные (адаптированные для XR) элементы управления мультимедиа в орбитере и контент, разделенный на несколько пространственных панелей.

Пространственные (адаптированные для XR) элементы управления мультимедиа на орбитере и контент, разделенный на несколько пространственных панелей.

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()
    }
}

Добавьте пространственные возможности

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

Проверка поддержки пространственных данных

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

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

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

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

Чтобы создать в приложении эффект погружения, измените окружение пользователя. Добавление среды в код – это простое изменение, которое можно внести, не оказывая существенного влияния на существующий пользовательский интерфейс приложения. Подробнее о настройке среды…

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

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

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