Android-native

Layout-layout di Jetpack Compose (Part-1)

Jetpack Compose adalah android modern toolkit untuk membuat native UI. Pada tulisan sebelumnya kita telah berkenalan dengan jetpack compose. Kali ini kita...

Ikhwan Written by Ikhwan · 2 min read >

Jetpack Compose adalah android modern toolkit untuk membuat native UI. Pada tulisan sebelumnya kita telah berkenalan dengan jetpack compose. Kali ini kita akan membahas layout yang kemungkinan bakal sering digunakan, yaitu Column, Row, dan Box.

Layout-layout tersebut digunakan untuk nge group layout-layout lainnya. Jadi tentu saja kita akan sering menggunakannya. Langsung saja, yuk ngoding 😀

1. Column

Sesuai dengan namanya, column memiliki fungsi untuk menampilkan childnya secara vertical. Layout ini memiliki kesamaan dengan Linear Layout yang memiliki orientation vertical dan juga Column pada flutter. Berikut contohnya:

Contoh column

Gunakan code berikut ini:

@Composable
fun MyColumn() {
    Column(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxSize()
    ) {
        Text("Left text", Modifier.background(Color.Yellow))
        Text(
            "Center Text",
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .background(Color.Yellow)
        )
        Text(
            "Right Text", modifier = Modifier
                .align(Alignment.End)
                .background(Color.Yellow)
        )
        Text(
            "Lagi", modifier = Modifier
                .padding(vertical = 12.dp)
                .background(color = Color.Gray)
                .padding(12.dp)
                .background(color = Color.Green)
                .fillMaxWidth(), textAlign = TextAlign.Center
        )
        Text(
            "Green", modifier = Modifier
                .background(Color.Green)
                .fillMaxWidth()
                .weight(1f),
            textAlign = TextAlign.Center
        )
        Text(
            "Red", modifier = Modifier
                .background(Color.Red)
                .fillMaxWidth()
                .weight(1f),
            textAlign = TextAlign.Center
        )
    }
}

@Preview(showBackground = true)
@Composable
fun ColumnPreview() {
    Sample_JetpackComposeTheme {
        MyColumn()
    }
}
  • Column menampilkan childnya secara terurut dari atas ke bawah
  • Kita menggunakan Modifier.fillMaxSize() pada column untuk membuat layout tersebut memiliki width dan height maksimal.
  • Modifier.align() pada Text, bisa digunakan untuk menentukan posisi dari Text tersebut.
  • Kita juga bisa menggunakan Modifier.fillMaxWidth() pada Text, agar Text tersebut memiliki width maksimal

Untuk teman-teman yang sudah terbiasa dengan pembuatan layout menggunakan xml, kurang lebih persamaannya akan seperti ini:

Jetpack ComposeXml
Modifier.fillMaxSize()android:layout_width=”match_parent”
android:layout_height=”match_parent”
Modifier.fillMaxWidth()android:layout_width=”match_parent”
Modifier.fillMaxHeight()android:layout_height=”match_parent”
Modifier.width(30.dp).height(150.dp)android:layout_width=”30dp”
android:layout_height=”150dp”
Modifier.weight(1f)android:layout_weight=”1″
Tidak diaturandroid:layout_width=”wrap_content”
android:layout_height=”wrap_content”

Hal tersebut berlaku untuk layout lainnya juga ya.

2. Row

Row akan menampilkan child yang dimilikinya secara horizontal. Layout ini memiliki kesamaan sifat dengan Linear Layout dengan orientation horizontal dan juga Row pada Flutter. Berikut contohnya:

Contoh Row
@Composable
fun MyRow() {
    Row(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth()
    ) {
        Text(
            "Red", modifier = Modifier
                .background(Color.Red)
                .weight(1f),
            textAlign = TextAlign.Center
        )
        Text(
            "Green", modifier = Modifier
                .background(Color.Green)
                .weight(2f)
                .height(45.dp),
            textAlign = TextAlign.Center
        )
        Text(
            "Blue", modifier = Modifier
                .background(Color.Blue)
                .weight(2f)
                .height(30.dp)
                .align(alignment = Alignment.CenterVertically),
            textAlign = TextAlign.Center
        )
    }
}

@Preview(showBackground = true)
@Composable
fun RowPreview() {
    Sample_JetpackComposeTheme {
        MyRow()
    }
}
  • Layout memiliki height menyesuaikan dengan kontennya, hal ini dikarenakan kita tidak menggunakan Modifier.fillMaxHeight().

3. Box

Box digunakan untuk menampilkan childnya secara tertumpuk, seperti layout text 1 ditampilkan persis di atas text 2. Layout ini memiliki kesamaan dengan Relative Layout pada xml dan juga Stack pada Flutter. Berikut contohnya:

Contoh Box
@Composable
fun MyBox() {
    Box(Modifier.fillMaxSize()) {
        Box(
            Modifier
                .fillMaxSize()
                .background(Color.LightGray)
        )
        Box(
            Modifier
                .height(70.dp)
                .width(70.dp)
                .background(Color.Red)
        )
        Box(
            Modifier
                .align(Alignment.TopCenter)
                .height(70.dp)
                .width(70.dp)
                .background(Color.Green)
        )
        Box(
            Modifier
                .align(Alignment.BottomEnd)
                .height(70.dp)
                .width(70.dp)
                .background(Color.Green)
        )
        Box(
            Modifier
                .align(Alignment.TopCenter)
                .fillMaxHeight()
                .width(50.dp)
                .background(Color.Blue)
        )
        Box(
            Modifier
                .align(Alignment.Center)
                .height(70.dp)
                .width(70.dp)
                .background(Color.White)
        )
        Text("This text is drawn last", modifier = Modifier.align(Alignment.Center))
    }
}

@Preview(showBackground = true)
@Composable
fun BoxPreview() {
    Sample_JetpackComposeTheme {
        MyBox()
    }
}
  • Child pada layout Box akan ditampilkan secara tertumpuk dari child pertama hingga seterusnya. Jadi child terakhir yang ada di layout Box akan ditampilkan paling atas.

Mimin beberapa kali bilang dalam tulisan ini memiliki kesamaan ketika membandingkan dengan xml dan juga Flutter. Tapi bukan berarti hal tersebut 100% sama persis ya.

Sekian dulu tulisan kali ini, moga bermanfaat ya 😀. Pada tulisan selanjutnya, kita akan membahas tentang ConstraintLayout. Ditunggu ya.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *