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'i, çeşitli Wear OS ekran boyutlarında harika görünen içerikler oluşturmak için Horology'nin ScalingLazyColumn
düzeninin sürümünü kullanarak nasıl liste oluşturacağınızı göstermektedir. Örneğin, aşağıdaki örnekte, ScalingLazyColumn
öğesinin scrollState
içinde ayarlanan listenin ilk ve son öğelerine gerekli dolgu eklenir:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
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 Horology'nin ScalingLazyColumn
sürümüne eklemek için columnState
özelliğinin rotaryMode
parametresini aşağıdaki kod snippet'inde gösterildiği gibi RotaryWithSnap
olarak ayarlayın:
val columnState = rememberResponsiveColumnState( // ... // ... rotaryMode = ScalingLazyColumnState.RotaryMode.Snap ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { // ... // ... } }
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