Oluşturma ile çevirmeli giriş

Döner giriş, saatinizin dönen veya dönen parçalarından gelen girişleri ifade eder. Şu tarihte: ortalama olarak, kullanıcılar kol saatiyle yalnızca birkaç saniyeliğine etkileşim kuruyor. Siz kullanıcınızın şunları yapmasına olanak sağlamak için Döner girişi kullanarak kullanıcı deneyiminizi geliştirebilir: çeşitli görevleri hızla yerine getirmeniz gerekir.

Çoğu kol saatinde çevirmeli girişin üç ana kaynağı, dönen taraftır. bir fiziksel çerçeve ya da yuvarlak bir çerçeve olan dokunmatik çerçeve dokunun. Beklenen davranış tüm önemli etkileşimler için çevirmeli girişi desteklediğinden emin olun.

Kaydır

Çoğu kullanıcı, uygulamaların kaydırma hareketini desteklemesini bekler. İçerik ilerledikçe gibi yöntemlerle, kullanıcılara dönüşümlü etkileşimlere yanıt olarak görsel geri bildirim verebilir. Görsel geri bildirim, dikey kaydırma için konum göstergeleri veya sayfa göstergeleri hakkında daha fazla bilgi edinin.

Wear OS için Yazma özelliğini kullanarak çevirmeli kaydırma uygulayın. Bu örnek iskeleti ve ScalingLazyColumn bulunan bir uygulamayı anlatır. dikey olarak kaydırılır. İskele, temel düzen yapısını sağlar ve kaydırma göstergesi için de bir yeri var. Alıcı: kaydırmanın ilerleme durumunu göstermek için, liste durumu nesnesini tanımlayın. ScalingLazyColumn dahil kaydırılabilir görünümler çevirmeli giriş eklemek için kaydırılabilir bir duruma zaten sahipsiniz. Almak için çevirme etkinlikleri için aşağıdakileri yapın:

1. FocusRequester kullanarak açıkça odaklanma isteğinde bulunun. Tekliflerinizi otomatikleştirmek ve optimize etmek için Birden çok durum gibi daha karmaşık durumlar için HierarchicalFocusCoordinator HorizontalPager içinde ScalingLazyColumns nesne var.

2. Sistemin değiştireceği etkinliklere müdahale etmek için onRotaryScrollEvent değiştiricisini Kullanıcı ayar düğmesini çevirdiğinde veya çerçeveyi döndürdüğünde üretilir. Her dönüşümlü etkinlik sabit bir piksel değerine sahip ve dikey veya yatay olarak kaydırılıyor. Değiştirici ayrıca etkinliğin kullanılıp kullanılmadığını belirten bir geri çağırmaya sahiptir ve etkinlik yayılımını durdurur anne ve babalarına iletiyorlar.

val listState = rememberScalingLazyListState()
Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState)
    }
) {

    val focusRequester = rememberActiveFocusRequester()
    val coroutineScope = rememberCoroutineScope()

    ScalingLazyColumn(
        modifier = Modifier
            .onRotaryScrollEvent {
                coroutineScope.launch {
                    listState.scrollBy(it.verticalScrollPixels)
                    listState.animateScrollBy(0f)
                }
                true
            }
            .focusRequester(focusRequester)
            .focusable()
            .fillMaxSize(),
        state = listState
    ) {
        // Content goes here
        // ...
    }
}
Rotary.kt

Ayrık değerler

Ayrık değerleri ayarlamak için de çevirmeli etkileşimleri kullanın. parlaklık ayarlarını yaparken veya zaman seçicide sayıları seçerek duymuş olabilirsiniz.

ScalingLazyColumn ile benzer olanlar, seçici, kaydırma çubuğu, adım cihazı ve diğer composable'lar çevirmeli girişi almak için odaklanmanız gerekir. Birden çok kaydırılabilir öğede saat ve dakika gibi ekranda hedefler belirleyebilir, her hedef için bir FocusRequester oluşturun ve kullanıcı saat veya dakikaya dokunur.

var selectedColumn by remember { mutableIntStateOf(0) }

val hoursFocusRequester = remember { FocusRequester() }
val minutesRequester = remember { FocusRequester() }
// ...
Scaffold(modifier = Modifier.fillMaxSize()) {
    Row(
        // ...
        // ...
    ) {
        // ...
        Picker(
            readOnly = selectedColumn != 0,
            modifier = Modifier.size(64.dp, 100.dp)
                .onRotaryScrollEvent {
                    coroutineScope.launch {
                        hourState.scrollBy(it.verticalScrollPixels)
                    }
                    true
                }
                .focusRequester(hoursFocusRequester)
                .focusable(),
            onSelected = { selectedColumn = 0 },
            // ...
            // ...
        )
        // ...
        Picker(
            readOnly = selectedColumn != 1,
            modifier = Modifier.size(64.dp, 100.dp)
                .onRotaryScrollEvent {
                    coroutineScope.launch {
                        minuteState.scrollBy(it.verticalScrollPixels)
                    }
                    true
                }
                .focusRequester(minutesRequester)
                .focusable(),
            onSelected = { selectedColumn = 1 },
            // ...
            // ...
        )
        LaunchedEffect(selectedColumn) {
            listOf(
                hoursFocusRequester,
                minutesRequester
            )[selectedColumn]
                .requestFocus()
        }
    }
}
Rotary.kt

Özel işlemler

Ayrıca, uygulamanızdaki çevirmeli girişlere yanıt veren özel işlemler de oluşturabilirsiniz. Örneğin, örneğin, yakınlaştırma ve uzaklaştırma yapmak ya da bir medyadaki ses düzeyini kontrol etmek için çevirmeli girişleri kullanın. uygulamasını indirin.

Bileşeniniz, ses seviyesi gibi kaydırma etkinliklerini yerel olarak desteklemiyorsa kontrolü kullanıyorsanız kaydırma etkinliklerini kendiniz halledebilirsiniz.

// 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 bir özel durum ve kullanılan özel bir geri çağırma oluşturun çevirmeyi deneyin.

// 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 büyük olasılıkla aşırı hassas olacak.

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

Ek kaynaklar

Google'ın açık kaynak projesi olan Horologist'ı kullanabilirsiniz. Wear OS için Compose'un sağladığı işlevleri destekleyen Wear kitaplıkları ve diğer Wear OS API'leri. Horology, ileri düzey kullanım için uygulama imkanı sunar ve cihaza özgü birçok ayrıntı içerir.

Örneğin, farklı çevirmeli giriş kaynaklarının hassasiyeti değişiklik gösterebilir. Örneğin, için daha yumuşak bir geçiş sağlar. Bunun için hız sınırlaması uygulayabilir, animasyonları ekleyin. Bu da ekip için hız kazanmanın yardımcı olur. Horology, kaydırılabilir bileşenler ve ayrıklaşmalar için değiştiriciler sunar değerler. Ayrıca odaklama için yardımcı programlar ve ses arayüzü kitaplığını içerir. dokunma teknolojisiyle ses seviyesi kontrolü uygulayın.

Daha fazla bilgi için GitHub'da Horologist bölümüne bakın.