Material Design cung cấp các thành phần và bố cục cho XR. Bằng cách sử dụng thư viện Material 3, bố cục thích ứng và thư viện XR Compose Material 3, bạn có thể xây dựng các hành vi giao diện người dùng không gian vào ứng dụng Compose của mình.
Thêm thư viện XR Compose Material 3 vào các phần phụ thuộc của ứng dụng để sử dụng các thành phần Material 3 cho XR hoặc đặt các thành phần Material 3 tiêu chuẩn ngay bên trong Jetpack Compose cho các vùng chứa XR như Orbiter, SpatialDialog và SpatialPanel.
Sử dụng các thành phần Material 3 cho XR
Thư viện androidx.xr.compose.material3 cung cấp các thành phần Material 3 cho XR cho các mẫu giao diện người dùng không gian phổ biến, bao gồm cả thanh điều hướng, thanh ứng dụng trên cùng, thanh công cụ nổi, hộp thoại, bố cục danh sách-chi tiết và nút bật tắt để chuyển đổi giữa Không gian chính và Toàn bộ không gian. Các thành phần kết hợp Spatial* được không gian hoá trong thư viện này đang trong giai đoạn thử nghiệm và bạn cần chọn sử dụng bằng @OptIn(ExperimentalMaterial3XrApi::class).
Hãy xem LocalSpatialCapabilities.current.isSpatialUiEnabled để kết xuất các thành phần Material 3 cho XR khi giao diện người dùng không gian được bật và các thành phần Material 3 tiêu chuẩn khi giao diện người dùng không gian không được bật. Để biết thêm thông tin, hãy xem phần Kiểm tra các tính năng không gian.
Dải điều hướng
Sử dụng SpatialNavigationRail hoặc SpatialWideNavigationRail để hiển thị thanh điều hướng Material 3 trong Orbiter được căn chỉnh theo điểm bắt đầu khi giao diện người dùng không gian được bật. Để biết thêm thông tin, hãy xem Nguyên tắc thiết kế Material Design.
Dải điều hướng không có hiệu ứng không gian
Dải điều hướng không gian (phù hợp với XR)
Thanh điều hướng
Sử dụng SpatialNavigationBar hoặc SpatialShortNavigationBar để hiển thị thanh điều hướng Material 3 trong Orbiter được căn chỉnh ở dưới cùng khi giao diện người dùng không gian được bật. Để biết thêm thông tin, hãy xem Nguyên tắc thiết kế Material Design.
Thanh điều hướng không có không gian
Thanh điều hướng không gian (phù hợp với XR)
Hộp thoại
Sử dụng SpatialBasicAlertDialog để hiển thị hộp thoại cảnh báo cơ bản bên trong SpatialDialog có độ nâng không gian hoặc gói trực tiếp nội dung hộp thoại Material 3 tiêu chuẩn trong SpatialDialog.
Để biết thêm thông tin, hãy xem phần Hộp thoại và nguyên tắc thiết kế thích ứng.
Hộp thoại không có âm thanh không gian
Hộp thoại không gian (được điều chỉnh cho XR)
Thanh ứng dụng trên cùng
Sử dụng SpatialTopAppBar hoặc SpatialTwoRowsTopAppBar để hiển thị thanh ứng dụng trên cùng của Material 3 bên trong Orbiter được căn chỉnh trên cùng khi giao diện người dùng không gian được bật.
Để biết thêm thông tin, hãy xem phần Thanh ứng dụng trên cùng và nguyên tắc thiết kế thích ứng.
Thanh ứng dụng trên cùng không có âm thanh không gian
Thanh ứng dụng trên cùng được không gian hoá (phù hợp với XR)
Bố cục danh sách-chi tiết cho XR
Sử dụng SpatialListDetailPaneScaffold khi giao diện người dùng không gian được bật để hiển thị bố cục danh sách-chi tiết thích ứng của Material 3, trong đó mỗi ngăn được đặt bên trong SpatialPanel riêng. Khi bạn không bật giao diện người dùng không gian, hãy sử dụng ListDetailPaneScaffold. Để biết thêm thông tin, hãy xem phần Bố cục danh sách-chi tiết và nguyên tắc thiết kế thích ứng.
ListDetailPaneScaffold không có không gian
ListDetailPaneScaffold không gian (được điều chỉnh cho XR)
Bố cục ngăn hỗ trợ cho XR
Khi bật giao diện người dùng không gian, hãy đặt ngăn chính và ngăn bổ trợ vào các vùng chứa SpatialPanel riêng biệt bên trong SpatialRow trong Subspace. Khi bạn không bật giao diện người dùng không gian, hãy sử dụng SupportingPaneScaffold. Để biết thêm thông tin, hãy xem phần Ngăn hỗ trợ và nguyên tắc thiết kế thích ứng.
SupportingPaneScaffold không có không gian
SupportingPaneScaffold không gian (được điều chỉnh cho XR)
Bắt đầu thiết kế bằng Bộ công cụ thiết kế Material 3 cho Figma
Tải Bộ thiết kế Material 3 xuống để bắt đầu
Xem thêm
- Phát triển giao diện người dùng bằng Jetpack Compose cho XR
- Chuyển từ Không gian chính sang Toàn bộ không gian
- Nguyên tắc thiết kế giao diện người dùng không gian