Serba-Serbi Jetpack Compose (Bagian 2) — View & Layout

Published in

Arunatech

3 min readMar 31, 2023

Assalamualaikum sobat. Artikel ini merupakan lanjutan dari rangkaian artikel Serba-Serbi Jetpack Compose. Anda bisa melihat artikel sebelumnya di link berikut

Bagian 1: Pengenalan
Bagian 2: View & Layout (Anda di sini)

Dalam artikel ini saya akan membahas terkait dasar-dasar implementasi view dan layouting jika kita menggunakan Jetpack Compose.

View/Widget

Sebagaimana yang telah dijelaskan dalam artikel sebelumnya, UI pada Jetpack Compose dibangun di atas implementasi fungsi-fungsi kotlin. Fungsi-fungsi ini diberikan anotasi “@Composable” sebagai penanda bahwa fungsi tersebut akan merepresentasikan sebuah perubahan pada UI saat di render nanti.

Untuk membuat sebuah view atau widget yang biasa kita gunakan saat menggunakan UI Toolkit XML cukup mudah, kita hanya perlu mencari dan menggunakan fungsi yang sesuai.

Berikut contoh penggunaan-nya

@Composable
fun ButtonExample() {
    Button(onClick = { /* Do something! */ }) {
        Text(text = "Button")
    }
}

Untuk lebih mendalami terkait beragam fungsi composable di Jetpack Compose, kita bisa melihat langsung di official dokumentasi-nya disni, atau playground buatan komunitas seperti disni.

Salah satu hal yang cukup penting dipelajari saat implementasi view atau widget di Jetpack Compose adalah proses styling-nya yang menggunakan class Modifier. Contoh penggunaaan Modifier adalah sebagai berikut,

Text(text = "Hi there!",
    modifier = Modifier
        .border(2.dp, Color.Green)
        .padding(24.dp)
)

Layouting

Berbeda dengan UI Toolkit tradisional dengan XML, implementasi layouting dalam Jetpack Compose mayoritas akan menggunakan 3 fungsi composable berikut, yaitu Row, Column, dan Box. Tiga elemen tersebut akan “diracik” sedemikian rupa menggunakan parameter masing-masing elemen beserta Modifier untuk menghasilkan layout yang sesuai keinginan. Berikut penjelasan singkat mengenai 3 elemen tersebut:

Row
Saat layout ini digunakan, view yang ada di dalam-nya akan tersusun dan tergabung di dalam 1 baris yang sama. Contoh penggunaan-nya adalah sebagai berikut,

Row(
  verticalAlignment = Alignment.CenterVertically,
  horizontalArrangement = Arrangement.SpaceBetween
) {
    View1()
    View2()
}

Berikut adalah parameter yang cukup penting untuk diingat:

HorizontalArrangement (Parameter ini digunakan untuk mengatur bagaimana view di dalam Row akan tersusun secara horizontal)
VerticalAlignment

Column
Saat layout ini digunakan, view yang ada di dalam-nya akan tersusun dan tergabung di dalam 1 kolom yang sama. Contoh penggunaan-nya adalah sebagai berikut,

Column(
  horizontalAlignment = Alignment.CenterHorizontally,
  verticalArrangement = Arrangement.SpaceBetween
) {
  View1()
  View2()
}

Sama seperti Row, Column pun memiliki dua parameter penting, hanya saja fungsi nya terbalik.

verticalAlignment -> berubah menjadi -> verticalArrangement
horizontalArrangement -> berubah menjadi -> horizontalAlignment

Box
Saat layout ini digunakan, view yang ada di dalam-nya akan menimpa satu sama lain. Kita bebas membuat view atau layout apa saja didalam Box. Implementasi Box ini sedikit mirip dengan FrameLayout di UI Toolkit sebelumnya. Contoh penggunaan-nya adalah sebagai berikut,

Box(modifier = Modifier.fillMaxSize()) {
  Column(){...}
  Column(){...}
  Row(){...}
}

Saat kita menggunakan modifier pada salah satu implementasi layout Jetpack Compose, akan ada kemiripan dengan UI Toolkit tradisional terkait bagaimana behavior layout tersebut terhadap perubahan child view di dalamnya.

Serba-Serbi Jetpack Compose (Bagian 2) — View & Layout

Written by Crul