Jetpack Compose, Android • 16 Mei 2024

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 atau Column, 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 dari Box.

contentAlignment: Alignment = Alignment.Center

Penataan konten di dalam Box. Ini menentukan cara konten di dalam Box 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 dalam Box dan mengatur tata letak dan penampilan mereka menggunakan fungsi pembantu seperti Box, 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)
            }
        )
    }
}

Row