Wdrożenie Material Design na potrzeby XR

Material Design udostępnia komponenty i układy, które dostosowują się do XR. Korzystając z dostępnej biblioteki Material 3, komponenty i schematy adaptacyjne są wzbogacane o zachowania interfejsu przestrzennego.

Możesz dostosować swoją obecną implementację M3, dodając otoczkę EnableXrComponentOverrides. Dodaj bibliotekę XR Compose Material3 do zależności aplikacji.

Używanie EnableXrComponentOverrides do dostosowania dotychczasowej aplikacji

Wszystkie elementy interfejsu tworzenia M3 w ramach obudowy EnableXrComponentOverrides będą dostosowywane do urządzeń XR. Ten element umożliwia wybranie komponentów, które chcesz wykluczyć z tego działania.

Dodaj element EnableXrComponentOverrides, aby dostosować aplikację do Material Design dla XR.

Pasek nawigacyjny w dowolnym układzie tworzenia wiadomości, w tym w NavigationSuiteScaffold, będzie automatycznie dostosowywany do XR Orbiter. Więcej informacji znajdziesz w wytycznych dotyczących Material Design.

Nieprzestrzenna ścieżka nawigacji

Kolumna nawigacji bez lokalizacji przestrzennej

Przestrzenny (dostosowany do rzeczywistości rozszerzonej) pasek nawigacji

Przestrzenny (dostosowany do rzeczywistości rozszerzonej) pasek nawigacji

Pasek nawigacyjny w dowolnym układzie tworzenia wiadomości, w tym NavigationSuiteScaffold, będzie automatycznie dostosowywany do orbitera XR. Więcej informacji znajdziesz w wytycznych dotyczących Material Design.

Pasek nawigacyjny bez spersonalizowania przestrzennego

Pasek nawigacyjny bez lokalizacji

Przestrzenny (dostosowany do rzeczywistości rozszerzonej) pasek nawigacyjny

Pasek nawigacyjny z przestrzennym (dostosowanym do rzeczywistości rozszerzonej) układem

Okna

BasicAlertDialog dostosuje się do XR, dodając komponentowi wysokość.

Dowiedz się więcej o dialogachwytycznych dotyczących projektowania adaptacyjnego.

dialog bez dźwięku przestrzennego;

Okno dialogowe bez lokalizacji przestrzennej

Przestrzenny (dostosowany do XR) dialog

Przestrzenny (dostosowany do XR) dialog

Paski aplikacji

TopAppBar automatycznie dostosuje się do orbitera XR.

Dowiedz się więcej o paskach aplikacjiwytycznych dotyczących projektowania z uwzględnieniem adaptacji.

Górny pasek aplikacji bez lokalizacji

Pasek aplikacji na górze bez lokalizacji przestrzennej

Przestrzenny (dostosowany do XR) pasek aplikacji

Przestrzenny (dostosowany do XR) górny pasek aplikacji

Układ listy z informacjami dla XR

Komponowanie adaptacyjnych układów Material 3 w XR ma mapowanie 1:1, w którym każda karta jest umieszczana w ramach własnego przestrzennego panelu XR. Dowiedz się więcej o ListDetailPaneScaffoldwytycznych dotyczących projektowania adaptacyjnego.

Nieprzestrzenne
ListDetailPaneScaffold

Nieprzestrzenna szkielet ListDetailPane

Przestrzenne (dostosowane do XR)
ListDetailPaneScaffold

Przestrzenne (dostosowane do XR) ListDetailPaneScaffold

Układ panelu pomocy w przypadku XR

Komponowanie adaptacyjnych układów Material 3 w XR ma mapowanie 1:1, w którym każda karta jest umieszczana w ramach własnego przestrzennego panelu XR. Dowiedz się więcej o SupportingPaneScaffoldwytycznych dotyczących projektowania adaptacyjnego.

Nieprzestrzenne
SupportingPaneScaffold

Nieprzestrzenna SupportingPaneScaffold

Przestrzenne (dostosowane do XR)
SupportingPaneScaffold

Przestrzenne (dostosowane do XR) SupportingPaneScaffold

Zacznij projektować za pomocą pakietu Material 3 Design Kit dla Figma

Kolaż elementów z zestawu projektowego Material 3

Pobierz pakiet projektowania Material 3, aby rozpocząć

Zobacz również