Jetpack Compose, Android • 16 Mei 2024

Jetpack Compose - SubComposeLayout

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

SubcomposeLayout adalah komponen tata letak kustom dalam Jetpack Compose yang memungkinkan Anda untuk mengatur tata letak dan perilaku dari komponen-komponen anak secara terpisah. Dengan SubcomposeLayout, Anda dapat mengendalikan bagaimana komponen-komponen anak diukur, ditata, dan ditempatkan dalam layout induk.

Kapan Harus Menggunakan SubcomposeLayout:

Tata Letak Terpisah untuk Komponen Anak: Ketika Anda perlu mengatur tata letak dan perilaku dari komponen-komponen anak secara terpisah, SubcomposeLayout memungkinkan Anda untuk membuat kebijakan pengukuran dan tata letak yang berbeda untuk setiap komponen anak.
Kontrol Penuh atas Tata Letak Anak: Jika Anda membutuhkan kontrol penuh atas tata letak komponen-komponen anak, termasuk pengukuran dan penempatan secara individual, SubcomposeLayout dapat memberikan fleksibilitas yang diperlukan.
Optimasi Kinerja: Dalam beberapa kasus, SubcomposeLayout dapat membantu dalam mengoptimalkan kinerja tampilan aplikasi dengan mengatur ulang tata letak dan perilaku komponen-komponen anak sesuai dengan kebutuhan spesifik.

Perbedaan antara SubcomposeLayout dan Layout:

Kontrol Anak: Pada SubcomposeLayout, Anda memiliki kontrol penuh atas tata letak dan perilaku komponen-komponen anak secara individual, sementara pada Layout, Anda biasanya mengukur dan menata konten secara umum tanpa memperhatikan komponen-komponen anak secara terpisah.
Kebijakan Pengukuran: Dalam SubcomposeLayout, Anda dapat menentukan kebijakan pengukuran yang berbeda untuk setiap komponen anak, sedangkan dalam Layout, kebijakan pengukuran umumnya diterapkan ke semua konten dalam layout.

Parameter/Atribut

@Composable
fun SubcomposeLayout(
    modifier: Modifier = Modifier,
    measurePolicy: SubcomposeMeasureScope.(Constraints) -> MeasureResult
)

modifier: Modifier = Modifier

Parameter ini adalah objek Modifier yang digunakan untuk menyesuaikan tampilan dan perilaku dari layout. Anda dapat menggunakan modifier untuk menambahkan properti-properti seperti padding, margin, atau pengaturan ukuran dari layout yang dihasilkan.

measurePolicy: SubcomposeMeasureScope.(Constraints) -> MeasureResult

Parameter ini adalah lambda yang berisi logika untuk mengukur komponen-komponen anak di dalam layout. Lambda ini memiliki dua parameter:
- SubcomposeMeasureScope: Objek yang menyediakan fungsi-fungsi untuk mengukur komponen-komponen anak.
- Constraints: Batasan ukuran yang diberikan kepada layout.
Dalam lambda ini, Anda dapat menentukan cara mengukur dan menata komponen-komponen anak, serta mengembalikan hasil pengukuran dalam bentuk MeasureResult.

Contoh

@Composable
fun CustomSubcomposeLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    SubcomposeLayout(modifier) { constraints ->
        // Memanggil fungsi subcompose untuk mengukur komponen-komponen anak
        val placeables = subcompose(slotId = "content") {
            content()
        }.map { measurable ->
            measurable.measure(constraints)
        }

        // Menghitung ukuran layout berdasarkan ukuran komponen-komponen anak
        val width = placeables.maxOfOrNull { it.width } ?: constraints.minWidth
        val height = placeables.maxOfOrNull { it.height } ?: constraints.minHeight

        // Mengembalikan hasil pengukuran layout
        layout(width, height) {
            // Menempatkan komponen-komponen anak sesuai dengan posisi masing-masing
            var xPosition = 0
            var yPosition = 0
            placeables.forEach { placeable ->
                placeable.place(x = xPosition, y = yPosition)
                xPosition += placeable.width
            }
        }
    }
}

@Composable
fun DemoSubcomposeLayout() {
    CustomSubcomposeLayout {
        Text("Item 1", modifier = Modifier.padding(8.dp))
        Text("Item 2", modifier = Modifier.padding(8.dp))
        Text("Item 3", modifier = Modifier.padding(8.dp))
        Text("Item 4", modifier = Modifier.padding(8.dp))
        Text("Item 5", modifier = Modifier.padding(8.dp))
    }
}

Row