O Material Design oferece componentes e layouts para XR. Usando a biblioteca Material 3, os layouts adaptáveis e a biblioteca XR Compose Material 3, você pode criar comportamentos de interface espacial no seu app do Compose.
Adicione a biblioteca XR Compose Material 3 às dependências do app para usar
os componentes do Material 3 para XR ou coloque componentes padrão do Material 3
diretamente dentro de contêineres do Jetpack Compose para XR, como Orbiter,
SpatialDialog e SpatialPanel.
Usar componentes do Material 3 para XR
A biblioteca androidx.xr.compose.material3 oferece componentes do Material 3 para XR
para padrões comuns de interface espacial, incluindo colunas e barras de navegação, barras de apps na parte de cima, barras de ferramentas flutuantes, caixas de diálogo, layouts de detalhes e listas e um botão
para alternar entre o Espaço Compacto e o Espaço Ampliado. Os elementos combináveis Spatial*
espacializados nessa biblioteca são experimentais e exigem a ativação com
@OptIn(ExperimentalMaterial3XrApi::class).
Verifique LocalSpatialCapabilities.current.isSpatialUiEnabled para renderizar
os componentes do Material 3 para XR quando a interface espacial estiver ativada e os componentes padrão do Material 3
quando ela não estiver. Para mais informações, consulte Verificar
recursos espaciais.
Coluna de navegação
Use SpatialNavigationRail ou SpatialWideNavigationRail para mostrar
uma coluna de navegação do Material 3 em um Orbiter alinhado ao início quando a interface espacial
estiver ativada. Para mais informações, consulte as diretrizes do Material Design.
Coluna de navegação não espacializada
Coluna de navegação espacializada (adaptada para XR)
Barra de navegação
Use SpatialNavigationBar ou SpatialShortNavigationBar para mostrar
uma barra de navegação do Material 3 em um Orbiter alinhado à parte de baixo quando a interface espacial
estiver ativada. Para mais informações, consulte as diretrizes do Material Design.
Barra de navegação não espacializada
Barra de navegação espacializada (adaptada para XR)
Caixas de diálogo
Use SpatialBasicAlertDialog para mostrar uma caixa de diálogo de alerta básica dentro de um
SpatialDialog com elevação espacial ou envolva o conteúdo padrão da caixa de diálogo do Material 3
diretamente em SpatialDialog.
Para mais informações, consulte Caixas de diálogo e as diretrizes de design adaptável.
Diálogo não espacializado
Caixa de diálogo espacializada (adaptada para XR)
Barras de apps na parte de cima
Use SpatialTopAppBar ou SpatialTwoRowsTopAppBar para mostrar uma
barra de apps superior do Material 3 dentro de um Orbiter alinhado na parte de cima quando a IU espacial estiver
ativada.
Para mais informações, consulte Barras de apps de cima e as diretrizes de design adaptável.
Barra de apps superior não espacializada
Barra de apps superior espacializada (adaptada para XR)
Layout de detalhes e listas para XR
Use SpatialListDetailPaneScaffold quando a interface espacial estiver ativada para mostrar
um layout de detalhes e listas adaptável do Material 3 em que cada painel é colocado dentro
do próprio SpatialPanel. Quando a interface espacial não estiver ativada, use
ListDetailPaneScaffold. Para mais informações, consulte Layout de detalhes e listas e as diretrizes de design adaptável.
ListDetailPaneScaffold não espacializado
ListDetailPaneScaffold espacializado (adaptado para XR)
Layout do painel de suporte para XR
Quando a interface espacial estiver ativada, coloque o painel principal e o de suporte em
contêineres SpatialPanel separados dentro de um SpatialRow em um
Subspace. Quando a interface espacial não estiver ativada, use
SupportingPaneScaffold. Para mais informações, consulte Painel de suporte
e as diretrizes de design adaptável.
SupportingPaneScaffold não espacializado
SupportingPaneScaffold espacializado (adaptado para XR)
Comece a criar com o kit de design do Material 3 para o Figma
Baixe o kit de design do Material 3 para começar
Consulte também
- Desenvolver a interface com o Jetpack Compose para XR
- Transição do Espaço Compacto para o Espaço Ampliado
- Diretrizes de design de IU espacial