Mungkin terlintas di pikiran kalian bagaimana sih nampilin element urut kebawah atau urut kesamping. Nah pada tutorial kali ini, kalian akan belajar mengenai Layouting pada jetcpack compose.
Introduction
Jetpack Compose menyediakan API untuk menampilkan elemen kebawah atau kesamping. Berbeda dengan xml, untuk layoutingnya hanya menggunakan satu view tidak dispesifikan sendiri - senidiri. Metode hampir sama penerapannya di Flutter.
Row() untuk menampilkan elemen kesamping, sedangkan Column() menampilkan elemen urut kebawah. Ini merupakan basic layouting pada jetpack compose, sangat penting untuk di pelajari guna membuat UI yang sempurna.Nah langsung saja ke pembahasan lebih lanjut.
Row
Seperti yang telah saya jelaskan di intro, Row untuk menampilkan child atau elemen di dalamnya berupa Baris atau kesamping.
Row meliki parameter pendukung, seperti modifier, horizontalArrangement, verticalAlignment. Ketiganya memiliki fungsi - fungsi yang bisa memebantu kalian dalam menyusun UI.
horizontalArrangement
Parameter ini berfungsi untuk menentukan urutan horizontal dari child si Row nya. Apakah susuannya diawal, diakhir, atau ditengah. Seperti contoh composable berikut:
Paramater ini akan diisi oleh objek Arrangement yang memiliki element - element:
- Arrangement.Start
- Arrangement.End
- Arrangement.Center
- Arrangement.SpaceBetween
- Arrangement.SpaceEvenly
- Arrangement.SpaceArround
verticalAlignment
Pada parameter ini berfungsi untuk mengatur alignment pada child row secara vertikal. Seperti contoh berikut
Paramater ini akan diisi oleh objek Alignment yang memiliki element - element:
- Top
- CenterVertically
- Bottom
Column
Kalau tadi menampilkan element berbaris sekarang menampilkan element kolom atau urut kebawah secara vertikal. Berikut contoh kode penerapan Column.
Column memiliki height MATCH_PARENT secara default, namun kalian juga bisa menentukan sendiri dengan nilai Dp() atau di WRAP_CONTENT dengan cara mengisi parameter Modifier.requiredHeight
Column meliki parameter pendukung, seperti modifier, horizontalArrangement, verticalAlignment. Ketiganya memiliki fungsi - fungsi yang bisa memebantu kalian dalam menyusun UI.
verticalArrangement
Parameter ini berfungsi untuk menentukan urutan vertical dari child si Column nya. Apakah susuannya diawal, diakhir, atau ditengah. Seperti contoh composable berikut
Paramater ini akan diisi oleh objek Arrangement yang memiliki element - element:
- Arrangement.Start
- Arrangement.End
- Arrangement.Center
- Arrangement.SpaceBetween
- Arrangement.SpaceEvenly
- Arrangement.SpaceArround
horizontalAlignment
Pada parameter ini berfungsi untuk mengatur alignment pada child Column secara horizontal. Seperti contoh berikut
Paramater ini akan diisi oleh objek Alignment yang memiliki element - element:
- Start
- CenterHorizontally
- End
Penutup
Nah itu dia penjelasan dan cara penerapan dari Row dan Column, Sebenarnya masih ada lagi composable yang bisa menampilkan baris atau kolom dan dapat discroll yang akan saya bahas di tutorial selanjutnya.
Seperti biasa, jika kalian masih belum menegerti tentang materi ini silahkan kunjungi dokumentasi resminya di https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary
Sekian :)