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.

Birçok Wear OS cihaz yuvarlak ekran kullanır. Bu nedenle, ekranın üst ve alt kısmına yakın bir yerde görünen liste öğelerini görmek daha zordur. Bu nedenle, Wear OS için Beste, ölçeklendirme ve kararma efektlerini destekleyen ScalingLazyColumn adlı LazyColumn sınıfının bir sürümünü içerir. Öğeler ekranın ortasına doğru hareket ettiklerinde daha büyük ve daha opak olurlar.

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

Tutturma ve sallama efekti ekleyin

Kullanıcının ScalingLazyColumn nesnelerine uyguladığı parmak hareketlerine bir tutturma ve sallama davranışı ekleyebilirsiniz. Bu etki, kullanıcıların bir listedeki öğeler arasında daha hassas bir şekilde gezinmesine ve uzun bir listede daha hızlı hareket etmesine yardımcı olur.

Bu efekti uygulamanızda bir listeye veya seçiciye eklemek için flingBehavior parametresini aşağıdaki kod snippet'inde gösterildiği gibi ScalingLazyColumn tanımınıza 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ı bir çevirmeli kadranla etkileşim kurduğunda ScalingLazyColumn için de benzer bir tutturma ve kaydırma davranışını uygulamak için GitHub'daki Horology'de bulunan RotaryWithSnap özelliğini kullanın.