Compose-এর সাথে রোটারি ইনপুট

রোটারি ইনপুট বলতে আপনার ওয়াচের সেইসব অংশ থেকে পাওয়া ইনপুটকে বোঝায় যেগুলি স্পিন বা রোটেট করে। সাধারণত ব্যবহারকারীরা তাদের ওয়াচের সাথে ইন্টার‍্যাক্ট করতে মাত্র কয়েক সেকেন্ড সময় ব্যয় করেন। আপনার ব্যবহারকারীকে বিভিন্ন কাজ দ্রুত সম্পন্ন করতে দেওয়ার জন্য রোটারি ইনপুট ব্যবহার করে আপনি ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন।

বেশিরভাগ ওয়াচে রোটারি ইনপুটের তিনটি প্রধান সোর্স হল রোটেটিং সাইড বোতাম (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

কাস্টম অ্যাকশন

এছাড়াও, আপনি কাস্টম অ্যাকশন তৈরি করতে পারেন যা আপনার অ্যাপে রোটারি ইনপুটের উত্তর দেয়। যেমন, মিডিয়া অ্যাপে জুম ইন ও জুম আউট করতে বা ভলিউম কন্ট্রোল করতে রোটারি ইনপুট ব্যবহার করুন।

আপনার কম্পোনেন্ট যদি ভলিউম কন্ট্রোলের মতো স্ক্রল ইভেন্ট নেটিভভাবে সাপোর্ট না করে, তাহলে আপনি নিজেই স্ক্রল ইভেন্ট ম্যানেজ করতে পারবেন।

প্রথম ধাপ হল ভিউ মডেলে ম্যানেজ করা কাস্টম স্টেট তৈরি করা এবং কাস্টম কলব্যাক যা রোটারি স্ক্রল ইভেন্ট প্রসেস করতে ব্যবহার করা হয়।

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

মনে রাখবেন, সরলতার জন্য, পূর্ববর্তী উদাহরণে পিক্সেল ভ্যালু ব্যবহার করা হয়েছে যা আসলে ব্যবহার করা হলে অতিরিক্ত সংবেদনশীল হতে পারে।