Kotlin untuk Jetpack Compose

Jetpack Compose dibuat berdasarkan Kotlin. Dalam beberapa kasus, Kotlin memberikan idiom khusus yang mempermudah penulisan kode Compose yang baik. Jika Anda memikirkan bahasa pemrograman lain dan secara natural menerjemahkan bahasa tersebut ke Kotlin, Anda mungkin akan melewatkan beberapa keunggulan Compose, dan mungkin akan merasa sulit memahami kode Kotlin yang ditulis secara idiomatis. Mengenal gaya Kotlin lebih jauh dapat membantu Anda menghindari kesulitan tersebut.

Argumen default

Saat menulis fungsi Kotlin, Anda dapat menentukan nilai default untuk argumen fungsi, yang digunakan jika pemanggil tidak secara eksplisit meneruskan nilai tersebut. Fitur ini mengurangi kebutuhan akan fungsi yang berlebihan.

Misalnya, Anda ingin menulis fungsi yang menggambar persegi. Fungsi tersebut mungkin memiliki satu parameter yang diperlukan, yaitu sideLength, yang menentukan panjang setiap sisi. Fungsi itu mungkin memiliki beberapa parameter opsional, seperti thickness, edgeColor, dan sebagainya; jika pemanggil tidak menentukannya, fungsi akan menggunakan nilai default. Dalam bahasa lain, Anda mungkin perlu menulis beberapa fungsi:

// We don't need to do this in Kotlin!
void drawSquare(int sideLength) { }

void drawSquare(int sideLength, int thickness) { }

void drawSquare(int sideLength, int thickness, Color edgeColor) { }
JavaSnippets.java

Di Kotlin, Anda dapat menulis fungsi tunggal dan menentukan nilai default untuk argumen:

fun drawSquare(
    sideLength: Int,
    thickness: Int = 2,
    edgeColor: Color = Color.Black
) {
}
KotlinSnippets.kt

Selain mencegah Anda menulis beberapa fungsi secara berlebihan, fitur ini menjadikan kode Anda lebih mudah dibaca. Jika pemanggil tidak menentukan nilai untuk sebuah argumen, itu menunjukkan bahwa fungsi akan menggunakan nilai default. Selain itu, parameter yang dinamai mempermudah untuk melihat apa yang terjadi. Jika Anda melihat kode dan melihat panggilan fungsi seperti ini, Anda mungkin tidak tahu apa arti parameter itu tanpa memeriksa kode drawSquare():

drawSquare(30, 5, Color.Red);
JavaSnippets.java

Sebaliknya, kode ini mendokumentasikan dirinya sendiri:

drawSquare(sideLength = 30, thickness = 5, edgeColor = Color.Red)
KotlinSnippets.kt

Sebagian besar library Compose menggunakan argumen default, dan ada baiknya untuk melakukan hal yang sama pada fungsi yang dapat dikomposisi, yang Anda tulis. Praktik ini membuat komposisi Anda dapat disesuaikan, tetapi tetap membuat perilaku default mudah dipanggil. Jadi, misalnya, Anda dapat membuat elemen teks sederhana seperti ini:

Text(text = "Hello, Android!")
KotlinSnippets.kt

Kode tersebut memiliki efek yang sama seperti kode berikut yang jauh lebih panjang, dengan lebih banyak parameter Text yang ditetapkan secara eksplisit:

Text(
    text = "Hello, Android!",
    color = Color.Unspecified,
    fontSize = TextUnit.Unspecified,
    letterSpacing = TextUnit.Unspecified,
    overflow = TextOverflow.Clip
)
KotlinSnippets.kt

Cuplikan kode pertama tidak hanya jauh lebih sederhana dan lebih mudah dibaca, tetapi juga mendokumentasikan dirinya sendiri. Dengan hanya menentukan parameter text, Anda mendokumentasikan bahwa untuk semua parameter lainnya, Anda ingin menggunakan nilai default. Sebaliknya, cuplikan kedua menyiratkan bahwa Anda ingin menetapkan nilai secara eksplisit untuk parameter lainnya, meskipun nilai yang Anda tetapkan kebetulan adalah nilai default untuk fungsi tersebut.

Fungsi dan ekspresi lambda yang lebih tinggi

Kotlin mendukung fungsi yang lebih tinggi, yang menerima fungsi lain sebagai parameter. Compose dibuat berdasarkan pendekatan ini. Misalnya, fungsi Button yang dapat dikomposisi menyediakan parameter lambda onClick. Nilai parameter tersebut adalah fungsi, yang dipanggil oleh tombol saat pengguna mengkliknya:

Button(
    // ...
    onClick = myClickFunction
)
// ...
KotlinSnippets.kt

Fungsi yang lebih tinggi berpasangan secara alami dengan ekspresi lambda, yaitu ekspresi yang mengevaluasi sebuah fungsi. Jika Anda hanya memerlukan fungsi tersebut sekali, Anda tidak perlu menentukannya di tempat lain untuk meneruskannya ke fungsi yang lebih tinggi. Sebagai gantinya, Anda dapat menentukan fungsi secara langsung dengan ekspresi lambda. Contoh sebelumnya mengasumsikan bahwa myClickFunction() ditentukan di tempat lain. Namun, jika Anda hanya menggunakan fungsi tersebut di sini, akan lebih mudah untuk menentukan fungsi itu sebagai bagian dari ekspresi lambda:

Button(
    // ...
    onClick = {
        // do something
        // do something else
    }
) { /* ... */ }
KotlinSnippets.kt

Lambda akhir

Kotlin menawarkan sintaksis khusus untuk memanggil fungsi yang lebih tinggi dengan parameter terakhir adalah lambda. Jika Anda ingin meneruskan ekspresi lambda sebagai parameter tersebut, Anda dapat menggunakan sintaksis lambda akhir. Alih-alih menempatkan ekspresi lambda dalam tanda kurung, Anda harus menempatkannya setelahnya. Ini adalah situasi umum di Compose, jadi Anda harus mengetahui tampilan kodenya.

Misalnya, parameter terakhir untuk semua tata letak, seperti fungsi Column() yang dapat dikomposisi, adalah content, yaitu fungsi yang membuat elemen UI turunan. Misalnya Anda ingin membuat kolom yang berisi tiga elemen teks, dan Anda perlu menerapkan beberapa pemformatan. Kode ini akan berfungsi, tetapi sangat rumit:

Column(
    modifier = Modifier.padding(16.dp),
    content = {
        Text("Some text")
        Text("Some more text")
        Text("Last text")
    }
)
KotlinSnippets.kt

Karena parameter content adalah parameter terakhir dalam tanda tangan fungsi, dan kita meneruskan nilainya sebagai ekspresi lambda, kita dapat mengeluarkannya dari tanda kurung:

Column(modifier = Modifier.padding(16.dp)) {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}
KotlinSnippets.kt

Kedua contoh tersebut memiliki arti yang sama persis. Kurung kurawal menentukan ekspresi lambda yang diteruskan ke parameter content.

Sebenarnya, jika satu-satunya parameter yang Anda teruskan adalah lambda akhir—yaitu, jika parameter terakhir adalah lambda, dan Anda tidak meneruskan parameter lain—Anda bisa menghapus tanda kurung sekaligus. Jadi, misalnya, Anda tidak perlu meneruskan pengubah ke Column. Anda dapat menulis kode seperti ini:

Column {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}
KotlinSnippets.kt

Sintaksis ini sangat umum di Compose, terutama untuk elemen tata letak seperti Column. Parameter terakhir adalah ekspresi lambda yang menentukan turunan elemen, dan turunan tersebut ditentukan dalam tanda kurung kurawal setelah panggilan fungsi.

Cakupan dan penerima

Beberapa metode dan properti hanya tersedia dalam cakupan tertentu. Cakupan terbatas memungkinkan Anda menawarkan fungsi di tempat yang memerlukannya dan menghindari penggunaan fungsi tersebut secara tidak sengaja jika tidak sesuai.

Pertimbangkan contoh yang digunakan di Compose. Saat Anda memanggil komposisi tata letak Row, lambda konten Anda akan dipanggil secara otomatis dalam RowScope. Ini memungkinkan Row mengekspos fungsi yang hanya valid dalam Row. Contoh di bawah menunjukkan cara Row mengekspos nilai spesifik baris untuk pengubah align:

Row {
    Text(
        text = "Hello world",
        // This Text is inside a RowScope so it has access to
        // Alignment.CenterVertically but not to
        // Alignment.CenterHorizontally, which would be available
        // in a ColumnScope.
        modifier = Modifier.align(Alignment.CenterVertically)
    )
}
KotlinSnippets.kt

Beberapa API menerima lambda yang dipanggil dalam cakupan penerima. Lambda tersebut memiliki akses ke properti dan fungsi yang ditentukan di tempat lain, berdasarkan deklarasi parameter:

Box(
    modifier = Modifier.drawBehind {
        // This method accepts a lambda of type DrawScope.() -> Unit
        // therefore in this lambda we can access properties and functions
        // available from DrawScope, such as the `drawRectangle` function.
        drawRect(
            /*...*/
            /* ...
        )
    }
)
KotlinSnippets.kt

Untuk informasi selengkapnya, lihat literal fungsi dengan penerima dalam dokumentasi Kotlin.

Properti yang didelegasikan

Kotlin mendukung properti yang didelegasikan. Properti ini dipanggil seolah-olah merupakan kolom, tetapi nilainya ditentukan secara dinamis dengan mengevaluasi ekspresi. Anda dapat mengenali properti ini dari penggunaan sintaksis by:

class DelegatingClass {
    var name: String by nameGetterFunction()

    // ...
}
KotlinSnippets.kt

Kode lain dapat mengakses properti dengan kode seperti ini:

val myDC = DelegatingClass()
println("The name property is: " + myDC.name)
KotlinSnippets.kt

Saat println() dieksekusi, nameGetterFunction() dipanggil untuk menampilkan nilai string.

Properti yang didelegasikan ini sangat berguna ketika Anda bekerja dengan properti yang didukung status:

var showDialog by remember { mutableStateOf(false) }

// Updating the var automatically triggers a state change
showDialog = true
KotlinSnippets.kt

Destrukturisasi class data

Jika Anda menentukan class data, Anda dapat dengan mudah mengakses data dengan deklarasi destrukturisasi. Misalnya, anggaplah Anda menentukan class Person:

data class Person(val name: String, val age: Int)
KotlinSnippets.kt

Jika Anda memiliki objek dari jenis tersebut, Anda dapat mengakses nilainya dengan kode seperti ini:

val mary = Person(name = "Mary", age = 35)

// ...

val (name, age) = mary
KotlinSnippets.kt

Anda akan sering melihat kode semacam itu di fungsi Compose:

Row {

    val (image, title, subtitle) = createRefs()

    // The `createRefs` function returns a data object;
    // the first three components are extracted into the
    // image, title, and subtitle variables.

    // ...
}
KotlinSnippets.kt

Class data menyediakan banyak fungsi berguna lainnya. Misalnya, saat Anda menentukan class data, compiler akan secara otomatis menentukan fungsi yang berguna seperti equals() dan copy(). Anda dapat menemukan informasi selengkapnya di dokumentasi class data.

Objek singleton

Kotlin memudahkan untuk mendeklarasikan class singleton yang selalu memiliki satu instance saja. Objek singleton ini dideklarasikan dengan kata kunci object. Compose sering menggunakan objek tersebut. Misalnya, MaterialTheme didefinisikan sebagai objek singleton; properti MaterialTheme.colors, shapes, dan typography semuanya berisi nilai untuk tema saat ini.

Builder jenis aman dan DSL

Kotlin memungkinkan pembuatan domain-specific language (DSL) dengan builder jenis aman. DSL memungkinkan pembuatan struktur data hierarki kompleks dengan cara yang lebih mudah dikelola dan lebih mudah dibaca.

Jetpack Compose menggunakan DSL untuk beberapa API, seperti LazyRow dan LazyColumn.

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn {
        // Add a single item as a header
        item {
            Text("Message List")
        }

        // Add list of messages
        items(messages) { message ->
            Message(message)
        }
    }
}
KotlinSnippets.kt

Kotlin menjamin builder jenis aman menggunakan literal fungsi dengan penerima. Jika menggunakan fungsi Canvas yang dapat dikomposisi sebagai contoh, fungsi dengan DrawScope sebagai penerima akan digunakan sebagai parameter, onDraw: DrawScope.() -> Unit, sehingga memungkinkan blok kode memanggil fungsi anggota yang ditentukan di DrawScope.

Canvas(Modifier.size(120.dp)) {
    // Draw grey background, drawRect function is provided by the receiver
    drawRect(color = Color.Gray)

    // Inset content by 10 pixels on the left/right sides
    // and 12 by the top/bottom
    inset(10.0f, 12.0f) {
        val quadrantSize = size / 2.0f

        // Draw a rectangle within the inset bounds
        drawRect(
            size = quadrantSize,
            color = Color.Red
        )

        rotate(45.0f) {
            drawRect(size = quadrantSize, color = Color.Blue)
        }
    }
}
KotlinSnippets.kt

Pelajari lebih lanjut builder jenis aman dan DSL di dokumentasi Kotlin.

Coroutine Kotlin

Coroutine menawarkan dukungan pemrograman asinkron pada tingkat bahasa di Kotlin. Coroutine dapat menangguhkan eksekusi tanpa memblokir thread. UI responsif pada dasarnya asinkron, dan Jetpack Compose memecahkan masalah ini dengan menggunakan coroutine pada API level, bukan menggunakan callback.

Jetpack Compose menawarkan API yang menjadikan penggunaan coroutine aman dalam lapisan UI. Fungsi rememberCoroutineScope menampilkan CoroutineScope yang dapat digunakan untuk membuat coroutine di pengendali peristiwa dan memanggil API penangguhan Compose. Lihat contoh di bawah menggunakan animateScrollTo API ScrollState.

// Create a CoroutineScope that follows this composable's lifecycle
val composableScope = rememberCoroutineScope()
Button(
    // ...
    onClick = {
        // Create a new coroutine that scrolls to the top of the list
        // and call the ViewModel to load data
        composableScope.launch {
            scrollState.animateScrollTo(0) // This is a suspend function
            viewModel.loadData()
        }
    }
) { /* ... */ }
KotlinSnippets.kt

Coroutine secara default mengeksekusi blok kode secara berurutan. Coroutine yang berjalan dan memanggil fungsi penangguhan menangguhkan eksekusinya hingga fungsi penangguhan ditampilkan. Hal ini benar meskipun fungsi penangguhan memindahkan eksekusi ke berbagai CoroutineDispatcher. Pada contoh sebelumnya, loadData tidak akan dieksekusi hingga fungsi penangguhan animateScrollTo ditampilkan.

Untuk mengeksekusi kode secara berurutan, coroutine baru harus dibuat. Pada contoh di atas, untuk memparalelkan scroll ke bagian atas layar dan memuat data dari viewModel, dua coroutine diperlukan.

// Create a CoroutineScope that follows this composable's lifecycle
val composableScope = rememberCoroutineScope()
Button( // ...
    onClick = {
        // Scroll to the top and load data in parallel by creating a new
        // coroutine per independent work to do
        composableScope.launch {
            scrollState.animateScrollTo(0)
        }
        composableScope.launch {
            viewModel.loadData()
        }
    }
) { /* ... */ }
KotlinSnippets.kt

Coroutine memudahkan penggabungan API asinkron. Pada contoh berikut, kita menggabungkan pengubah pointerInput dengan API animasi untuk menganimasikan posisi elemen saat pengguna mengetuk layar.

@Composable
fun MoveBoxWhereTapped() {
    // Creates an `Animatable` to animate Offset and `remember` it.
    val animatedOffset = remember {
        Animatable(Offset(0f, 0f), Offset.VectorConverter)
    }

    Box(
        // The pointerInput modifier takes a suspend block of code
        Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                // Create a new CoroutineScope to be able to create new
                // coroutines inside a suspend function
                coroutineScope {
                    while (true) {
                        // Wait for the user to tap on the screen
                        val offset = awaitPointerEventScope {
                            awaitFirstDown().position
                        }
                        // Launch a new coroutine to asynchronously animate to
                        // where the user tapped on the screen
                        launch {
                            // Animate to the pressed position
                            animatedOffset.animateTo(offset)
                        }
                    }
                }
            }
    ) {
        Text("Tap anywhere", Modifier.align(Alignment.Center))
        Box(
            Modifier
                .offset {
                    // Use the animated offset as the offset of this Box
                    IntOffset(
                        animatedOffset.value.x.roundToInt(),
                        animatedOffset.value.y.roundToInt()
                    )
                }
                .size(40.dp)
                .background(Color(0xff3c1361), CircleShape)
        )
    }
KotlinSnippets.kt

Untuk mempelajari Coroutine lebih lanjut, lihat panduan Coroutine Kotlin di Android.