Wear OS için Compose içeren listeler

Listeler, kullanıcıların Wear OS cihazlarda bir dizi seçenek arasından bir öğe seçmesine olanak tanır.

Çoğu Wear OS cihazda yuvarlak ekranlar kullanılır. Bu durum, ekranın üst ve alt kısmına yakın bir yerde görünen liste öğelerinin görülmesini zorlaştırır. Bu nedenle, Wear OS için Oluştur, LazyColumn sınıfının ölçeklendirme ve solma efektlerini destekleyen ScalingLazyColumn adlı bir sürümünü içerir. Öğeler ekranın ortasına doğru hareket ettiğinde büyür ve opak hale gelir.

Aşağıdaki animasyonda, ekran boyunca hareket eden bir öğenin boyutunun ve şeffaflığının nasıl değiştiği gösterilmektedir:

Aşağıdaki kod snippet'inde her öğe için metin içeren bir listenin nasıl oluşturulacağı gösterilmektedir:

val contentModifier = Modifier
    .fillMaxWidth()
    .padding(bottom = 8.dp)

@Composable
fun WearApp() {
    WearAppTheme {
        // Hoist the list state to remember scroll position across compositions.
        val listState = rememberScalingLazyListState()

        ScalingLazyColumn(
            modifier = Modifier.fillMaxSize(),
            autoCentering = AutoCenteringParams(itemIndex = 0),
            state = listState
        ) {
            item { TextItem(contentModifier, stringResource(R.string.first)) }
            item { TextItem(contentModifier, stringResource(R.string.second)) }
        }
    }
}

@Composable
fun TextItem(modifier: Modifier = Modifier, contents: String) {
    Text(
        modifier = modifier,
        textAlign = TextAlign.Center,
        text = contents
    )
}

Hızlıca kaydırma efekti ekleyin

Kullanıcının ScalingLazyColumn nesnelere uyguladığı parmak hareketlerine bir çırpma ve kaydırma davranışı ekleyebilirsiniz. Bu efekt, kullanıcıların bir listedeki öğeler arasında daha hassas bir şekilde gezinmelerine ve uzun bir listede daha hızlı hareket etmelerine yardımcı olur.

Bu efekti uygulamanızdaki bir listeye veya seçiciye eklemek için aşağıdaki kod snippet'inde gösterildiği gibi ScalingLazyColumn tanımınıza flingBehavior parametresini ekleyin:

ScalingLazyColumn(
    modifier = modifier ...,
    flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(
        state = listState,
        snapOffset = 0
        // Exponential decay by default. You can also explicitly define a
        // DecayAnimationSpec.
    ) {
        // Contents of the list here.
}

Kullanıcı çevirmeli kadrandayla etkileşim kurduğunda bir ScalingLazyColumn öğesine benzer bir çırpma ve çevirme davranışı uygulamak için GitHub'daki Horology'de bulunan RotaryWithSnap özelliğini kullanın.