Tạo phương thức nhập dữ liệu xoay bằng Compose

Phương thức nhập dữ liệu xoay đề cập đến dữ liệu đầu vào nhập từ các thành phần có thể xoay hoặc vặn của đồng hồ. Trung bình thì người dùng chỉ dành vài giây để tương tác với đồng hồ. Bạn có thể cải thiện trải nghiệm người dùng bằng cách sử dụng phương thức nhập dữ liệu xoay giúp người dùng nhanh chóng hoàn tất nhiều thao tác.

Có 3 nguồn nhập dữ liệu xoay chính trên hầu hết đồng hồ, trong đó có nút xoay bên hông (RSB) và một viền xoay hoặc viền cảm ứng (là vùng cảm ứng bo tròn xung quanh màn hình). Tuy hành vi dự kiến có thể thay đổi tuỳ theo loại dữ liệu đầu vào, nhưng hãy đảm bảo việc hỗ trợ phương thức nhập dữ liệu xoay cho mọi yếu tố tương tác thiết yếu.

Cuộn

Hầu hết người dùng đều muốn ứng dụng hỗ trợ thao tác cuộn. Khi nội dung cuộn trên màn hình, hãy cho người dùng thấy có sự phản hồi bằng hình ảnh đối với các tương tác xoay. Phản hồi bằng hình ảnh có thể là chỉ báo vị trí (để cuộn dọc) hoặc chỉ báo trang.

Theo mặc định, ScalingLazyColumn và Picker hỗ trợ cử chỉ cuộn, miễn là bạn cần đặt các thành phần đó bên trong Scaffold. Scaffold cung cấp cấu trúc bố cục cơ bản cho các ứng dụng Wear OS và đã có sẵn một chỗ dành cho chỉ báo cuộn. Để cho thấy tiến trình cuộn, hãy tạo một chỉ báo vị trí dựa trên đối tượng trạng thái của danh sách, như trong đoạn mã sau:

val listState = rememberScalingLazyListState()
Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState)
    }
) {
    // ...
}
Rotary.kt

Bạn có thể định cấu hình hành vi chụp nhanh cho ScalingLazyColumn bằng cách sử dụng ScalingLazyColumnDefaults.snapFlingBehavior, như minh hoạ trong đoạn mã sau:

val listState = rememberScalingLazyListState()
Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState)
    }
) {

    val state = rememberScalingLazyListState()
    ScalingLazyColumn(
        modifier = Modifier.fillMaxWidth(),
        state = state,
        flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(state = state)
    ) {
        // Content goes here
        // ...
    }
}
Rotary.kt

Thao tác tuỳ chỉnh

Bạn cũng có thể tạo các thao tác tuỳ chỉnh phản hồi phương thức nhập dữ liệu xoay trong ứng dụng của mình. Ví dụ: sử dụng phương thức nhập dữ liệu xoay để phóng to và thu nhỏ hoặc để điều chỉnh âm lượng trong ứng dụng đa phương tiện.

Nếu thành phần của bạn không hỗ trợ sẵn các sự kiện cuộn (ví dụ: điều khiển âm lượng), thì bạn có thể tự xử lý các sự kiện cuộn đó.

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            // handle rotary scroll events
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }

Tạo trạng thái tuỳ chỉnh được quản lý trong mô hình chế độ xem và lệnh gọi lại tuỳ chỉnh dùng để xử lý các sự kiện cuộn xoay.

// VolumeViewModel.kt

object VolumeRange(
    public val max: Int = 10
    public val min: Int = 0
)

val volumeState: MutableStateFlow<Int> = ...

fun onVolumeChangeByScroll(pixels: Float) {
    volumeState.value = when {
        pixels > 0 -> min (volumeState.value + 1, VolumeRange.max)
        pixels < 0 -> max (volumeState.value - 1, VolumeRange.min)
    }
}

Nói một cách đơn giản, ví dụ trên sử dụng giá trị pixel mà nếu được sử dụng trong thực tế thì độ nhạy có thể trở nên quá cao.

Sử dụng lệnh gọi lại khi nhận được sự kiện, như trong đoạn mã sau.

val focusRequester: FocusRequester = remember { FocusRequester() }
val volumeState by volumeViewModel.volumeState.collectAsState()

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            volumeViewModel
                .onVolumeChangeByScroll(it.verticalScrollPixels)
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }