Desain Material menyediakan komponen dan tata letak untuk XR. Dengan menggunakan library Material 3, tata letak adaptif, dan library XR Compose Material 3, Anda dapat membangun perilaku UI spasial ke dalam aplikasi Compose.
Tambahkan library XR Compose Material 3 ke dependensi aplikasi Anda untuk menggunakan
komponen Material 3 untuk XR, atau tempatkan komponen Material 3 standar
langsung di dalam Jetpack Compose untuk container XR seperti Orbiter,
SpatialDialog, dan SpatialPanel.
Menggunakan komponen Material 3 untuk XR
Library androidx.xr.compose.material3 menyediakan komponen Material 3 untuk XR
untuk pola UI spasial umum—termasuk kolom dan panel navigasi,
panel aplikasi atas, toolbar mengambang, dialog, tata letak daftar-detail, dan tombol
tombol untuk beralih antara Ruang Rumah dan Ruang Penuh. Composable Spatial*
yang di-spasialisasi dalam library ini bersifat eksperimental dan memerlukan keikutsertaan dengan
@OptIn(ExperimentalMaterial3XrApi::class).
Periksa LocalSpatialCapabilities.current.isSpatialUiEnabled untuk merender
komponen Material 3 untuk XR saat UI spasial diaktifkan dan komponen Material 3
standar saat UI spasial tidak diaktifkan. Untuk mengetahui informasi selengkapnya, lihat Memeriksa
kemampuan spasial.
Kolom samping navigasi
Gunakan SpatialNavigationRail atau SpatialWideNavigationRail untuk menampilkan
kolom navigasi Material 3 di Orbiter yang rata kiri saat UI spasial
diaktifkan. Untuk informasi selengkapnya, lihat panduan Desain
Material.
Kolom samping navigasi non-spasial
Kolom samping navigasi spasial (disesuaikan dengan XR)
Menu navigasi
Gunakan SpatialNavigationBar atau SpatialShortNavigationBar untuk menampilkan
menu navigasi Material 3 di Orbiter yang rata bawah saat UI spasial
diaktifkan. Untuk informasi selengkapnya, lihat panduan Desain
Material.
Menu navigasi non-spasial
Menu navigasi spasial (disesuaikan dengan XR)
Dialog
Gunakan SpatialBasicAlertDialog untuk menampilkan dialog pemberitahuan dasar di dalam
SpatialDialog dengan elevasi spasial, atau gabungkan konten dialog Material 3 standar
langsung di SpatialDialog.
Untuk mengetahui informasi selengkapnya, lihat Dialog dan panduan desain adaptif.
Dialog non-spasial
Dialog spasial (disesuaikan dengan XR)
Panel aplikasi atas
Gunakan SpatialTopAppBar atau SpatialTwoRowsTopAppBar untuk menampilkan
panel aplikasi atas Material 3 di dalam Orbiter yang sejajar di atas saat UI spasial
diaktifkan.
Untuk mengetahui informasi selengkapnya, lihat Panel aplikasi atas dan pedoman desain adaptif.
Panel aplikasi atas non-spasial
Panel aplikasi atas yang disesuaikan untuk XR (spasial)
Tata letak daftar-detail untuk XR
Gunakan SpatialListDetailPaneScaffold saat UI spasial diaktifkan untuk menampilkan
tata letak daftar-detail Material 3 adaptif dengan setiap panel ditempatkan di dalam
SpatialPanel-nya sendiri. Jika UI spasial tidak diaktifkan, gunakan
ListDetailPaneScaffold. Untuk mengetahui informasi selengkapnya, lihat Tata letak
daftar-detail dan panduan desain adaptif.
ListDetailPaneScaffold non-spasial
ListDetailPaneScaffold yang dis spasialkan (disesuaikan dengan XR)
Tata letak panel pendukung untuk XR
Jika UI spasial diaktifkan, tempatkan panel utama dan panel pendukung ke dalam
penampung SpatialPanel terpisah di dalam SpatialRow dalam
Subspace. Jika UI spasial tidak diaktifkan, gunakan
SupportingPaneScaffold. Untuk mengetahui informasi selengkapnya, lihat Panel pendukung
dan panduan desain adaptif.
SupportingPaneScaffold non-spasial
SupportingPaneScaffold yang dispesialisasi (disesuaikan dengan XR)
Mulai mendesain dengan Material 3 Design Kit untuk Figma
Download Kit Desain Material 3 untuk memulai
Lihat juga
- Mengembangkan UI dengan Jetpack Compose untuk XR
- Transisi dari Ruang Beranda ke Ruang Penuh
- Panduan desain UI spasial