Tutorial Jetpack compose: Grid

Tutorial Jetpack compose: Grid

#tutorial

#jetpackcompose

https://placeimg.com/640/480/any

Setelah Row & Column, kali ini menampilkan elemen dengan tampilan grid. Grid banyak digunakan di aplikasi - aplikasi foto seperi Google Photo. Jika kalian pengguna Instagram tentunya tidak asing dengan tampilan instagram feed. Bentuk tampilan kotak-kotak dan dapat di scroll seperti itulah yang dinamakan grid.

Introduction

Jetpack Compose menyediakan API untuk menampilkan element berkotak - kotak atau grid. Dengan Composable LazyVerticalGrid kalian bisa membuat tampilan grid walaupun hingga saat artikel ini ditulis API ini masih experimental atau belum stable.

Jadi ketika ingin menggunakannya kalian harus menambahkan anotasi @ExperimentalFoundationApi karena API masih experimental. Baik langsung saja kita ke pengimplementasiannya.

LazyVerticalGrid

Untuk mengatur cell atau kotak dalam grid, LazyVerticalGrid menyediakan parameter cells mengontrol cara sel terbentuk menjadi kolom. Contoh berikut menampilkan item dalam grid, menggunakan GridCells.Adaptive untuk menetapkan lebar masing-masing kolom minimal 128.dp:

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PhotoGrid(photos: List<Photo>) {
    LazyVerticalGrid(
        cells = GridCells.Adaptive(minSize = 128.dp)
    ) {
        items(photos) { photo ->
            PhotoItem(photo)
        }
    }
}

Selain GridCells.Adaptive ada tipe cells lain yang dengan memberikan jumlah kolom perbaris. Seperti berikut

cels = GridCells.Fixed(2)

Kode diatas akan menampilkan 2 colom dalam 1 baris.

Penutup

Nah, itulah tutorial singkat mengenai menampilan Grid pada Jetpack Compose. Terdapat 2 cara menampilkan cell dalam LazyVerticalGrid yaitu berdasarkan size dan jumlah kolom per barisnya. Meskipun begitu, API ini masih experimental bisa saja ada perubahan atau bahkan di hapus. Jadi kalian harus keep update.

Seperti biasa jika kalian masih ingin tahu lebih dalam, silahkan kunjungi dokumentasi resminya di https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary

Sekian ๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹

Referensi

  • https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary
We'll never share your email with anyone else.