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.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Wear OS Codelab için Yazma
- Listeler ve Izgaralar
- Compose'da Görünümleri kullanma