Android-native

Layout-layout di Jetpack Compose (Part-2)

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

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 tentang Constraint Layout.

Ini merupakan tulisan ke tiga tentang Jetpack Compose 😀

  1. Berkenalan dengan Jetpack Compose
  2. Layout-layout di Jetpack Compose (Part-1)
  3. [Now] Layout-layout di Jetpack Compose (Part-2)

Constraint Layout pada jetpack compose memiliki sifat yang sama dengan Constraint Layout pada xml yang biasa kita gunakan. Yaitu dengan menentukan referensi atau id, lalu menentukan hubungan yang dimiliki oleh setiap id tersebut (hubungan dengan id lain atau parent). Langsung saja, yuk ngoding

#Case1

Case 1

Gunakan code berikut ini:

    ConstraintLayout {
        val (buttonId, textId) = createRefs()

        Button(
            onClick = { /* Do something */ },
            modifier = Modifier.constrainAs(buttonId) {
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text("Button")
        }

        Text("Text", Modifier.constrainAs(textId) {
            top.linkTo(buttonId.bottom, margin = 16.dp)
            centerHorizontallyTo(parent)
//            end.linkTo(buttonId.end)
        })
    }
  • buttonId dan textId berfungsi sebagai referensi atau id
  • Modifier.constrainAs digunakan untuk menentukan id pada layout, dan juga menentukan hubungan dengan parent atau id lainnya.
  • Line 7 memiliki arti layout Button bagian atas dihubungkan dengan parent bagian atas dengan margin 16dp
  • Line 14 memiliki arti layout Text bagian atas dihubungkan dengan layout Button bagian bawah dengan margin 16dp
  • Jika ingin menampilkan text berada pada sisi kanan, cukup comment Line 15 dan uncomment Line 16. Line 16 itu sendiri memiliki arti layout Text bagian kanan dihubungkan dengan layout button bagian kanan.

Setelah melihat #Case1 beserta penjelasannya, Constraint layout tetap memiliki sifat yang sama bukan dengan yang sebelumnya?

#Case2

Pada case kali ini kita menggunakan 3 layout, dan juga menggunakan Barrier. Gunakan code berikut ini:

    ConstraintLayout {
        val (button1, button2, text1) = createRefs()

        Button(
            onClick = { /* Do something */ },
            modifier = Modifier.constrainAs(button1) {
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text("Button 1")
        }

        Text("Text", Modifier.constrainAs(text1) {
            top.linkTo(button1.bottom, margin = 16.dp)
            centerAround(button1.end)
        })

        val barrier = createEndBarrier(button1, text1)
        Button(
            onClick = { /* Do something */ },
            modifier = Modifier.constrainAs(button2) {
                top.linkTo(parent.top, margin = 16.dp)
                start.linkTo(barrier)
            }
        ) {
            Text("Button 2")
        }
    }
  • Pada Line 18 kita membuat barrier dengan posisi berada di sebelah kanan dari button1 dan text1. Dan karena text1 memiliki posisi lebih ke kanan dari pada button1, barrier memiliki posisi tepatnya disebelah kanan text1.
  • Barrier bisa menjadi referensi untuk layout lainnya, seperti pada Line 23.
  • Selain menggunakan createEndBarrier kita juga bisa menggunakan posisi lainnya seperti createTopBarrier untuk pembuatan barrier pada bagian atas, dan seterusnya.

#Case3

Pada case selanjutnya kita akan menggunakan Guideline. Jika Barrier dibuat berdasarkan layout lainnya, Guideline dibuat dengan menentukan posisinya berdasarkan parent. Agar lebih jelas, kita lihat pada contoh ya.

Gunakan code berikut ini:

    ConstraintLayout (modifier = Modifier.fillMaxWidth()){
        val text = createRef()
        val guideline = createGuidelineFromStart(fraction = 0.5f)
        Text(
            "This is a very very very very very very very long text",
            Modifier.constrainAs(text) {
                linkTo(start = guideline, end = parent.end)
                //Ngewrap kebawah
                width = Dimension.preferredWrapContent
            }
        )
    }
  • Pada Line 3, kita membuat Guideline dengan posisi setengah dari width yang tersedia. Karena ConstraintLayout memiliki modifier fillMaxWidth, berarti Guideline memiliki posisi setengahnya.

#Case4

Pada ketiga case sebelumnya, kita membuat referensi atau id dengan menggunakan createRef(). Selain dengan cara itu, kita juga bisa membuat referensi beserta relasinya secara terpisah. Berikut contohnya:

Contoh case 4
@Composable
fun DecoupledConstraintLayout() {
    BoxWithConstraints {
        val constraints = if (maxWidth < maxHeight) {
            decoupledConstraints(margin = 16.dp) // Portrait constraints
        } else {
            decoupledConstraints(margin = 32.dp) // Landscape constraints
        }

        ConstraintLayout(constraints) {
            Button(
                onClick = { /* Do something */ },
                modifier = Modifier.layoutId("button")
            ) {
                Text("Button")
            }

            Text("Text", Modifier.layoutId("text"))
        }
    }
}

private fun decoupledConstraints(margin: Dp): ConstraintSet {
    return ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        constrain(button) {
            top.linkTo(parent.top, margin = margin)
        }
        constrain(text) {
            top.linkTo(button.bottom, margin)
        }
    }
}
  • Seperti pada contoh di atas, referensi beserta relasinya dibuat pada method decoupledConstraints

Sekian dulu tulisan kali ini, moga bermanfaat ya 😀.

Di website ini terdapat berbagai tulisan menarik lainnya loh, seperti berikut:

Tinggalkan Balasan

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