Material Design มีคอมโพเนนต์และเลย์เอาต์สำหรับ XR เมื่อใช้ไลบรารี Material 3, เลย์เอาต์แบบปรับอัตโนมัติ และไลบรารี XR Compose Material 3 คุณจะสร้างลักษณะการทำงานของ UI เชิงพื้นที่ลงในแอป Compose ได้
เพิ่มไลบรารี XR Compose Material 3 ลงในทรัพยากร Dependency ของแอปเพื่อใช้คอมโพเนนต์ Material 3 สำหรับ XR หรือวางคอมโพเนนต์ Material 3 มาตรฐานไว้ในคอนเทนเนอร์ Jetpack Compose สำหรับ XR โดยตรง เช่น Orbiter, SpatialDialog และ SpatialPanel
ใช้คอมโพเนนต์ Material 3 สำหรับ XR
ไลบรารี androidx.xr.compose.material3 มีคอมโพเนนต์ Material 3 สำหรับ XR สำหรับรูปแบบ UI เชิงพื้นที่ที่พบบ่อย ซึ่งรวมถึงแถบและแถบนำทาง แถบแอปด้านบน แถบเครื่องมือแบบลอย กล่องโต้ตอบ เลย์เอาต์รายละเอียดรายการ และปุ่มเปิด/ปิดเพื่อสลับระหว่าง Home Space กับ Full Space Spatial* ที่จัดวางเชิงพื้นที่
คอมโพสิเบิลในไลบรารีนี้เป็นเวอร์ชันทดลองและต้องเลือกใช้ด้วย
@OptIn(ExperimentalMaterial3XrApi::class)
ตรวจสอบ LocalSpatialCapabilities.current.isSpatialUiEnabled เพื่อแสดงผล Material 3 สำหรับคอมโพเนนต์ XR เมื่อเปิดใช้ UI เชิงพื้นที่ และคอมโพเนนต์ Material 3 มาตรฐานเมื่อไม่ได้เปิดใช้ UI เชิงพื้นที่ ดูข้อมูลเพิ่มเติมได้ที่ตรวจสอบความสามารถเชิงพื้นที่
แถบข้างสำหรับไปยังส่วนต่างๆ
ใช้ SpatialNavigationRail หรือ SpatialWideNavigationRail เพื่อแสดงแถบนำทาง Material 3 ใน Orbiter ที่จัดแนวเริ่มต้นเมื่อเปิดใช้ UI เชิงพื้นที่ ดูข้อมูลเพิ่มเติมได้ที่หลักเกณฑ์ของ Material Design
แถบนำทางด้านข้างแบบไม่ใช่เชิงพื้นที่
แถบนำทางด้านข้างแบบเชิงพื้นที่ (ปรับให้เหมาะกับ XR)
แถบนำทาง
ใช้ SpatialNavigationBar หรือ SpatialShortNavigationBar เพื่อแสดงแถบนำทาง Material 3 ใน Orbiter ที่จัดชิดด้านล่างเมื่อเปิดใช้ UI เชิงพื้นที่ ดูข้อมูลเพิ่มเติมได้ที่หลักเกณฑ์ของ Material Design
แถบนำทางแบบไม่ใช่เชิงพื้นที่
แถบนำทางแบบเชิงพื้นที่ (ปรับให้เหมาะกับ XR)
กล่องโต้ตอบ
ใช้ SpatialBasicAlertDialog เพื่อแสดงกล่องโต้ตอบการแจ้งเตือนพื้นฐานภายใน SpatialDialog ที่มีระดับความสูงเชิงพื้นที่ หรือรวมเนื้อหากล่องโต้ตอบ Material 3 มาตรฐานไว้ใน SpatialDialog โดยตรง
ดูข้อมูลเพิ่มเติมได้ที่กล่องโต้ตอบและหลักเกณฑ์การออกแบบแบบปรับอัตโนมัติ
กล่องโต้ตอบแบบไม่ใช่เชิงพื้นที่
กล่องโต้ตอบแบบเชิงพื้นที่ (ปรับให้เหมาะกับ XR)
แถบแอปด้านบน
ใช้ SpatialTopAppBar หรือ SpatialTwoRowsTopAppBar เพื่อแสดงแถบแอปด้านบนของ Material 3 ภายใน Orbiter ที่จัดแนวไว้ด้านบนเมื่อเปิดใช้ UI เชิงพื้นที่
ดูข้อมูลเพิ่มเติมได้ที่แถบแอปด้านบนและหลักเกณฑ์การออกแบบแบบปรับอัตโนมัติ
แถบแอปด้านบนแบบไม่ใช่เชิงพื้นที่
แถบแอปด้านบนแบบเชิงพื้นที่ (ปรับให้เหมาะกับ XR)
เลย์เอาต์รายละเอียดรายการสำหรับ XR
ใช้ SpatialListDetailPaneScaffold เมื่อเปิดใช้ UI เชิงพื้นที่เพื่อแสดงเลย์เอาต์รายละเอียดรายการแบบปรับอัตโนมัติของ Material 3 ซึ่งแต่ละแผงจะอยู่ใน SpatialPanel ของตัวเอง เมื่อไม่ได้เปิดใช้ UI เชิงพื้นที่ ให้ใช้ ListDetailPaneScaffold ดูข้อมูลเพิ่มเติมได้ที่เลย์เอาต์แบบรายละเอียดรายการและหลักเกณฑ์การออกแบบแบบปรับอัตโนมัติ
ListDetailPaneScaffold แบบไม่ใช่เชิงพื้นที่
ListDetailPaneScaffold แบบเชิงพื้นที่ (ปรับให้เหมาะกับ XR)
เลย์เอาต์แผงสนับสนุนสำหรับ XR
เมื่อเปิดใช้ UI เชิงมิติพื้นที่ ให้วางแผงหลักและแผงสนับสนุนไว้ในคอนเทนเนอร์ SpatialPanel แยกกันภายใน SpatialRow ใน Subspace เมื่อไม่ได้เปิดใช้ UI เชิงพื้นที่ ให้ใช้ SupportingPaneScaffold ดูข้อมูลเพิ่มเติมได้ที่แผงสนับสนุนและหลักเกณฑ์การออกแบบแบบปรับอัตโนมัติ
SupportingPaneScaffold แบบไม่ใช่เชิงพื้นที่
SupportingPaneScaffold แบบเชิงพื้นที่ (ปรับให้เหมาะกับ XR)
เริ่มออกแบบด้วยชุดเครื่องมือออกแบบ Material 3 สำหรับ Figma
ดาวน์โหลดชุดเครื่องมือออกแบบ Material 3 เพื่อเริ่มต้นใช้งาน
ดูเพิ่มเติม
- พัฒนา UI ด้วย Jetpack Compose สำหรับ XR
- การเปลี่ยนจาก Home Space เป็น Full Space
- หลักเกณฑ์การออกแบบ UI เชิงพื้นที่