Oluşturma ile çevirmeli giriş


Çevirmeli giriş, saatinizin dönen veya döndürülen parçalarından gelen girişi ifade eder. Kullanıcılar, kol 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 döner girişi kullanarak kullanıcı deneyiminizi geliştirebilirsiniz.

Çoğu kol saatinde dönen yan düğme (RSB) ve fiziksel bir kadran veya ekranın etrafındaki dairesel bir dokunmatik bölge olan dokunmatik kadran olmak üzere üç ana döner giriş kaynağı bulunur. Beklenen davranış, giriş türüne göre değişse de tüm temel etkileşimler için döner girişi desteklediğinizden emin olun.

Kaydırma

Kullanıcıların çoğu, uygulamaların kaydırma hareketini desteklemesini bekler. Ekrandaki içerik kaydırıldığında, kullanıcılara dönen etkileşimlere 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, bu bileşenleri AppScaffold ve ScreenScaffold içine yerleştirmeniz ve liste durumunu ScreenScaffold ile bileşen (ör. TransformingLazyColumn) arasında iletmeniz gerektiği sürece varsayılan olarak kaydırma hareketini destekler.

AppScaffold ve ScreenScaffold, Wear OS uygulamaları için temel düzen yapısını sağlar ve varsayılan bir uygulamaya sahip kaydırma göstergesi için bir yuvaya sahiptir. Kaydırma işleminin 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 sabitleme 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 veya uzaklaştırmak ya da sesi kontrol etmek için çevirmeli girişi kullanabilirsiniz.

Bileşeniniz ses seviyesi kontrolü gibi kaydırma etkinliklerini doğal olarak desteklemiyorsa kaydırma etkinliklerini kendiniz yönetebilirsiniz.

// 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önen kaydırma etkinliklerini işlemek için kullanılan özel bir geri çağırma işlevi 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 açısından, önceki örnekte gerçekte kullanıldıklarında aşırı hassas olabilecek piksel değerleri kullanılmıştır.

Etkinlikleri aldıktan sonra aşağıdaki snippet'te gösterildiği gibi geri çağırma işlevini 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(),
) { ... }