Превратите свое 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-модели вы можете использовать компонуемый объем для обертывания объекта модели glTF и применения модификаторов подпространства для управления его представлением. Использование Volume позволяет декларативно размещать 3D-модели относительно вашего пространственного пользовательского интерфейса. Дополнительные сведения о показе 3D-моделей в вашем приложении см. в статье Создание, контроль и управление объектами .