Oluşturma ile çevirmeli giriş

Çevirmeli giriş, saatinizin dönen parçalarından gelen girişi ifade eder. Kullanıcılar, saatleriyle etkileşimde bulunmak için ortalama olarak yalnızca birkaç saniye harcar. Kullanıcınızın çeşitli görevleri hızlı bir şekilde tamamlamasına olanak tanımak için çevirmeli girişi kullanarak kullanıcı deneyiminizi iyileştirebilirsiniz.

Çoğu saatte üç ana çevirmeli giriş kaynağı bulunur: dönen yan düğme (RSB) ve fiziksel bir çerçeve veya ekranın etrafında dairesel bir dokunma bölgesi olan dokunmatik çerçeve. Beklenen davranış, giriş türüne göre değişiklik gösterse de tüm temel etkileşimler için çevirmeli girişi desteklediğinizden emin olun.

Kaydırma göstergesi

Çoğu kullanıcı, uygulamaların kaydırma hareketini desteklemesini bekler. İçerik ekranda kaydırılırken kullanıcılara, çevirme etkileşimlerine yanıt olarak görsel geri bildirim verin. Görsel geri bildirim, dikey kaydırma için kaydırma göstergeleri veya sayfa göstergeleri içerebilir.

ScalingLazyColumn, TransformingLazyColumn ve Picker, varsayılan olarak kaydırma hareketini destekler. Bu bileşenleri AppScaffold ve ScreenScaffold içine yerleştirip liste durumunu ScreenScaffold ile bileşen (ör. TransformingLazyColumn) arasında iletirseniz kaydırma hareketi desteklenir.

AppScaffold ve ScreenScaffold, Wear OS uygulamaları için temel düzen yapısını sağlar ve varsayılan uygulamayla birlikte kaydırma göstergesi için bir alan içerir. Kaydırma ilerleme durumunu özelleştirmek için aşağıdaki kod snippet'inde gösterildiği gibi liste durumu nesnesine dayalı bir kaydırma göstergesi oluşturun:

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

Aşağıdaki kod snippet'inde gösterildiği gibi ScalingLazyColumnDefaults.snapFlingBehavior kullanarak ScalingLazyColumn için bir tutturma davranışı yapılandırabilirsiniz:

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

Özel işlemler

Uygulamanızda çevirmeli girişe yanıt veren özel işlemler de oluşturabilirsiniz. Örneğin, bir medya uygulamasında yakınlaştırmak ve uzaklaştırmak ya da ses seviyesini kontrol etmek için çevirmeli girişi kullanabilirsiniz.

Bileşeniniz, ses seviyesi kontrolü gibi kaydırma etkinliklerini yerel olarak desteklemiyorsa kaydırma etkinliklerini kendiniz işleyebilirsiniz.

İlk adım, görünüm modelinde yönetilen özel bir durum ve döner kaydırma etkinliklerini işlemek için kullanılan özel bir geri çağırma oluşturmaktır.

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

Ardından, aşağıdaki snippet'te gösterildiği gibi etkinlikleri aldığınızda geri çağırma işlevini kullanın.

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

Basitlik açısından, yukarıdaki örnekte gerçekte kullanıldığında aşırı hassas olabilecek piksel değerlerinin kullanıldığını unutmayın.