إدخال البيانات عبر وحدة تحكُّم دورانية باستخدام Compose

يشير إدخال البيانات عبر وحدة تحكم دورانية إلى إدخال البيانات من أجزاء ساعتك التي تدور أو تتحرّك بشكل دائري. في المتوسط، يقضي المستخدمون بضع ثوانٍ فقط في التفاعل مع ساعاتهم. يمكنك تحسين تجربة المستخدم من خلال استخدام ميزة "الإدخال الدوّار" للسماح للمستخدم بإنجاز مهام مختلفة بسرعة.

تشمل المصادر الرئيسية الثلاثة للإدخال الدوّار في معظم الساعات الزر الجانبي الدوّار، وإما إطارًا دوّارًا ماديًا أو إطارًا دوّارًا يعمل باللمس، وهو عبارة عن منطقة لمس دائرية حول الشاشة. على الرغم من أنّ السلوك المتوقّع قد يختلف استنادًا إلى نوع الإدخال، احرص على توفير إمكانية إدخال البيانات عبر وحدة تحكم دورانية لجميع التفاعلات الأساسية.

مؤشر التمرير

يتوقّع معظم المستخدمين أن تتيح التطبيقات إمكانية التمرير. أثناء تمرير المحتوى على الشاشة، قدِّم للمستخدمين ملاحظات مرئية استجابةً للتفاعلات باستخدام القرص الدوّار. يمكن أن تتضمّن الملاحظات المرئية مؤشرات التمرير للتمرير العمودي أو مؤشرات الصفحات.

تتيح ScalingLazyColumn وTransformingLazyColumn وPicker إيماءة التمرير تلقائيًا، وذلك في حال وضع هذه المكوّنات داخل AppScaffold وScreenScaffold وتمرير حالة القائمة بين ScreenScaffold والمكوّن، مثل TransformingLazyColumn.

توفّر AppScaffold وScreenScaffold بنية التنسيق الأساسية لتطبيقات Wear OS، كما تتضمّن مساحة مخصّصة لمؤشر التمرير مع تنفيذ تلقائي. لتخصيص مستوى التقدّم في التمرير، أنشئ مؤشر تمرير استنادًا إلى عنصر حالة القائمة، كما هو موضّح في مقتطف الرمز البرمجي التالي:

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

يمكنك ضبط سلوك الانطباق لـ 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
        // ...
    }
}

الإجراءات المخصّصة

يمكنك أيضًا إنشاء إجراءات مخصّصة تستجيب للإدخال عبر وحدة تحكّم دورانية في تطبيقك. على سبيل المثال، يمكنك استخدام الإدخال عبر وحدة تحكّم دورانية للتكبير والتصغير أو للتحكّم في مستوى الصوت في تطبيق وسائط.

إذا كان المكوّن لا يتيح بشكلٍ تلقائي أحداث التمرير، مثل التحكّم في مستوى الصوت، يمكنك معالجة أحداث التمرير بنفسك.

تتمثّل الخطوة الأولى في إنشاء حالة مخصّصة تتم إدارتها في نموذج العرض، وإنشاء دالة ردّ نداء مخصّصة تُستخدَم لمعالجة أحداث الانتقال الدائري.

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

بعد ذلك، استخدِم دالة معاودة الاتصال بعد تلقّي الأحداث، كما هو موضّح في المقتطف التالي.

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

يُرجى العِلم أنّ المثال السابق يستخدم قيم وحدات البكسل التي من المحتمل أن تكون حساسة بشكل مفرط إذا تم استخدامها فعليًا، وذلك بهدف التبسيط.