Jetpack Compose - ConstraintLayout

Penting
Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE
Pengertian
Sebelum lanjut, kalian wajib menambahkan library baru di gradle implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"
jika tidak, kodingan kalian tidak akan working yaa.
ConstraintLayout adalah sebuah komponen tata letak dalam toolkit UI Jetpack Compose yang digunakan untuk membuat tata letak yang kompleks dengan menggunakan kendali (constraint) antara komponen-komponen UI. Dengan menggunakan ConstraintLayout, Anda dapat menentukan hubungan dan batasan antara komponen-komponen UI, seperti posisi relatif, kepadatan, dan ukuran, untuk menciptakan tata letak yang lebih fleksibel dan adaptif.
Anda harus menggunakan ConstraintLayout ketika:
-
Memerlukan Tata Letak yang Kompleks: Jika Anda perlu membuat tata letak yang kompleks dengan lapisan-lapisan dan hierarki yang lebih dalam, dan membutuhkan kendali yang kuat antara komponen-komponen UI, ConstraintLayout dapat digunakan untuk menciptakan tata letak yang lebih terstruktur dan dinamis.
-
Mendukung Responsivitas: Jika Anda ingin membuat tata letak yang responsif dan dapat menyesuaikan diri dengan berbagai ukuran layar dan orientasi perangkat, ConstraintLayout memungkinkan Anda untuk menentukan batasan dan hubungan antara komponen-komponen UI agar dapat menyesuaikan diri dengan berbagai kondisi layar.
-
Memiliki Kontrol yang Lebih Besar: Jika Anda memerlukan kontrol yang lebih besar atas posisi, ukuran, dan hubungan antara komponen-komponen UI, ConstraintLayout memberikan fleksibilitas yang lebih besar daripada komponen tata letak lainnya seperti
Box
atauColumn
, karena Anda dapat menentukan kendali (constraint) yang spesifik antara komponen-komponen UI.
Perbedaan antara ConstraintLayout dan Box adalah:
- ConstraintLayout memungkinkan Anda untuk menentukan kendali (constraint) yang kuat antara komponen-komponen UI, sementara Box hanya digunakan untuk menempatkan dan mengelompokkan komponen-komponen UI dalam satu kotak tanpa adanya kendali yang spesifik.
- ConstraintLayout lebih cocok digunakan untuk tata letak yang kompleks dan dinamis yang memerlukan kontrol yang lebih besar atas hubungan antara komponen-komponen UI, sedangkan Box lebih sederhana dan umumnya digunakan untuk tata letak yang lebih sederhana atau sebagai wadah untuk mengelompokkan komponen-komponen UI.
Parameter/Atribut
@Composable
inline fun Box(
modifier: Modifier = Modifier,
contentAlignment: Alignment = Alignment.TopStart,
propagateMinConstraints: Boolean = false,
content: @Composable BoxScope.() -> Unit
)
modifier: Modifier = Modifier
- Modifier untuk menyesuaikan tampilan dan perilaku dari
Box
. Dengan menggunakan modifier, Anda dapat mengontrol hal-hal seperti padding, margin, warna latar belakang, dan tata letak dariBox
.
contentAlignment: Alignment = Alignment.Center
- Penataan konten di dalam
Box
. Ini menentukan cara konten di dalamBox
akan disusun dalam ruang yang tersedia, seperti di tengah-tengah, di kiri, di kanan, di atas, atau di bawah.
content: (@Composable BoxScope.() -> Unit)? = null
- Lambda untuk mendefinisikan isi dari
Box
. Ini memungkinkan Anda untuk menempatkan komponen-komponen UI di dalamBox
dan mengatur tata letak dan penampilan mereka menggunakan fungsi pembantu sepertiBox
,Spacer
, dan lainnya.
Contoh
@Composable
fun DemoConstraintLayout() {
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)
}
)
}
}
referensi : https://developer.android.com/develop/ui/compose/layouts/constraintlayout