В Material Design есть компоненты и макеты для XR. Используя библиотеку Material 3, адаптивные макеты и библиотеку XR Compose Material 3, вы можете встроить в приложение Compose пространственные элементы интерфейса.
Добавьте библиотеку XR Compose Material 3 в зависимости приложения, чтобы использовать компоненты Material 3 для XR, или поместите стандартные компоненты Material 3 непосредственно в контейнеры Jetpack Compose для XR, такие как Orbiter, SpatialDialog и SpatialPanel.
Используйте компоненты Material 3 для XR
Библиотека androidx.xr.compose.material3 предоставляет компоненты Material 3 для XR, которые позволяют создавать стандартные пространственные элементы интерфейса, такие как панели навигации, верхние панели приложений, плавающие панели инструментов, диалоговые окна, макеты со списком и подробной информацией, а также переключатель между домашним и полным пространством. Пространственные Spatial*
composable-функции в этой библиотеке являются экспериментальными и требуют включения с помощью
@OptIn(ExperimentalMaterial3XrApi::class).
Установите флажок LocalSpatialCapabilities.current.isSpatialUiEnabled, чтобы отрисовывать компоненты Material 3 для XR, когда пространственный интерфейс включен, и стандартные компоненты Material 3, когда он отключен. Подробнее о том, как проверить поддержку пространственных функций…
Боковая панель навигации
Используйте SpatialNavigationRail или SpatialWideNavigationRail, чтобы показать панель навигации Material 3 в выровненном по началу Orbiter, когда включен пространственный интерфейс. Дополнительную информацию можно найти в руководстве по Material Design.
Непространственная панель навигации
Пространственная (адаптированная для XR) панель навигации
Панель навигации
Используйте SpatialNavigationBar или SpatialShortNavigationBar, чтобы показывать панель навигации Material 3 в выровненном по нижнему краю Orbiter, когда включен пространственный интерфейс. Дополнительную информацию можно найти в руководстве по Material Design.
Непространственная панель навигации
Пространственная панель навигации (адаптированная для XR)
Диал. окна
Используйте SpatialBasicAlertDialog, чтобы показать базовое диалоговое окно с оповещением внутри SpatialDialog с пространственным возвышением, или поместите стандартный контент диалогового окна Material 3 непосредственно в SpatialDialog.
Дополнительную информацию можно найти в руководстве по диалоговым окнам и рекомендациях по адаптивному дизайну.
Диалоги без пространственного звучания
Пространственное (адаптированное для XR)
Верхние панели приложения
Используйте SpatialTopAppBar или SpatialTwoRowsTopAppBar, чтобы показать верхнюю панель приложения Material 3 внутри выровненного по верхнему краю Orbiter, когда включен пространственный интерфейс.
Дополнительную информацию можно найти в руководстве по верхним панелям приложений и рекомендациях по адаптивному дизайну.
Непространственная верхняя панель приложения
Пространственная (адаптированная для XR) верхняя панель приложения
Макет "Список и подробные сведения" для XR
Используйте SpatialListDetailPaneScaffold, когда включен пространственный интерфейс, чтобы показывать адаптивный макет списка и подробных сведений Material 3, в котором каждая панель размещена в собственном элементе SpatialPanel. Если пространственный интерфейс не включен, используйте ListDetailPaneScaffold. Дополнительную информацию можно найти в руководстве по макету со списком и подробными сведениями и руководстве по адаптивному дизайну.
Непространственный ListDetailPaneScaffold
Пространственный (адаптированный для XR) ListDetailPaneScaffold
Поддержка макета с панелями для XR
Если пространственный интерфейс включен, поместите основную и вспомогательную панели в отдельные контейнеры SpatialPanel внутри SpatialRow в Subspace. Если пространственный интерфейс не включен, используйте SupportingPaneScaffold. Дополнительную информацию можно найти в разделе Вспомогательная панель и рекомендациях по адаптивному дизайну.
SupportingPaneScaffold без пространственного звука
Пространственный (адаптированный для XR) SupportingPaneScaffold
Начните создавать дизайн с помощью Material 3 Design Kit для Figma
Скачайте Material 3 Design Kit, чтобы начать работу
Дополнительная информация
- Разработка интерфейса с помощью Jetpack Compose для XR
- Переход из главного пространства в полное
- Рекомендации по дизайну пространственного интерфейса