Samsung Galaxy XR уже здесь , на базе Android XR! Эта статья является частью нашей Недели, посвященной Android XR , в рамках которой мы предоставляем ресурсы — статьи в блоге, видео, примеры кода и многое другое — все это призвано помочь вам изучить, разработать и подготовить ваши приложения для Android XR.

С выходом Samsung Galaxy XR официально представлено первое устройство на базе Android XR. Теперь пользователи могут наслаждаться многими своими любимыми приложениями из Play Store в совершенно новом измерении: в третьем измерении!

Третье измерение — просторное, и в нём достаточно места и для ваших приложений. Начните сегодня, используя те инструменты, которые подходят для вашего приложения . Например, вы можете использовать Jetpack XR SDK для создания захватывающих XR-приложений с помощью современных инструментов разработки Android, таких как Kotlin и Compose.

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

Обзор Androidify

Androidify — это приложение с открытым исходным кодом, позволяющее создавать ботов для Android, используя новейшие технологии, такие как Gemini, CameraX, Navigation 3 и, конечно же, Jetpack Compose. Изначально Androidify был разработан для того, чтобы отлично выглядеть на телефонах, складных устройствах и планшетах за счет создания адаптивных макетов .

Androidify отлично выглядит на различных форм-факторах.

Ключевым элементом адаптивной компоновки являются многократно используемые компоненты. Jetpack Compose помогает создавать небольшие компоненты пользовательского интерфейса, которые можно располагать различными способами для обеспечения интуитивно понятного взаимодействия с пользователем независимо от типа устройства. Более того, Androidify совместим с Android XR без каких-либо изменений в приложении!

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

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

Ориентирование в XR

Давайте рассмотрим основные базовые понятия Android XR, начиная с двух режимов работы приложений: «Домашнее пространство» и «Полное пространство».

В Home Space можно запускать несколько приложений одновременно, что позволяет пользователям работать в многозадачном режиме в разных окнах. В этом смысле это очень похоже на работу с окнами рабочего стола на большом экране Android-устройства, но в виртуальном пространстве!

В Full Space приложение не имеет пространственных границ и может использовать все пространственные возможности Android XR, такие как пространственный интерфейс и управление виртуальной средой.

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

Разработка дизайна для нового измерения Androidify

Прекрасное приложение начинается с отличного дизайна. Айви Найт, старший дизайнер-консультант в отделе разработки Android, взяла на себя задачу взять существующие дизайны для Androidify и разработать новый дизайн для XR. Слово Айви!

Разработка дизайна для XR требовала уникального подхода, но при этом имела много общего с мобильным дизайном. Мы начали с размышлений о размещении: как организовать и сгруппировать элементы пользовательского интерфейса в подпространстве, либо четко обозначив границы, либо тонко намекнув на них. Мы также научились учитывать все разнообразные размеры пространственных элементов пользовательского интерфейса, которые должны подстраиваться и перемещаться в ответ на действия пользователя. Как и в случае с Androidify, используйте адаптивные макеты , позволяющие разбивать макеты на части для создания пространственного пользовательского интерфейса.

Начало проектирования с Home Space.

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

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

Проектирование с учетом более масштабного перехода к концепции «полного пространства».

Проект Full Space стал самым значительным изменением, но в то же время предоставил нам наибольшее пространство для творческой адаптации нашего дизайна.

Androidify использует визуальную интеграцию, или панели, для группировки функций с фоном и контуром, например, панель «Сделать или выбрать фото». Мы также использовали такие компоненты, как верхняя панель приложения, для создания естественной интеграции, обрамляя другие панели. Наконец, внутренняя интеграция подразумевается близостью определенных элементов к другим, например, нижняя кнопка «Начать преобразование», которая находится рядом с панелью «Выберите цвет бота».

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

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

Другие советы по дизайну, которые помогут вашему приложению создать пространственное представление.

• Дайте вещам свободу : выделите компоненты и дайте им реальное (пространственное) пространство. Пришло время дать элементам пользовательского интерфейса немного «дышать».
• Удалите поверхности : скройте фон и посмотрите, как это повлияет на ваши проекты.
• Мотивируйте движением : как вы используете переходы в своем приложении? Используйте этого персонажа, чтобы представить, как ваше приложение переходит в виртуальную реальность.
• Выберите опорный элемент : не теряйте пользователей в этом пространстве. Используйте элемент, который помогает собрать или закрепить пользовательский интерфейс.

Более подробную информацию о шаблонах проектирования пользовательского интерфейса для XR можно найти в статье «Дизайн для Android XR» на сайте Android Developers .

Основы пространственного пользовательского интерфейса

Теперь, когда мы рассмотрели опыт Айви, адаптировавшей свой подход к разработке Androidify для XR, давайте поговорим о разработке пространственного пользовательского интерфейса. Разработка пространственного пользовательского интерфейса с помощью Jetpack XR SDK должна показаться знакомой, если вы привыкли работать с современными инструментами и библиотеками Android. Вы встретите уже знакомые вам концепции, такие как создание макетов с помощью Compose. На самом деле, пространственные макеты очень похожи на 2D-макеты, использующие строки, столбцы и разделители:

Эти элементы расположены в SpatialRows и SpatialColumns

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

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        Text("I'm a panel!")
    }
}

SpatialPanel — это компонент , компонуемый подпространством . Компоненты, компонуемые подпространством, должны содержаться внутри подпространства и модифицируются объектами SubspaceModifier . Подпространства могут располагаться в любом месте иерархии пользовательского интерфейса вашего приложения и могут содержать только компоненты, компонуемые подпространством. Объекты SubspaceModifier также очень похожи на объекты Modifier: они управляют такими параметрами, как размер и позиционирование.

Orbiter   Их можно прикрепить к SpatialPanel и перемещать вместе с прикрепленным к ним контентом. Они часто используются для предоставления контекстных элементов управления контентом, к которому они прикреплены, позволяя сосредоточить внимание именно на этом контенте. Их можно разместить с любой из четырех сторон контента на настраиваемом расстоянии.

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

Начало работы с разработкой XR

Начнём с настройки проекта. Мы добавили зависимость Jetpack XR Compose, которую вы можете найти на странице зависимостей Jetpack XR .

Мы добавили код для кнопки, которая переводит пользователя в режим Full Space, начиная с определения наличия такой возможности:

@Composable
fun couldRequestFullSpace(): Boolean =
   LocalSpatialConfiguration.current.hasXrSpatialFeature && 
   !LocalSpatialCapabilities.current.isSpatialUiEnabled
}

Затем мы создали новый компонент кнопки, который использует значок «Развернуть содержимое» в существующих макетах, и добавили к нему поведение при нажатии:

@Composable

fun RequestFullSpaceIconButton() {
   if (!couldRequestFullSpace()) return
   val session = LocalSession.current ?: return

   IconButton(
       onClick = {
           session.scene.requestFullSpaceMode()
       },
   ) {
       Icon(
           imageVector =  
               vectorResource(R.drawable.expand_content_24px),
           contentDescription = 
               stringResource("To Full Space"),
       )
   }
}

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

@Composable

fun HomeScreenContents(layoutType: HomeScreenLayoutType) {
   val layoutType = when {
      LocalSpatialCapabilities.current.isSpatialUiEnabled -> 
          HomeScreenLayoutType.Spatial
      isAtLeastMedium() -> HomeScreenLayoutType.Medium
      else -> HomeScreenLayoutType.Compact
   }

   when (layoutType) {
      HomeScreenLayoutType.Compact ->
          HomeScreenCompactPager(...)

      HomeScreenLayoutType.Medium ->
          HomeScreenMediumContents(...)

      HomeScreenLayoutType.Spatial ->
          HomeScreenContentsSpatial(...)
   }
}

Реализация дизайна главного экрана.

Давайте вернемся к пространственному дизайну главного экрана в Full Space, чтобы понять, как он был реализован.

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

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
      SpatialPanel(SubspaceModifier
                   .fillMaxWidth(0.2f)
                   .fillMaxHeight(0.8f)
                   .aspectRatio(0.77f)
                   .rotate(0f, 0f, 5f),
      ) {
          VideoPlayer(videoLink)
      }
   }
}

Мы просто повторно использовали компонент 2D VideoPlayer из стандартных макетов в SpatialPanel без каких-либо дополнительных изменений! Вот как он выглядит в автономном режиме:

Основная панель с контентом следовала той же схеме: мы повторно использовали контент средней панели в SpatialPanel .

SpatialPanel(SubspaceModifier.fillMaxSize(),
             resizePolicy = ResizePolicy(
                 shouldMaintainAspectRatio = true
             ),
             dragPolicy = MovePolicy()
) {
    Box {
        FillBackground(R.drawable.squiggle_full)
        HomeScreenSpatialMainContent(...)
    }
}

Мы добавили к этой панели свойство ResizePolicy, которое предоставляет панели маркеры по краям, позволяющие пользователю изменять её размер. Также у неё есть свойство MovePolicy, позволяющее пользователю перетаскивать её.

Размещение их в одном подпространстве делает их независимыми друг от друга, поэтому мы сделали панель VideoPlayer дочерним элементом основной панели контента. Это приводит к перемещению панели VideoPlayer при перетаскивании основной панели контента через связь «родитель-потомок».

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
       SpatialPanel(SubspaceModifier..., resizePolicy, dragPolicy) {
           Box {
               FillBackground(R.drawable.squiggle_full)
               HomeScreenSpatialMainContent(...)
           }
           Subspace {
              SpatialPanel(SubspaceModifier...) {
                  VideoPlayer(videoLink)
              }
           }
       }
   }
}

Вот так мы сделали первый экран!

Переходим к другим экранам.

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

Здесь мы использовали компоненты SpatialRow и SpatialColumn для создания макета, соответствующего рекомендуемому пространству для просмотра, снова используя компоненты из макета Medium.

Экран результатов в полном объеме: бот, созданный по заданной подсказке: красная бейсболка, солнцезащитные очки-авиаторы, светло-голубая футболка, красно-белые клетчатые шорты, зеленые шлепанцы, в руках теннисная ракетка.

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

Публикация в Google Play Store

Теперь, когда приложение готово к работе с XR благодаря пространственной компоновке, мы выпустили его в Play Store. И последнее важное изменение, которое мы внесли в файл AndroidManifest.xml приложения:

<!-- Androidify can use XR features if they're available; they're not required. -->
<uses-feature android:name="android.software.xr.api.spatial" 
              android:required="false" />

Это позволяет Play Store узнать, что данное приложение обладает функциями, разработанными с учетом XR, отображая значок, указывающий пользователям на то, что приложение создано с учетом требований XR:

При загрузке релиза для XR не требуется никаких специальных шагов: приложение распространяется обычным способом как для пользователей мобильных устройств, так и для пользователей XR-устройств! Однако вы можете добавить скриншоты приложения, специально предназначенные для XR, или даже загрузить иммерсивный предварительный просмотр приложения с использованием пространственного видео. На устройствах Android XR Play Store автоматически отображает это как иммерсивный 3D-предварительный просмотр, позволяя пользователям оценить глубину и масштаб вашего контента до установки приложения.

Начните создавать свой собственный опыт уже сегодня!

Androidify — отличный пример того, как можно пространственно преобразовать существующее 2D-приложение, созданное с помощью Jetpack Compose. Сегодня мы продемонстрировали весь процесс разработки пространственного пользовательского интерфейса для Androidify, от дизайна до кода и публикации. Мы модифицировали существующие дизайны для работы с пространственными парадигмами, использовали компоненты SpatialPanel и Orbiter для создания пространственных макетов, которые отображаются, когда пользователь переходит в режим «Полное пространство», и, наконец, выпустили новую версию приложения в Play Store.

Мы надеемся, что эта статья помогла вам понять, как интегрировать ваши собственные приложения в Android XR! Вот ещё несколько ссылок, которые могут вам помочь:

• Ознакомьтесь с исходным кодом Androidify и создайте собственного бота с помощью Androidify в Google Play .
• Начните работу с нашей документацией для разработчиков и узнайте больше о Jetpack Compose для XR .
• Скачайте эмулятор Android XR и попробуйте создать собственное приложение!