ConstraintLayout di Compose

ConstraintLayout dapat membantu menempatkan composable relatif terhadap yang lain di layar, dan merupakan alternatif untuk menggunakan beberapa elemen Row, Column, Box bertingkat, dan tata letak kustom. ConstraintLayout berguna saat menerapkan tata letak yang lebih besar dengan persyaratan perataan yang lebih rumit.

Untuk menggunakan ConstraintLayout di Compose, Anda perlu menambahkan dependensi ini di build.gradle:

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02"

ConstraintLayout di Compose berfungsi dengan DSL:

  • Referensi dibuat menggunakan createRefs() atau createRefFor(), dan setiap composable dalam ConstraintLayout harus memiliki referensi yang terkait dengannya.
  • Batasan diberikan menggunakan pengubah constrainAs(), yang menggunakan referensi sebagai parameter dan memungkinkan Anda menentukan batasannya di lambda body.
  • Batasan ditentukan menggunakan linkTo() atau metode berguna lainnya.
  • parent adalah referensi yang sudah ada dan dapat digunakan untuk menentukan batasan terhadap composable ConstraintLayout itu sendiri.

Berikut ini contoh composable yang menggunakan ConstraintLayout:

@Composable
fun ConstraintLayoutContent() {
    ConstraintLayout {
        // Create references for the composables to constrain
        val (button, text) = createRefs()

        Button(
            onClick = { /* Do something */ },
            // Assign reference "button" to the Button composable
            // and constrain it to the top of the ConstraintLayout
            modifier = Modifier.constrainAs(button) {
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text("Button")
        }

        // Assign reference "text" to the Text composable
        // and constrain it to the bottom of the Button composable
        Text("Text", Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = 16.dp)
        })
    }
}

Kode ini membatasi bagian atas Button untuk induk dengan margin 16.dp dan Text di bagian bawah Button, juga dengan margin 16.dp.

Menampilkan tombol dan elemen teks yang disusun dalam ConstraintLayout

Untuk contoh selengkapnya tentang cara bekerja dengan ConstraintLayout, cobalah codelab tata letak.

API terpisah

Pada contoh ConstraintLayout, batasan ditentukan sebagai bagian dari tata letak, dengan pengubah dalam composable yang diterapkan. Namun, pada beberapa situasi, lebih baik memisahkan batasan itu dari tata letak yang diterapkan. Misalnya, Anda mungkin ingin mengubah batasan berdasarkan konfigurasi layar, atau membuat animasi di antara dua kumpulan batasan.

Untuk kasus seperti ini, Anda dapat menggunakan ConstraintLayout dengan cara lain:

  1. Teruskan ConstraintSet sebagai parameter ke ConstraintLayout.
  2. Tetapkan referensi yang dibuat di ConstraintSet ke composable menggunakan pengubah layoutId.
@Composable
fun DecoupledConstraintLayout() {
    BoxWithConstraints {
        val constraints = if (minWidth < 600.dp) {
            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)
        }
    }
}

Kemudian, saat Anda perlu mengubah batasan, Anda dapat meneruskan ConstraintSet yang berbeda.

Mempelajari lebih lanjut

Pelajari ConstraintLayout di Compose lebih lanjut di bagian Tata Letak Batasan pada codelab Tata Letak di Jetpack Compose, dan lihat cara kerja API di Contoh Compose yang menggunakan ConstraintLayout.