Oluşturma ile çevirmeli giriş

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

Çoğu kol saatinde döner girişin üç ana kaynağı vardır: döner yan düğme (RSB) ve fiziksel çerçeve ya da dokunmatik çerçeve (ekranın etrafındaki dairesel dokunma alanı). Beklenen davranış, giriş türüne göre değişse de tüm temel etkileşimler için döner girişini 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ıların döner etkileşimlerine yanıt olarak görsel geri bildirim verin. Görsel geri bildirimler arasında dikey kaydırma için kaydırma göstergeleri veya sayfa göstergeleri yer alabilir.

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

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 yuvaya sahiptir. 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)
    }
) {
    // ...
}
Rotary.kt

Aşağıdaki kod snippet'inde gösterildiği gibi ScalingLazyColumn için ScalingLazyColumnDefaults.snapFlingBehavior kullanarak bir yapışma 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
        // ...
    }
}
Rotary.kt

Özel işlemler

Ayrıca, uygulamanızda çevirmeli girişe yanıt veren özel işlemler de oluşturabilirsiniz. Örneğin, çevirmeli girişi kullanarak medya uygulamasında yakınlaştırma/uzaklaştırma yapabilir veya ses düzeyini kontrol edebilirsiniz.

Bileşeniniz ses kontrolü gibi kaydırma etkinliklerini doğal olarak desteklemiyorsa kaydırma etkinliklerini kendiniz işleyebilirsiniz.

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

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

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şturun.

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

Basitlik adına, yukarıdaki örnekte kullanılan piksel değerleri, gerçekte kullanıldığında muhtemelen aşırı hassas olacaktır.

Etkinlikleri aldıktan sonra geri çağırmayı aşağıdaki snippet'te gösterildiği gibi kullanın.

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

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