Oluşturma ile çevirmeli giriş

Dönen giriş, saatinizin dönen veya dönen parçalarından yapılan girişleri ifade eder. Ortalama olarak kullanıcılar, kol saatleriyle etkileşimde yalnızca birkaç saniye geçirir. Kullanıcınızın çeşitli görevleri hızlı bir şekilde gerçekleştirmesini sağlamak için Rotary girişini kullanarak kullanıcı deneyiminizi geliştirebilirsiniz.

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

Kaydır

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

Wear OS için Compose'u kullanarak çevirmeli kaydırma uygulayın. Bu örnekte, bir iskelet ve dikey olarak kaydırılan bir ScalingLazyColumn içeren uygulama açıklanmaktadır. Scaffold, Wear OS uygulamaları için temel düzen yapısını sağlar ve halihazırda kaydırma göstergesi için bir yuvaya sahiptir. Kaydırma ilerlemesini göstermek için liste durumu nesnesine dayalı bir konum göstergesi oluşturun. ScalingLazyColumn dahil olmak üzere kaydırılabilir görünümler, çevirmeli giriş eklemek için zaten kaydırılabilir durumdadır. Dönen kaydırma etkinlikleri almak için aşağıdakileri yapın:

  1. FocusRequester kullanarak açıkça odak isteğinde bulunun.
  2. Kullanıcı ayar düğmesini veya çerçeveyi döndürdüğünde sistemin oluşturduğu etkinliklere müdahale etmek için onRotaryScrollEvent değiştiricisini ekleyin. Her döndürme etkinliğinin belirli bir piksel değeri vardır ve dikey veya yatay olarak kaydırılır. Değiştiricide, etkinliğin kullanılıp kullanılmadığını belirtmek için bir geri çağırma da bulunur ve tüketildiğinde üst öğelere etkinlik yayılımı durdurulur.
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(),
        state = listState
    ) { ... }
}

Ayrık değerler

Alarm ayarlarken ayarlarda parlaklığı ayarlama veya zaman seçicide sayıları seçme gibi farklı değerleri ayarlamak için çevirmeli etkileşimleri de kullanın.

ScalingLazyColumn işlevine benzer şekilde, çevirmeli giriş almak için seçici, kaydırma çubuğu, step aracı ve diğer bestecilere odaklanılması gerekir. Ekranda zaman seçicideki saat ve dakika gibi birden fazla kaydırılabilir hedef varsa her hedef için bir FocusRequester oluşturun ve kullanıcı saat ya da dakikaya dokunduğunda odağı buna göre değiştirin.

@Composable
fun TimePicker() {
    var selectedColumn by remember { mutableStateOf(0) }
    val focusRequester1 = remember { FocusRequester() }
    val focusRequester2 = remember { FocusRequester() }

    Row {
       Picker(...)
       Picker(...)
    }

    LaunchedEffect(selectedColumn) {
        listOf(focusRequester1,
               focusRequester2)[selectedColumn]
            .requestFocus()
    }
}

Özel işlemler

Uygulamanızdaki çevirmeli girişlere yanıt veren özel işlemler de oluşturabilirsiniz. Örneğin, yakınlaştırma ve uzaklaştırma yapmak ya da medya uygulamalarında ses düzeyini kontrol etmek için çevirmeli girişleri kullanın.

Bileşeniniz ses kontrolü gibi kaydırma etkinliklerini yerel 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 bir özel durum ve çevirmeli 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)
    }
}

Kolaylık sağlaması açısından, önceki örnekte aşırı hassas olabilecek piksel değerleri kullanılmaktadır.

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

Wear OS ve diğer Wear OS API'leri için Compose'un sağladığı işlevleri destekleyen bir dizi Wear kitaplığı sağlayan Google açık kaynak projesi Horologist'i kullanmayı düşünün. Horolog, gelişmiş kullanım alanları ve cihaza özgü birçok ayrıntı için uygulama sunar.

Örneğin, farklı çevirmeli giriş kaynaklarının hassasiyeti değişiklik gösterebilir. Değerler arasında daha kolay geçiş için hız sınırlaması yapabilir veya geçiş için tutturma veya animasyon ekleyebilirsiniz. Böylece, dönüştürme hızı kullanıcılar için daha doğal olur. Horolog, kaydırılabilir bileşenler ve ayrı değerler için değiştiriciler içerir. Ayrıca, odağı yönetmek için yardımcı programlar ve dokunma teknolojisiyle ses kontrolü uygulamak için bir Ses Kullanıcı Arayüzü kitaplığı içerir.

Daha fazla bilgi için GitHub'da Horologist (Horolog) başlıklı makaleyi inceleyin.