Mengimplementasikan Desain Material untuk XR

Desain Material menyediakan komponen dan tata letak yang beradaptasi untuk XR. Dengan menggunakan library Material 3 yang ada, komponen dan tata letak adaptif akan ditingkatkan dengan perilaku UI spasial.

Anda dapat menyesuaikan penerapan M3 saat ini dengan menambahkan wrapper EnableXrComponentOverrides.

Menggunakan EnableXrComponentOverrides untuk menyesuaikan aplikasi yang ada

Semua UI Compose M3 di dalam wrapper EnableXrComponentOverrides akan beradaptasi di perangkat XR. Wrapper ini memungkinkan Anda memilih komponen yang ingin dikecualikan dari perilaku ini.

Tambahkan wrapper EnableXrComponentOverrides untuk menyesuaikan aplikasi Anda dengan Desain Material untuk XR.

Kolom samping navigasi di tata letak Compose apa pun, termasuk NavigationSuiteScaffold, akan otomatis beradaptasi dengan XR Orbiter. Untuk informasi selengkapnya, baca Panduan Desain Material.

Kolom samping navigasi non-spasial
Kolom samping navigasi yang di-spatialisasi (diadaptasi untuk XR)

Menu navigasi di tata letak Compose apa pun, termasuk NavigationSuiteScaffold, akan otomatis beradaptasi dengan orbiter XR. Untuk informasi selengkapnya, baca Panduan Desain Material.

Menu navigasi non-spasial
Menu navigasi yang di-spatialisasi (disesuaikan dengan XR)

Tata letak daftar-detail untuk XR

Tata Letak Adaptif Compose Material 3 di XR memiliki pemetaan 1:1 dengan setiap panel ditempatkan di dalam panel spasial XR-nya sendiri. Pelajari lebih lanjut ListDetailPaneScaffold dan panduan desain adaptif.

ListDetailPaneScaffold non-spasial
ListDetailPaneScaffold yang di-spatialisasi (diadaptasi XR)

Mendukung tata letak panel untuk XR

Tata Letak Adaptif Compose Material 3 di XR memiliki pemetaan 1:1 dengan setiap panel ditempatkan di dalam panel spasial XR-nya sendiri. Pelajari lebih lanjut SupportingPaneScaffold dan panduan desain adaptif.

SupportingPaneScaffold non-spasial
SupportingPaneScaffold yang di-spatialisasi (diadaptasi XR)

Mulai mendesain dengan Material 3 Design Kit untuk Figma

Kolase elemen dari Kit Desain Material 3

Download Kit Desain Material 3 untuk memulai

Lihat juga