ورودی چرخشی با «نگارش»

ورودی چرخشی به ورودی از قطعات ساعت شما که می‌چرخند یا می‌چرخند اشاره دارد. به‌طور میانگین، کاربران فقط چند ثانیه با ساعتشان تعامل دارند. بااستفاده از «ورودی چرخشی» می‌توانید تجربه کاربری را بهبود دهید و به کاربرتان امکان دهید به‌سرعت کارهای مختلف را انجام دهد.

سه منبع اصلی ورودی چرخشی در اکثر ساعت‌ها شامل دکمه کناری چرخان (RSB) و قاب فیزیکی یا قاب لمسی است که یک منطقه لمسی دایره‌ای در اطراف صفحه است. اگرچه رفتار موردانتظار ممکن است براساس نوع ورودی متفاوت باشد، حتماً از ورودی چرخشی برای همه تعامل‌های ضروری پشتیبانی کنید.

نشانگر پیمایش

اکثر کاربران انتظار دارند برنامه‌ها از اشاره پیمایش پشتیبانی کنند. هم‌زمان با پیمایش محتوا در صفحه، در پاسخ به تعامل‌های چرخشی به کاربران بازخورد دیداری بدهید. بازخورد دیداری می‌تواند شامل نشانگرهای پیمایش برای پیمایش عمودی یا نشانگرهای صفحه باشد.

‫ScalingLazyColumn،‏ TransformingLazyColumn، و Picker به‌طور پیش‌فرض از اشاره پیمایش پشتیبانی می‌کنند، اگر این عناصر را در AppScaffold و ScreenScaffold قرار دهید و وضعیت فهرست را بین ScreenScaffold و عنصر، مثلاً TransformingLazyColumn، منتقل کنید.

‫AppScaffold و ScreenScaffold ساختار چیدمان پایه را برای برنامه‌های Wear OS ارائه می‌دهد و ازقبل جایگاهی برای نشانگر پیمایش با پیاده‌سازی پیش‌فرض دارد. برای سفارشی‌سازی کردن پیشرفت پیمایش، نشانگر پیمایشی براساس وضعیت فهرست بسازید، همان‌طور که در تکه‌کد زیر نشان داده شده است:

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

بااستفاده از 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
        // ...
    }
}

کنش‌های سفارشی

همچنین می‌توانید کنش‌های سفارشی ایجاد کنید که به ورودی چرخشی در برنامه‌تان پاسخ دهند. برای مثال، از ورودی چرخشی برای زوم‌پیش و زوم‌پس کردن یا کنترل میزان صدا در برنامه رسانه استفاده کنید.

اگر عنصر شما به‌طور بومی از رویدادهای پیمایش مثل کنترل صدا پشتیبانی نمی‌کند، می‌توانید رویدادهای پیمایش را خودتان مدیریت کنید.

اولین گام ایجاد وضعیت سفارشی است که در مدل نما مدیریت می‌شود و یک بازخوان سفارشی که برای پردازش رویدادهای پیمایش چرخشی استفاده می‌شود.

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

توجه داشته باشید که برای ساده‌تر شدن، در مثال قبلی از مقادیر پیکسل استفاده شده است که اگر واقعاً استفاده شوند احتمالاً بیش‌ازحد حساس خواهند بود.