Material Design für XR implementieren

Material Design bietet Komponenten und Layouts, die sich an XR anpassen. Mithilfe der vorhandenen Material 3-Bibliothek werden Komponenten und adaptive Layouts um räumliche UI-Verhaltene erweitert.

Sie können Ihre aktuelle M3-Implementierung anpassen, indem Sie den EnableXrComponentOverrides-Wrapper hinzufügen.

Vorhandene App mit EnableXrComponentOverrides anpassen

Die gesamte M3 Compose-Benutzeroberfläche innerhalb des EnableXrComponentOverrides-Wrappers wird auf XR-Geräten angepasst. Mit diesem Wrapper können Sie Komponenten auswählen, die von diesem Verhalten ausgeschlossen werden sollen.

Fügen Sie den EnableXrComponentOverrides-Wrapper hinzu, um Ihre App an Material Design for XR anzupassen.

Die Navigationsleiste in jedem Compose-Layout, einschließlich NavigationSuiteScaffold, passt sich automatisch an XR Orbiter an. Weitere Informationen finden Sie in den Material Design-Richtlinien.

Nicht räumlicher Navigationsstreifen
Räumlicher (für XR angepasster) Navigationsstreifen

Die Navigationsleiste in jedem Compose-Layout, einschließlich NavigationSuiteScaffold, wird automatisch an XR-Orbiter angepasst. Weitere Informationen finden Sie in den Material Design-Richtlinien.

Nicht räumliche Navigationsleiste
Räumliche (XR-adaptierte) Navigationsleiste

Listendetaillayout für XR

Adaptive Material 3-Layouts in XR haben eine 1:1-Zuordnung, bei der jeder Bereich in einem eigenen XR-Raumbereich platziert wird. Weitere Informationen zu ListDetailPaneScaffold und den Richtlinien für adaptives Design

Nicht räumlich dargestellte ListDetailPaneScaffold
Räumlich dargestellte (XR-adaptierte) ListDetailPaneScaffold

Supportbereichslayout für XR

Adaptive Material 3-Layouts in XR haben eine 1:1-Zuordnung, bei der jeder Bereich in einem eigenen XR-Raumbereich platziert wird. Weitere Informationen zu SupportingPaneScaffold und den Richtlinien für adaptives Design

Nicht räumlich unterstützte SupportingPaneScaffold
Raumliches (XR-adaptiertes) SupportingPaneScaffold

Mit dem Material 3 Design Kit für Figma beginnen

Collage aus Elementen aus dem Material 3 Design Kit

Material 3 Design Kit herunterladen

Siehe auch