Tiêu điểm trong Jetpack Compose Glimmer

Các thiết bị XR được hỗ trợ

Hướng dẫn này giúp bạn xây dựng các trải nghiệm cho những loại thiết bị XR sau.

Tìm hiểu về các loại thiết bị XR →

Kính AI

Tìm hiểu về các loại thiết bị XR →

Tất cả các thành phần Glimmer của Jetpack Compose đều được thiết kế để hoạt động với các phương thức nhập tiêu chuẩn tương tự như điện thoại, chẳng hạn như thao tác nhấn hoặc vuốt trên bàn di chuột của kính AI, đồng thời tiếp nhận các lệnh nhập dành riêng cho phần cứng của kính AI, chẳng hạn như nút camera và nút màn hình. Các thành phần Glimmer của Jetpack Compose tự động xử lý các sự kiện nhập cần thiết. Đối với các thành phần tuỳ chỉnh, bạn có thể sử dụng các API Compose hiện có như Modifier.draggable hoặc Modifier.scrollable để triển khai các hành vi tương tác cụ thể.

Trên kính AI có màn hình, thao tác nhập bằng con trỏ có thể ảnh hưởng đến tiêu điểm:

• Nhấn: Tương tác trực tiếp để kích hoạt phần tử. Tiêu điểm di chuyển đến một phần tử khi người dùng tương tác với phần tử đó.
• Vuốt: Dùng để di chuyển và cuộn. Các cử chỉ vuốt không được xử lý sẽ tự động chuyển thành chuyển động tiêu điểm, cho phép di chuyển liền mạch trên giao diện người dùng mà không cần nhập trực tiếp bằng con trỏ.

(Yêu cầu tạm thời) Bật cờ nhập bắt buộc:

Khi sử dụng một tính năng của Jetpack Compose, hệ thống có thể tự động đặt tiêu điểm ban đầu cho phần tử có thể lấy tiêu điểm đầu tiên khi màn hình tải. Đây thường là mục trên cùng bên trái của màn hình. Tính năng này vẫn đang trong quá trình phát triển và không được bật theo mặc định. Để kích hoạt tính năng này, hãy đặt cờ isInitialFocusOnFocusableAvailable thành true trong phương thức onCreate() của hoạt động.

class GlassesActivityExample : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        @OptIn(ExperimentalComposeUiApi::class)
        ComposeUiFlags.isInitialFocusOnFocusableAvailable = true
        super.onCreate(savedInstanceState)
    }
}

Hành vi và thứ tự di chuyển

Chuyển động và thứ tự tiêu điểm thay đổi khi người dùng di chuyển trong ứng dụng của bạn.

Chuyển động tiêu điểm

Trên vùng chứa có thể cuộn, tiêu điểm di chuyển liên tục khi vuốt trên bàn di chuột. Đối với các phần tử riêng biệt như một hàng nút, mỗi lần vuốt sẽ di chuyển tiêu điểm một phần tử.

Thứ tự tiêu điểm

Giống như trong Jetpack Compose, Jetpack Compose Glimmer sử dụng tính năng tìm kiếm tiêu điểm một chiều. Để tìm hiểu thêm về thứ tự duyệt qua tiêu điểm, hãy xem bài viết Thay đổi thứ tự duyệt qua tiêu điểm.

Để thay đổi mục được lấy tiêu điểm ban đầu, bạn có thể thêm cấp cao nhất Modifier.focusGroup() và chỉ định tuỳ chỉnh onEnter focusProperty:

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        cancelFocusChange()
    }
}
.focusGroup()

Vùng chứa có thể cuộn

Để mang lại trải nghiệm người dùng tối ưu, các vùng chứa có thể cuộn như danh sách phải là thành phần chính duy nhất trên màn hình. Tránh đặt danh sách có thể cuộn ngay phía trên hoặc phía dưới các thành phần tương tác khác, chẳng hạn như nút, để tránh gây nhầm lẫn khi di chuyển và thúc đẩy chuyển động tiêu điểm mượt mà, có thể dự đoán.

Trạng thái tiêu điểm mặc định

Jetpack Compose Glimmer triển khai các trạng thái tiêu điểm mặc định trên các thành phần có thể tương tác, bao gồm cả giao diện, thẻ và mục danh sách, giúp thúc đẩy phản hồi trực quan nhất quán và rõ ràng trong quá trình lượt tương tác của người dùng.

Hình 1. Ba trạng thái tiêu điểm trong Jetpack Compose Glimmer, được phân biệt bằng phản hồi trực quan dựa trên đường viền.

• Mặc định: Màu nền của nút được lấy từ GlimmerTheme.colors.surface, nội dung chính của nút tính toán màu nội dung của giao diện đó và biểu tượng là GlimmerTheme.colors.primary.

• Được lấy tiêu điểm: Độ rộng đường viền được tăng lên để cho biết tiêu điểm.

• Được lấy tiêu điểm + Đã nhấn: Nền được đặt thành GlimmerTheme.colors.surface ở độ mờ hoàn toàn để cho biết trạng thái đã chọn.