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. Fügen Sie die XR Compose Material3-Bibliothek zu den Abhängigkeiten Ihrer App hinzu.

Vorhandene App mit EnableXrComponentOverrides anpassen

Die gesamte M3 Compose-Benutzeroberfläche im EnableXrComponentOverrides-Wrapper wird an XR-Geräte 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 für 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

Nicht räumlicher Navigationsstreifen

Räumlich dargestellter (für XR angepasster) Navigationsstreifen

Räumlich dargestellter (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 Navigation

Nicht räumliche Navigationsleiste

Räumliche (XR-adaptierte) Navigationsleiste

Räumliche (XR-adaptierte) Navigationsleiste

Dialogfelder

Ein BasicAlertDialog passt sich an XR an und fügt der Komponente eine Höhe hinzu.

Weitere Informationen zu Dialogen und Richtlinien für adaptives Design

Nicht-räumlicher Dialog

Nicht ortsbezogener Dialog

Raumlicher (XR-optimierter) Dialog

Raumliches (XR-adaptiertes) Dialogfeld

Obere App-Leisten

Ein TopAppBar passt sich automatisch an XR-Orbiter an.

Weitere Informationen zu oberen App-Leisten und Richtlinien für adaptives Design

Nicht räumlich orientierte obere App-Leiste

Nicht räumliche obere App-Leiste

Räumliche (XR-adaptierte) obere App-Leiste

Räumliche (XR-adaptierte) obere App-Leiste

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 dargestellt
ListDetailPaneScaffold

Nicht räumlich dargestellte ListDetailPaneScaffold

Räumliche (XR-adaptierte)
ListDetailPaneScaffold

Räumliche (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 dargestellte SupportingPaneScaffold

Nicht räumlich unterstützte SupportingPaneScaffold

Räumlich (XR-adaptiert)
SupportingPaneScaffold

Räumlich (XR-adaptiert) unterstützte Ansicht

Mit dem Material 3 Design Kit für Figma beginnen

Collage aus Elementen aus dem Material 3 Design Kit

Material 3-Designkit herunterladen

Siehe auch