Compose की सुविधा के साथ रोटरी इनपुट

रोटरी इनपुट का मतलब, स्मार्टवॉच के उन हिस्सों से मिलने वाले इनपुट से है जो घूमते हैं. आम तौर पर, उपयोगकर्ता अपनी स्मार्टवॉच से इंटरैक्ट करने में कुछ ही सेकंड बिताते हैं. रोटरी इनपुट का इस्तेमाल करके, उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है. इससे उपयोगकर्ता, अलग-अलग टास्क को तेज़ी से पूरा कर सकता है.

ज़्यादातर स्मार्टवॉच में रोटरी इनपुट के तीन मुख्य सोर्स होते हैं. इनमें रोटेटिंग साइड बटन (आरएसबी) और फ़िज़िकल बेज़ेल या टच बेज़ेल शामिल हैं. टच बेज़ेल, स्क्रीन के चारों ओर मौजूद एक गोल टच ज़ोन होता है. इनपुट के टाइप के आधार पर, उम्मीद के मुताबिक व्यवहार अलग-अलग हो सकता है. हालांकि, सभी ज़रूरी इंटरैक्शन के लिए रोटरी इनपुट की सुविधा ज़रूर दें.

स्क्रोल इंडिकेटर

ज़्यादातर उपयोगकर्ताओं को उम्मीद होती है कि ऐप्लिकेशन, स्क्रोल जेस्चर के साथ काम करें. स्क्रीन पर कॉन्टेंट स्क्रोल होने पर, रोटरी इंटरैक्शन के जवाब में उपयोगकर्ताओं को विज़ुअल फ़ीडबैक दें. विज़ुअल फ़ीडबैक में, वर्टिकल स्क्रोल के लिए स्क्रोलिंग इंडिकेटर या पेज इंडिकेटर शामिल हो सकते हैं.

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

कस्टम कार्रवाइयां

आपके पास ऐसे कस्टम ऐक्शन बनाने का विकल्प भी है जो आपके ऐप्लिकेशन में रोटरी इनपुट के हिसाब से काम करते हैं. उदाहरण के लिए, रोटरी इनपुट का इस्तेमाल करके, ज़ूम इन और ज़ूम आउट किया जा सकता है या किसी मीडिया ऐप्लिकेशन में आवाज़ को कंट्रोल किया जा सकता है.

अगर आपका कॉम्पोनेंट, वॉल्यूम कंट्रोल जैसे स्क्रोलिंग इवेंट के साथ काम नहीं करता है, तो स्क्रोल इवेंट को खुद मैनेज किया जा सकता है.

सबसे पहले, व्यू मॉडल में मैनेज की जाने वाली कस्टम स्टेट और रोटरी स्क्रोल इवेंट को प्रोसेस करने के लिए इस्तेमाल किया जाने वाला कस्टम कॉलबैक बनाएं.

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

ध्यान दें कि ऊपर दिए गए उदाहरण में, आसानी से समझाने के लिए पिक्सल वैल्यू का इस्तेमाल किया गया है. अगर असल में इनका इस्तेमाल किया जाता है, तो हो सकता है कि ये ज़रूरत से ज़्यादा संवेदनशील हों.