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 wiadomości M3 w ramach opakowania 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.

Kolumna nawigacji bez lokalizacji przestrzennej

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 lokalizacji

Pasek nawigacyjny bez lokalizacji

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

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.

Okno dialogowe bez lokalizacji przestrzennej

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 adaptacyjnego.

Pasek aplikacji na górze bez lokalizacji przestrzennej

Pasek aplikacji na górze bez lokalizacji przestrzennej

Przestrzenny (dostosowany do XR) górny pasek aplikacji

Przestrzenny (dostosowany do XR) górny pasek aplikacji

Układ listy szczegółów 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.

Nieprzestrzenna szkielet ListDetailPane

Nieprzestrzenna szkielet ListDetailPane

Przestrzenne (dostosowane do XR) ListDetailPaneScaffold

Przestrzenne (dostosowane do XR) ListDetailPaneScaffold

Układ panelu pomocy w 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.

Nieprzestrzenna 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 projektów Material 3, aby rozpocząć pracę

Zobacz również