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

​

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

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

  • Пространственные возможности . Android XR предлагает широкий спектр пространственных функций, доступных для вашего приложения, но вам не обязательно реализовывать каждую из них. Стратегически реализуйте те, которые дополняют визуальную иерархию, макеты и пути пользователя вашего приложения. Рассмотрите возможность использования пользовательских сред и нескольких панелей, чтобы создать по-настоящему захватывающий опыт. Обратитесь к руководству по проектированию пространственного пользовательского интерфейса, чтобы определить оптимальную интеграцию пространственных элементов.
  • Адаптивный пользовательский интерфейс : XR дает вам возможность создавать просторный пользовательский интерфейс, который легко адаптируется к бесконечному холсту и окнам со свободным изменением размера. Одним из наиболее важных соображений является использование нашего руководства по дизайну больших экранов , чтобы оптимизировать макет вашего приложения для этой обширной среды. Даже если ваше приложение в настоящее время предназначено только для мобильных устройств, вы все равно можете использовать привлекательную среду для улучшения пользовательского опыта, но пользовательский интерфейс, оптимизированный для больших экранов, является одним из лучших способов оптимизировать ваше приложение для Android XR.
  • Платформа пользовательского интерфейса . Мы рекомендуем создавать пользовательский интерфейс с помощью Jetpack Compose для XR. Если ваше приложение в настоящее время использует представления, ознакомьтесь с работой с представлениями в XR, чтобы узнать больше об использовании совместимости Compose при работе с представлениями, или оцените работу непосредственно с библиотекой Jetpack SceneCore.
  • Публикация в Play Store . Чтобы ваше приложение с расширенными возможностями XR было доступно для обнаружения в Play Store:
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

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

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

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

Jetpack Compose для XR представляет новые компоненты, которые управляют улучшениями XR, так что вам не придется это делать. Например, вы можете использовать SpatialPopup и SpatialDialog для замены их двумерных аналогов. Эти компоненты отображаются как типичный 2D-пользовательский интерфейс, когда пространственный пользовательский интерфейс недоступен, и отображают пространственный пользовательский интерфейс вашего приложения, когда это возможно. Использовать их так же просто, как внести однострочное изменение для замены соответствующего элемента 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()
}

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

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

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

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

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

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

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

Непространственный навигационный рельс
Пространственная (адаптированная к XR) навигационная направляющая

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

// Previous approach
NavigationRail()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Избегайте перекрытия панелей, которые мешают пользователю видеть важную информацию.
  • Не перегружайте пользователя панелями.
  • Не размещайте панели в неудобных или незаметных местах. Пример: панели, расположенные позади пользователя, трудно заметить.
  • Дополнительные сведения о разработке пространственного пользовательского интерфейса см. в нашем полном руководстве .
Непространственный контент
Пространственные (адаптированные к XR) элементы управления мультимедиа внутри орбитального аппарата и контент, разбитый на несколько пространственных панелей. 
SpatialRow(curveRadius = 825.dp) {
    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()
    }
}

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

Когда вы решаете, отображать ли определенный элемент пользовательского интерфейса, не проверяйте определенные устройства или режимы 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-контенте, поэтому вам необходимо убедиться, что ваше приложение по-прежнему обеспечивает удобство работы без добавленных вами 3D-объектов.

Добавляйте 3D-модели с помощью SceneViewer

Если вы хотите представить 3D-модели своим пользователям, существует несколько способов решения этой проблемы. Если у вас есть готовый к использованию glTF на вашем сервере, самый простой способ — использовать SceneViewer XR. Вы можете сделать это, создав явное намерение, которое запустит приложение SceneViewer XR на устройстве. Это позволит пользователю просматривать объект и свободно перемещать и изменять его размеры в своем окружении.

Добавляйте 3D-модели напрямую с помощью объектов Volume.

Если вам нужен больший контроль над такими вещами, как положение 3D-модели, относительный размер или детальная анимация, вы можете загрузить ресурс glTF непосредственно в свое приложение. После загрузки 3D-модели вы можете использовать составной элемент Volume, чтобы обернуть объект модели glTF и применить модификаторы подпространства для управления его представлением. Использование Volume позволяет декларативно размещать 3D-модели относительно вашего пространственного пользовательского интерфейса. Дополнительные сведения о показе 3D-моделей в вашем приложении см. в статье Создание, контроль и управление объектами .