Jetpack compose

Ringkasan singkat , Layout, State

Jetpack compose merupakan UI Toolkit terbaru dari google untuk pengembangan aplikasi berbasis android. Jetpack compose versi 1.0 rilis pada tanggal 28 Juli 2021 didalamnya menjajaikan hal baru dalam menulis UI aplkasi android dalam menggunakan jetpack compose tidak lagi menggunakan XML dalam membuat user interface melainkan secara declarative UI dengan hanya menggunakan kotlin selain itu terdapat beberapa keutungan seperti

1. Lebih sedikit menulis kode
2. Pendekatan dekralatif sehingga kode yang ditulis dapat ditampilkan secara langsung
3. Live edit sehingga perubahan dapat berubah secara langsung
4. Implementasi animasi yang mudah.

Dalam menulis UI pada jetpack compose diperlukan anotasi @Composable setiap kali membuat ui pada awalan sebelum fungsi hal ini digunakan untuk bahwa fungsi tersebut sebagai komponen UI .

@Composable
fun CompanyCard(detail: GithubDetailResponse){
    Column(
        modifier = Modifier.padding(top = 20.dp)
    ){
        Text(
            fontSize = 18.sp,
            text = detail.company.toString()
        )
    }
}

Seperti potongan kode diatas sebagai kartu untuk menampilkan nama sebuah perusahaan hal pertama yaitu memberikan anotasi @Composable pada awalan kemudian dalam fungsi memanggil komponen yang akan digunakan seperti diatas yaitu Kolom untuk membentuk layout kolom vertikal kemudian memasukan komponen lainya seperti text.

Layout Compose

Jetpack compose memiliki 3 layout yaitu Column, Row, dan Box. Coloumn digunakan untuk membuat layout secara vertikal bertingkat satu sama lain dengan komponen lainnya seperti gambar dibawah ini, Row digunakan jika ingin membuat layout secara horizontal layout ini cocok digunakan ketika ingin membuat tampilan secara samping seperti showcase gambar. Box dapat digunakan jika ingin membuat layout secara overlapping satu dengan lainnya.

Column Layout

State Compose

State dapat menerima jenis tipe data yang diterima dan dapat berubah dalam setiap waktu, dalam aplikasi android state dapat ditemui dalam snackbar untuk menampilkan peringatan atau kolom komentar secara realtime. Dalam jetpack compose diberikan bagaimana cara menyimpan dan menggunakan sebuah state dalam composable UI di kompose bersifat immutable dimana tidak bisa dilakukan perubahan data ketika ui telah created atau jadi namu setiap akli state dalam UI berubah compose akan membuat ulang / recreates bagian dari UI yang berubah.

var searchValue by remember { mutableStateOf("") }
TextField(
    value = searchValue,
    onValueChange = { searchValue = it },
)