Materyal Tasarım, XR için bileşenler ve düzenler sunar. Material 3 kitaplığı, uyarlanabilir düzenler ve XR Compose Material 3 kitaplığını kullanarak Compose uygulamanıza uzamsal kullanıcı arayüzü davranışları ekleyebilirsiniz.
XR bileşenleri için Material 3'ü kullanmak üzere uygulamanızın bağımlılıklarına XR Compose Material 3 kitaplığını ekleyin veya standart Material 3 bileşenlerini doğrudan XR kapsayıcıları için Jetpack Compose'un (ör. Orbiter, SpatialDialog ve SpatialPanel) içine yerleştirin.
XR bileşenleri için Material 3'ü kullanma
androidx.xr.compose.material3 kitaplığı, yaygın uzamsal kullanıcı arayüzü kalıpları için XR bileşenlerine yönelik Material 3'ü sağlar. Bu bileşenler arasında gezinme rayları ve çubukları, üst uygulama çubukları, kayan araç çubukları, iletişim kutuları, liste ayrıntısı düzenleri ve Ana Sayfa Alanı ile Tam Ekran Alanı arasında geçiş yapmak için bir açma/kapatma düğmesi bulunur. Bu kitaplıktaki uzamsallaştırılmış Spatial* bileşenleri deneyseldir ve @OptIn(ExperimentalMaterial3XrApi::class) ile etkinleştirilmesi gerekir.
Üç boyutlu kullanıcı arayüzü etkinleştirildiğinde XR için Material 3 bileşenlerini, üç boyutlu kullanıcı arayüzü etkinleştirilmediğinde ise standart Material 3 bileşenlerini oluşturmak için LocalSpatialCapabilities.current.isSpatialUiEnabled seçeneğini işaretleyin. Daha fazla bilgi için Üç boyutlu özelliklerin olup olmadığını kontrol etme başlıklı makaleyi inceleyin.
Gezinme sütunu
Üç boyutlu kullanıcı arayüzü etkinleştirildiğinde Material 3 gezinme sütununu başlangıç hizalı Orbiter içinde göstermek için SpatialNavigationRail veya SpatialWideNavigationRail kullanın. Daha fazla bilgi için Materyal Tasarım yönergelerine bakın.
Üç boyutlu olmayan gezinme sütunu
Üç boyutlu (XR'a uyarlanmış) gezinme sütunu
Gezinme çubuğu
Üç boyutlu kullanıcı arayüzü etkinleştirildiğinde, Material 3 gezinme çubuğunu alta hizalanmış bir Orbiter içinde görüntülemek için SpatialNavigationBar veya SpatialShortNavigationBar kullanın. Daha fazla bilgi için Materyal Tasarım yönergelerine bakın.
Üç boyutlu olmayan gezinme çubuğu
Üç boyutlu (XR'a uyarlanmış) gezinme çubuğu
İletişim kutuları
SpatialDialog içinde uzamsal yükseklik içeren temel bir uyarı iletişim kutusu görüntülemek için SpatialBasicAlertDialog kullanın veya standart Material 3 iletişim kutusu içeriğini doğrudan SpatialDialog içine sarmalayın.
Daha fazla bilgi için İletişim kutuları ve uyarlanabilir tasarım yönergeleri başlıklı makaleleri inceleyin.
Üç boyutlu olmayan diyalog
Üç boyutlu (XR'ye uyarlanmış) iletişim kutusu
Üst uygulama çubukları
Üç boyutlu kullanıcı arayüzü etkinleştirildiğinde, üstte hizalanmış bir Orbiter içinde Material 3 üst uygulama çubuğu görüntülemek için SpatialTopAppBar veya SpatialTwoRowsTopAppBar kullanın.
Daha fazla bilgi için Üst uygulama çubukları ve uyarlanabilir tasarım yönergeleri başlıklı makaleleri inceleyin.
Üç boyutlu olmayan üst uygulama çubuğu
Üç boyutlu (XR'ye uyarlanmış) üst uygulama çubuğu
XR için liste-ayrıntı düzeni
Her bölmenin kendi SpatialPanel içine yerleştirildiği Material 3 uyarlanabilir liste ayrıntısı düzenini görüntülemek için uzamsal kullanıcı arayüzü etkinleştirildiğinde SpatialListDetailPaneScaffold kullanın. Üç boyutlu kullanıcı arayüzü etkinleştirilmediğinde ListDetailPaneScaffold kullanın. Daha fazla bilgi için Liste ayrıntısı düzeni ve uyarlanabilir tasarım yönergeleri başlıklı makaleleri inceleyin.
Uzamsallaştırılmamış ListDetailPaneScaffold
Üç boyutlu (XR'ye uyarlanmış) ListDetailPaneScaffold
XR için destek bölmesi düzeni
Üç boyutlu kullanıcı arayüzü etkinleştirildiğinde ana bölmenizi ve destekleyici bölmenizi Subspace içindeki SpatialRow içinde ayrı SpatialPanel kapsayıcılarına yerleştirin. Üç boyutlu kullanıcı arayüzü etkinleştirilmediğinde SupportingPaneScaffold kullanın. Daha fazla bilgi için Destekleyici bölme ve uyarlanabilir tasarım yönergeleri bölümlerini inceleyin.
Üç boyutlu olmayan SupportingPaneScaffold
Üç boyutlu (XR'ye uyarlanmış) SupportingPaneScaffold
Figma için Material 3 Tasarım Kiti ile tasarıma başlama
Başlamak için Material 3 Tasarım Seti'ni indirin
Aşağıdaki kaynakları da incelemenizi öneririz:
- XR için Jetpack Compose ile kullanıcı arayüzü geliştirme
- Ana Sayfa Alanı'ndan Tam Ekran Alanı'na geçiş
- Üç boyutlu kullanıcı arayüzü tasarım yönergeleri