Kaydırılabilir ızgara oluşturma

Uygulama performansını artırarak büyük veri kümelerini ve dinamik içerikleri yavaş ızgaralarla yönetebilirsiniz. Yavaş ızgara bileşenleri sayesinde öğeleri birden fazla sütun veya satıra yayılmış şekilde kaydırılabilir bir kapsayıcıda gösterebilirsiniz.

Sürüm uyumluluğu

Bu uygulama için projenizin minSDK değerinin API düzeyi 21 veya üstü olarak ayarlanması gerekir.

Bağımlılıklar

Izgara yönüne karar verme

LazyHorizontalGrid ve LazyVerticalGrid bileşenleri, öğeleri ızgarada görüntüleme desteği sağlar. Yavaş dikey ızgaralar öğelerini birden fazla sütuna yayılmış, dikey olarak kaydırılabilir bir kapsayıcıda gösterir. Yavaş yatay ızgaralar ise yatay eksende aynı davranışı gösterir.

Kaydırılabilir ızgara oluşturma

Aşağıdaki kod, üç sütunlu yatay kaydırmalı bir ızgara oluşturur:

@Composable
fun ScrollingGrid() {
    val itemsList = (0..15).toList()

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }
    }
}
LazyListSnippets.kt

Kodla ilgili önemli noktalar

  • LazyHorizontalGrid bileşimi, ızgaranın yatay yönünü belirler.
    • Dikey ızgara oluşturmak için bunun yerine LazyVerticalGrid simgesini kullanın.
  • rows mülkü, ızgara içeriğinin nasıl düzenleneceğini belirtir.
    • Dikey ızgara için düzenlemeyi belirtmek üzere columns mülkünü kullanın.
  • items(itemsList), itemsList'ı LazyHorizontalGrid'e ekler. Lambda, her öğe için bir Text bileşeni oluşturur ve metni öğe açıklamasına ayarlar.
  • item(), LazyHorizontalGrid öğesine tek bir öğe ekler. Lambda ise items()'e benzer şekilde tek bir Text bileşeni oluşturur.
  • GridCells.Fixed, satır veya sütun sayısını tanımlar.

  • Mümkün olduğunca fazla satır içeren bir ızgara oluşturmak için GridCells.Adaptive parametresini kullanarak satır sayısını ayarlayın.

    Aşağıdaki kodda 20.dp değeri, her sütunun en az 20.dp olduğunu ve tüm sütunların eşit genişlikte olduğunu belirtir. Ekran 88 dp genişliğindeyse her biri 22 dp olan 4 sütun vardır.

Sonuçlar

Şekil 1. LazyHorizontalGrid kullanılarak oluşturulan yatay kaydırılabilir ızgara.

Bu kılavuzu içeren koleksiyonlar

Bu kılavuz, daha geniş Android geliştirme hedeflerini kapsayan, özel olarak seçilmiş Hızlı Kılavuz koleksiyonlarından biridir:

Listeler ve ızgaralar, uygulamanızın koleksiyonları kullanıcıların kolayca kullanabileceği, görsel açıdan hoş bir biçimde göstermesine olanak tanır.
Hızlı rehber koleksiyonu
Birleştirilebilir işlevlerin, Materyal Tasarım tasarım sistemine dayalı güzel kullanıcı arayüzü bileşenleri oluşturmanızı nasıl kolaylaştırabileceğini öğrenin.
Hızlı rehber koleksiyonu
Bu video serisi, çeşitli Compose API'lerini tanıtarak mevcut API'leri ve bunların nasıl kullanılacağını hızlıca gösterir.
Hızlı rehber koleksiyonu

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek kısa kılavuzlar hakkında bilgi edinebilir veya bize ulaşarak düşüncelerinizi bizimle paylaşabilirsiniz.
SSS'ye gidin Geri bildirim gönderin