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

আপনি ScalingLazyColumnDefaults.snapFlingBehavior ব্যবহার করে ScalingLazyColumn-এর জন্য স্ন্যাপ বিহেভিয়ার কনফিগার করতে পারবেন, যেমনটি নিম্নলিখিত কোড স্নিপেটে দেখানো হয়েছে:

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

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