Material Design fournit des composants et des mises en page pour la XR. À l'aide de la bibliothèque Material 3, des mises en page adaptatives et de la bibliothèque XR Compose Material 3, vous pouvez intégrer des comportements d'UI spatiale dans votre application Compose.
Ajoutez la bibliothèque XR Compose Material 3 aux dépendances de votre application pour utiliser les composants Material 3 pour XR, ou placez les composants Material 3 standards directement dans les conteneurs Jetpack Compose pour XR tels que Orbiter, SpatialDialog et SpatialPanel.
Utiliser Material 3 pour les composants XR
La bibliothèque androidx.xr.compose.material3 fournit des composants Material 3 pour XR pour les modèles d'UI spatiale courants, y compris les rails et les barres de navigation, les barres d'application supérieures, les barres d'outils flottantes, les boîtes de dialogue, les mises en page liste-détails et un bouton d'activation pour basculer entre Home Space et Full Space. Les composables Spatial* spatialisés de cette bibliothèque sont expérimentaux et nécessitent d'activer l'option avec @OptIn(ExperimentalMaterial3XrApi::class).
Vérifiez LocalSpatialCapabilities.current.isSpatialUiEnabled pour afficher les composants Material 3 pour XR lorsque l'UI spatiale est activée et les composants Material 3 standards lorsque l'UI spatiale n'est pas activée. Pour en savoir plus, consultez Vérifier les fonctionnalités spatiales.
Rail de navigation
Utilisez SpatialNavigationRail ou SpatialWideNavigationRail pour afficher un rail de navigation Material 3 dans un Orbiter aligné au début lorsque l'UI spatiale est activée. Pour en savoir plus, consultez les consignes Material Design.
Rail de navigation non spatialisé
Rail de navigation spatialisé (adapté à la XR)
Barre de navigation
Utilisez SpatialNavigationBar ou SpatialShortNavigationBar pour afficher une barre de navigation Material 3 dans un Orbiter aligné en bas lorsque l'UI spatiale est activée. Pour en savoir plus, consultez les consignes Material Design.
Barre de navigation non spatialisée
Barre de navigation spatialisée (adaptée à la XR)
Boîtes de dialogue
Utilisez SpatialBasicAlertDialog pour afficher une boîte de dialogue d'alerte de base dans un SpatialDialog avec une élévation spatiale, ou encapsulez le contenu d'une boîte de dialogue Material 3 standard directement dans SpatialDialog.
Pour en savoir plus, consultez Boîtes de dialogue et les consignes de conception adaptative.
Dialogue non spatialisé
Boîte de dialogue spatialisée (adaptée à la XR)
Barres d'application supérieures
Utilisez SpatialTopAppBar ou SpatialTwoRowsTopAppBar pour afficher une barre d'application supérieure Material 3 dans un Orbiter aligné en haut lorsque l'UI spatiale est activée.
Pour en savoir plus, consultez Barres d'application supérieures et les consignes de conception adaptative.
Barre d'application supérieure non spatialisée
Barre d'application supérieure spatialisée (adaptée à la XR)
Mise en page liste/détails pour la XR
Utilisez SpatialListDetailPaneScaffold lorsque l'UI spatiale est activée pour afficher une mise en page liste-détails adaptative Material 3 où chaque volet est placé dans son propre SpatialPanel. Lorsque l'UI spatiale n'est pas activée, utilisez ListDetailPaneScaffold. Pour en savoir plus, consultez Mise en page liste-détail et les consignes de conception adaptative.
ListDetailPaneScaffold non spatialisé
ListDetailPaneScaffold spatialisé (adapté à la XR)
Mise en page avec volet secondaire pour la XR
Lorsque l'UI spatiale est activée, placez votre volet principal et votre volet secondaire dans des conteneurs SpatialPanel distincts à l'intérieur d'un SpatialRow dans un Subspace. Lorsque l'UI spatiale n'est pas activée, utilisez SupportingPaneScaffold. Pour en savoir plus, consultez Volet d'accompagnement et les consignes de conception adaptative.
SupportingPaneScaffold non spatialisé
SupportingPaneScaffold spatialisé (adapté à la XR)
Commencer à concevoir avec le kit de conception Material 3 pour Figma
Téléchargez le kit de conception Material 3 pour commencer.
Voir aussi
- Développer une UI avec Jetpack Compose pour XR
- Passer de l'espace Home Space à l'espace Full Space
- Consignes de conception d'UI spatiale