Memahami Jetpack Compose dengan konsep Composable & Recomposition

Jetpack Compose, Recomposition, dan Composable dalam Pengembangan Aplikasi Android

Nama    : Iftala Zahri Sukmana

NRP       : 5025221002

Kelas     : G

Dalam era pengembangan aplikasi Android modern, Jetpack Compose telah menjadi paradigma baru yang merevolusi cara kita membangun antarmuka pengguna. Artikel ini akan menjelaskan konsep dasar Jetpack Compose, recomposition, dan composable function melalui analisis kode sampel yang disediakan.

Apa itu Jetpack Compose?

Jetpack Compose adalah toolkit UI modern untuk Android yang diperkenalkan oleh Google. Berbeda dengan pendekatan tradisional yang menggunakan XML untuk mendefinisikan layout, Compose menggunakan paradigma deklaratif dengan Kotlin untuk membuat UI. Hal ini memungkinkan pengembang untuk mendeskripsikan tampilan UI dengan cara yang lebih intuitif dan lebih sedikit boilerplate code.

Keunggulan utama Jetpack Compose meliputi:

• Kode yang lebih sederhana: Mengurangi jumlah kode yang diperlukan untuk membangun UI
• Pemrograman deklaratif: Anda menjelaskan seperti apa UI seharusnya, bukan bagaimana membuatnya
• Interoperabilitas: Dapat digunakan bersama dengan UI tradisional berbasis View
• Preview langsung: Melihat UI tanpa perlu menjalankan aplikasi di emulator atau perangkat

Memahami Composable Function

Composable function adalah blok bangunan dasar dalam Jetpack Compose. Ini adalah fungsi Kotlin yang diberi anotasi @Composable dan menggambarkan bagian dari UI.

Mari kita lihat contoh fungsi composable dari kode yang diberikan:

@Composable
fun GreetingCard(name: String) {
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth(),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "Hello, $name!",
                style = MaterialTheme.typography.titleLarge,
                textAlign = TextAlign.Left,
                modifier = Modifier.fillMaxWidth()
            )
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                text = "Welcome to Jetpack Compose",
                style = MaterialTheme.typography.bodyMedium,
                textAlign = TextAlign.Left,
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}

Dalam fungsi GreetingCard di atas:

1. Anotasi @Composable menandakan bahwa fungsi ini adalah composable function yang dapat digunakan dalam UI Compose.
2. Fungsi ini menerima parameter name yang digunakan untuk personalisasi tampilan.
3. Composable Card digunakan sebagai container dengan bayangan (elevation).
4. Di dalam Card, terdapat Column yang menyusun elemen secara vertikal.
5. Dua elemen Text digunakan untuk menampilkan pesan sambutan.
6. Spacer digunakan untuk memberikan jarak antara kedua Text.

Setiap composable function dapat berisi composable function lainnya, membentuk hierarki UI. Hal ini memungkinkan komposisi dan penggunaan kembali elemen UI dengan mudah.

Recomposition: Jantung dari Reactive UI

Recomposition adalah proses di mana Jetpack Compose memperbarui UI ketika data yang digunakan dalam composable function berubah. Ini adalah konsep kunci yang membuat UI Compose menjadi reaktif.

Ketika state berubah, Compose secara cerdas hanya me-recompose bagian UI yang terpengaruh oleh perubahan tersebut, bukan seluruh UI. Ini membuat pembaruan UI menjadi efisien.

Meskipun pada kode sampel tidak ada contoh state yang berubah, kita bisa memodifikasinya untuk mendemonstrasikan recomposition:

@Composable
fun CounterDemo() {
    var count by remember { mutableStateOf(0) }
    
    Column(
        modifier = Modifier.padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Count: $count",
            style = MaterialTheme.typography.headlineMedium
        )
        
        Spacer(modifier = Modifier.height(16.dp))
        
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

Dalam contoh di atas:

1. Kita mendefinisikan state count menggunakan mutableStateOf dan remember.
2. Ketika tombol diklik, nilai count bertambah.
3. Perubahan pada count memicu recomposition pada Text yang menampilkan nilainya.

Recomposition memastikan UI selalu mencerminkan state aplikasi terkini tanpa perlu memperbarui seluruh tampilan.

Analisis Struktur Proyek yang Diberikan

Mari kita analisis struktur proyek dari kode yang diberikan:

MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PPBBasicTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MainScreen()
                }
            }
        }
    }
}

• MainActivity adalah titik masuk utama aplikasi.
• Fungsi setContent mengatur UI menggunakan Compose.
• PPBBasicTheme adalah tema kustom yang membungkus konten.
• Surface memberikan area dengan warna latar belakang konsisten.
• MainScreen adalah composable yang berisi konten utama aplikasi.

MainScreen Composable

@Composable
fun MainScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        GreetingCard(name = "Compose")
    }
}

• MainScreen mengatur tata letak utama menggunakan Column.
• GreetingCard ditempatkan di tengah layar.
• Modifier digunakan untuk styling dan positioning.

Theme Configuration

@Composable
fun PPBBasicTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColors
    } else {
        LightColors
    }
    MaterialTheme(
        colorScheme = colors,
        content = content
    )
}

• PPBBasicTheme menentukan tema berdasarkan preferensi mode gelap/terang pengguna.
• Ini menggunakan skema warna yang telah ditentukan sebelumnya untuk mode terang dan gelap.
• Parameter content adalah fungsi composable yang akan dibungkus dengan tema ini.

Modifier: Pengatur Gaya dan Layout

Pada contoh kode, kita melihat penggunaan Modifier yang ekstensif. Modifier adalah komponen penting dalam Jetpack Compose yang digunakan untuk mengubah dan mengatur appearance dan behavior composable.

Beberapa contoh penggunaan Modifier dalam kode:

modifier = Modifier
    .fillMaxSize()
    .padding(16.dp)

Ini mengatur composable untuk mengisi seluruh ruang yang tersedia dan memberikan padding 16dp di semua sisi.

modifier = Modifier
    .padding(8.dp)
    .fillMaxWidth()

Ini memberikan padding 8dp dan mengatur lebar composable untuk mengisi seluruh lebar yang tersedia.

Modifier dapat dirangkai secara fluent untuk menerapkan beberapa transformasi sekaligus.

Preview dalam Jetpack Compose

Salah satu fitur bermanfaat dalam Jetpack Compose adalah kemampuan preview:

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    PPBBasicTheme {
        MainScreen()
    }
}

Anotasi @Preview memungkinkan pengembang untuk melihat tampilan UI langsung di Android Studio tanpa perlu menjalankan aplikasi. Ini mempercepat siklus pengembangan dan memudahkan perancangan UI.

Berikut adalah source code untuk mendemonstrasikan Jetpack Compose

package com.example.ppb_basic

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.ppb_basic.ui.theme.PPBBasicTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PPBBasicTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MainScreen()
                }
            }
        }
    }
}

@Composable
fun MainScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        GreetingCard(name = "Iftala")
    }
}

@Composable
fun GreetingCard(name: String) {
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth(),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "Hello, $name!",
                style = MaterialTheme.typography.titleLarge,
                textAlign = TextAlign.Left,
                modifier = Modifier.fillMaxWidth()
            )

            Spacer(modifier = Modifier.height(8.dp))

            Text(
                text = "Ini adalah contoh basic Jetpack Compose pada kelas PPB G",
                style = MaterialTheme.typography.bodyMedium,
                textAlign = TextAlign.Left,
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    PPBBasicTheme {
        MainScreen()
    }
}

package com.example.ppb_basic.ui.theme

import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color

private val LightColors = lightColorScheme(
    primary = Color(0xFF6200EE),
    onPrimary = Color.White,
    secondary = Color(0xFF03DAC5),
    onSecondary = Color.Black,
    background = Color.White,
    onBackground = Color.Black,
    surface = Color.White,
    onSurface = Color.Black
)

private val DarkColors = darkColorScheme(
    primary = Color(0xFFBB86FC),
    onPrimary = Color.Black,
    secondary = Color(0xFF03DAC5),
    onSecondary = Color.Black,
    background = Color(0xFF121212),
    onBackground = Color.White,
    surface = Color(0xFF121212),
    onSurface = Color.White
)

@Composable
fun PPBBasicTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColors
    } else {
        LightColors
    }

    MaterialTheme(
        colorScheme = colors,
        content = content
    )
}

Kesimpulan

Jetpack Compose menawarkan pendekatan modern dan efisien untuk pengembangan UI Android. Dengan composable function sebagai unit dasar, recomposition untuk UI reaktif, dan fitur-fitur seperti Modifier dan Preview, Compose memungkinkan pengembang untuk membuat UI yang kompleks dengan kode yang lebih sederhana dan mudah dipelihara.