Android Compose LazyRow and LazyGrid

Merhaba sizlere Compose ile ilgili listelerin hem yatay hem dikey olarak sıralanmasının nasıl yapıldığını anlatacağım. İçerisindeki elemanları veritabanından çekerek istediğiniz gibi modifiye edebilirsiniz :)

Yıllarca xml üzerinden RecyclerView ile verilerimizi listelerken adaptör yazarken oldukça zorluklarla karşılaştık. Compose ile bu verileri listelemek oldukça basit hadi başlayalım.

Compose üzerinde LazyVerticalGrid ve LazyRow adında parametleri alan tanımlarla bunları yapacağız. Öncelikle bir compose fonksiyonu oluşturarak tasarımla ilgili işlemleri yapmaya başlayacağız,

@Composable
fun LazyGridList(context: Context) {
  val itemNumber = (1..100).toList()
  LazyVerticalGrid(GridCells.Fixed(2)) {
    items(itemNumber.size) { index ->
      val itemValue = itemNumber[index]
      Card(modifier = Modifier
        .width(200.dp)
        .height(250.dp)
        .padding(8.dp)
        .clickable {
          Toast
            .makeText(context, "Item $itemValue", Toast.LENGTH_SHORT)
            .show()
        }) {
        Text(
          text = "item $itemValue", fontSize = 18.sp, modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
        )
      }
    }
  }
}

• Burada bir Toast mesaj kullanacağımız için android penceremizde bir context o anki durumunu ve çevresini belirtmemiz gerekiyor.
• val itemNumber = (1..100).toList(): Bu satır, 1 ile 100 arasındaki sayıları içeren bir liste oluşturuyor. Bu liste, sonraki adımlarda ızgara içinde görüntülenen öğeleri temsil edecek.
• LazyVerticalGrid(GridCells.Fixed(2)): Jetpack Compose'un LazyVerticalGrid bileşenini oluşturuyor. Bu, içerisinde öğelerin tembel yükleme (lazy loading) mantığıyla bir dikey ızgara düzeni içinde görüntüleneceği anlamına gelir. GridCells.Fixed(2) ifadesi, her sıradaki sütun sayısının 2 olacağını belirtir.
• items(itemNumber.size): Bu, LazyVerticalGrid içinde görüntülenecek öğe sayısını belirler. Önceki adımda oluşturulan itemNumber listesinin boyutunu temel alarak bu kadar öğe oluşturulacak.
• Card(...): Bu blok, her bir öğeyi temsil eden bir Card bileşeni oluşturur. Bu, öğelerin kutu içine yerleştirilmesini sağlar.
• Text(...): Bu blok, her bir kartın içinde bir metin bileşeni oluşturur. Bu metin, kartın içeriğinde görüntülenecek olan öğenin değerini içerir.
• Toast.makeText(context, "Item $itemValue", Toast.LENGTH_SHORT).show(): Bu satır, tıklama işlemi gerçekleştiğinde çağrılan Toast mesajını oluşturur ve gösterir. Mesaj içeriği, tıklanan öğenin değerini içerir.

Şimdi yatay olarak nasıl sıralama yapabiliriz bunu göstereceğim,

@Composable
fun LazyRowList(context: Context) {
  val itemCount = 10
  LazyRow {
    items(itemCount) { index ->
      val itemValue = index + 1
      Card(modifier = Modifier
        .width(200.dp)
        .height(100.dp)
        .padding(8.dp)
        .clickable {
          Toast
            .makeText(context, "Item $itemValue", Toast.LENGTH_SHORT)
            .show()
        }) {
        Column(
          modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally
        ) {
          Text(text = "item $itemValue", fontSize = 18.sp)
        }
      }
    }
  }
}

Dikey işlemlerdekilere ekstra olarak,
LazyRow { ... }: Bu blok, Jetpack Compose'un LazyRow bileşenini oluşturur. Bu bileşen, öğelerin yatay olarak tembel yükleme (lazy loading) mantığıyla bir sıra içinde görüntüleneceği anlamına gelir.

verticalArrangement = Arrangement.Center : Column içindeki öğelerin dikeyde ortalanmasını belirtir.
horizontalAlignment = Alignment.CenterHorizontally : Column içindeki öğelerin yatayda ortalanmasını belirtir.

İlgili kodların görsel çıktısı aşağıdaki gibidir,

Bir başka yazımda görüşmek üzere :)