การป้อนข้อมูลด้วยปุ่มหมุนพร้อมการเขียน

การป้อนข้อมูลด้วยปุ่มหมุนหมายถึงการป้อนข้อมูลจากชิ้นส่วนของนาฬิกาที่หมุน โดยเฉลี่ยแล้ว ผู้ใช้ใช้เวลาเพียงไม่กี่วินาทีในการโต้ตอบกับนาฬิกา คุณ สามารถปรับปรุงประสบการณ์ของผู้ใช้ได้โดยใช้การป้อนข้อมูลแบบหมุนเพื่อช่วยให้ผู้ใช้ ทำงานต่างๆ ได้อย่างรวดเร็ว

แหล่งที่มาหลัก 3 อย่างของการป้อนข้อมูลแบบหมุนในนาฬิกาส่วนใหญ่ ได้แก่ ปุ่มด้านข้างแบบหมุน (RSB) และขอบหน้าปัดจริงหรือขอบหน้าปัดแบบสัมผัส ซึ่งเป็นโซนสัมผัสแบบวงกลมรอบหน้าจอ แม้ว่าลักษณะการทำงานที่คาดไว้จะแตกต่างกันไปตาม ประเภทอินพุต แต่โปรดตรวจสอบว่ารองรับอินพุตแบบหมุนสำหรับการโต้ตอบที่จำเป็นทั้งหมด

ตัวบ่งชี้การเลื่อน

ผู้ใช้ส่วนใหญ่คาดหวังให้แอปต่างๆ รองรับท่าทางการเลื่อน ขณะที่เนื้อหาเลื่อนบนหน้าจอ ให้แสดงความคิดเห็นด้วยภาพแก่ผู้ใช้เพื่อตอบสนองต่อการโต้ตอบแบบหมุน ความคิดเห็นที่มองเห็นได้อาจรวมถึงตัวบ่งชี้การเลื่อนสำหรับการเลื่อนแนวตั้งหรือตัวบ่งชี้หน้า

ScalingLazyColumn, TransformingLazyColumn และ Picker รองรับท่าทางการเลื่อน โดยค่าเริ่มต้น หากคุณวางคอมโพเนนต์เหล่านี้ไว้ภายใน AppScaffold และ ScreenScaffold และส่งสถานะรายการระหว่าง ScreenScaffold กับคอมโพเนนต์ เช่น TransformingLazyColumn

AppScaffold และ ScreenScaffold มีโครงสร้างเลย์เอาต์พื้นฐานสำหรับแอป Wear OS และมีช่องสำหรับตัวบ่งชี้การเลื่อนพร้อมการติดตั้งใช้งานเริ่มต้นอยู่แล้ว หากต้องการปรับแต่งความคืบหน้าในการเลื่อน ให้สร้างตัวบ่งชี้การเลื่อน โดยอิงตามออบเจ็กต์สถานะรายการ ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

val listState = rememberTransformingLazyColumnState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {
    // ...
}
Rotary.kt

คุณกําหนดค่าลักษณะการทํางานแบบสแนปสําหรับ ScalingLazyColumn ได้โดยใช้ ScalingLazyColumnDefaults.snapFlingBehavior ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

val listState = rememberScalingLazyListState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {

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

การทำงานที่กำหนดเอง

นอกจากนี้ คุณยังสร้างการกระทําที่กําหนดเองซึ่งตอบสนองต่อการป้อนข้อมูลด้วยปุ่มหมุนในแอปได้ด้วย เช่น ใช้การป้อนข้อมูลด้วยปุ่มหมุนเพื่อซูมเข้าและออก หรือเพื่อควบคุมระดับเสียงในแอปสื่อ

หากคอมโพเนนต์ไม่รองรับเหตุการณ์การเลื่อนโดยเนทีฟ เช่น volume control คุณสามารถจัดการเหตุการณ์การเลื่อนด้วยตนเองได้

ขั้นตอนแรกคือการสร้างสถานะที่กำหนดเองซึ่งจัดการใน ViewModel และการเรียกกลับที่กำหนดเองซึ่งใช้เพื่อประมวลผลเหตุการณ์การเลื่อนแบบหมุน

class VolumeRange(
    val max: Int = 10,
    val min: Int = 0
)

private object VolumeViewModel {
    class MyViewModel : ViewModel() {
        private val _volumeState = mutableIntStateOf(0)
        val volumeState: State<Int>
            get() = _volumeState

        // ...
        fun onVolumeChangeByScroll(pixels: Float) {
            _volumeState.value = when {
                pixels > 0 -> minOf(volumeState.value + 1, VolumeRange().max)
                pixels < 0 -> maxOf(volumeState.value - 1, VolumeRange().min)
                else -> volumeState.value
            }
        }
    }
}
Rotary.kt

จากนั้นใช้การเรียกกลับเมื่อได้รับเหตุการณ์ ดังที่แสดงใน ข้อมูลโค้ดต่อไปนี้

val focusRequester: FocusRequester = remember { FocusRequester() }
val volumeViewModel: VolumeViewModel.MyViewModel =
    viewModel()
val volumeState by volumeViewModel.volumeState

TransformingLazyColumn(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            volumeViewModel.onVolumeChangeByScroll(it.verticalScrollPixels)
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) {
    // You can use volumeState here, for example:
    item {
        Text("Volume: $volumeState")
    }
}
Rotary.kt

โปรดทราบว่าตัวอย่างก่อนหน้านี้ใช้ค่าพิกเซลเพื่อให้เข้าใจได้ง่าย ซึ่งหากใช้จริงก็อาจมีความไวมากเกินไป