রচনা সহ ঘূর্ণমান ইনপুট

রোটারি ইনপুট বলতে আপনার ঘড়ির টুকরো থেকে ইনপুট বোঝায় যা ঘোরানো বা ঘোরানো হয়। গড়ে, ব্যবহারকারীরা তাদের ঘড়ির সাথে ইন্টারঅ্যাক্ট করতে মাত্র কয়েক সেকেন্ড ব্যয় করে। আপনি রোটারি ইনপুট ব্যবহার করে আপনার ব্যবহারকারীর অভিজ্ঞতা বাড়াতে পারেন যাতে আপনার ব্যবহারকারীকে দ্রুত বিভিন্ন কাজ সম্পন্ন করতে পারে।

বেশিরভাগ ঘড়িতে রোটারি ইনপুটের তিনটি প্রধান উৎসের মধ্যে রয়েছে রোটেটিং সাইড বোতাম (RSB), এবং হয় একটি ফিজিক্যাল বেজেল বা একটি টাচ বেজেল, যা স্ক্রিনের চারপাশে একটি বৃত্তাকার স্পর্শ অঞ্চল। যদিও প্রত্যাশিত আচরণ ইনপুট ধরনের উপর ভিত্তি করে পরিবর্তিত হতে পারে, সমস্ত প্রয়োজনীয় মিথস্ক্রিয়া জন্য ঘূর্ণমান ইনপুট সমর্থন নিশ্চিত করুন.

স্ক্রল করুন

বেশিরভাগ ব্যবহারকারী অ্যাপগুলি স্ক্রোল অঙ্গভঙ্গি সমর্থন করবে বলে আশা করে৷ বিষয়বস্তু স্ক্রিনে স্ক্রোল করার সাথে সাথে, ঘূর্ণমান মিথস্ক্রিয়াগুলির প্রতিক্রিয়া হিসাবে ব্যবহারকারীদের ভিজ্যুয়াল প্রতিক্রিয়া দিন। ভিজ্যুয়াল প্রতিক্রিয়া উল্লম্ব স্ক্রোল বা পৃষ্ঠা সূচকগুলির জন্য অবস্থান নির্দেশক অন্তর্ভুক্ত করতে পারে।

ScalingLazyColumn এবং Picker ডিফল্টরূপে স্ক্রোল অঙ্গভঙ্গি সমর্থন করে, যতক্ষণ না আপনাকে একটি Scaffold ভিতরে সেই উপাদানগুলি স্থাপন করতে হবে। Scaffold Wear OS অ্যাপগুলির জন্য মৌলিক লেআউট কাঠামো প্রদান করে এবং ইতিমধ্যেই একটি স্ক্রোল নির্দেশকের জন্য একটি স্লট রয়েছে৷ স্ক্রোলিং অগ্রগতি দেখানোর জন্য, তালিকার অবস্থার অবজেক্টের উপর ভিত্তি করে একটি অবস্থান নির্দেশক তৈরি করুন, যেমনটি নিম্নলিখিত কোড স্নিপেটে দেখানো হয়েছে:

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

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

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

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

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

যদি আপনার উপাদানটি নেটিভভাবে স্ক্রলিং ইভেন্টগুলিকে সমর্থন না করে যেমন ভলিউম নিয়ন্ত্রণ, আপনি নিজেই স্ক্রোল ইভেন্টগুলি পরিচালনা করতে পারেন।

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

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

ভিউ মডেলে পরিচালিত একটি কাস্টম অবস্থা এবং একটি কাস্টম কলব্যাক তৈরি করুন যা রোটারি স্ক্রোল ইভেন্টগুলি প্রক্রিয়া করতে ব্যবহৃত হয়।

// 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)
    }
}

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

আপনি ইভেন্টগুলি পাওয়ার পরে কলব্যাক ব্যবহার করুন, যেমনটি নিম্নলিখিত স্নিপেটে দেখানো হয়েছে।

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

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