Jetpack Compose: ano ito, mga pangunahing konsepto at composable function

Ano ang Jetpack Compose?

Jetpack Compose — ay isang deklaratibong framework mula sa Google para sa pagbuo ng mga Android user interface, inanunsyo noong 2019 at umabot sa stable release noong 2021. Hindi tulad ng lumang View System (XML + Activity/Fragment), gumagamit ang Compose ng naka-annotate na Kotlin function — @Composable. Ang interface ay inilalarawan nang buo sa Kotlin: walang paghihiwalay sa pagitan ng XML at code. Inalis nito ang klase ng mga error na may kaugnayan sa hindi pagtutugma ng id sa XML at Kotlin (hindi nakatulong ang type-safe synthetic sa refactoring).

Ang Compose ay binuo sa sarili nitong rendering system — Canvas, hindi nakatali sa View hierarchy. Ang bawat Composable ay direktang gumuguhit sa Canvas, na lumalampas sa onMeasure/onDraw ng View System. Nagbibigay ito ng pagtaas ng performance sa mga kumplikadong screen: sa mga pagsubok ng Google (2023) isang Compose screen na may 200 elemento ay nag-render ng 40% na mas mabilis kaysa sa analog sa RecyclerView + ViewHolder.

Minimum na kinakailangan at compatibility

Para gumana ang Compose, kinakailangan ang minSdk 21 (Android 5.0) at Kotlin 1.9+. Ang Compose BOM (Bill of Materials) ay nag-synchronize ng mga bersyon ng lahat ng Compose library. Ang framework ay katugma sa umiiral na code sa View System: ang Compose ay naka-embed sa pamamagitan ng ComposeView sa XML, at ang lumang View sa pamamagitan ng AndroidView sa Compose hierarchy. Ayon sa Google Play Console (2025), ang Android 5.0+ ay sumasaklaw sa 97% ng aktibong device, kaya ang compatibility ay hindi limitasyon para sa karamihan ng mga proyekto.

Composable function at komposisyon

@Composable — ay isang anotasyon na nagpapalit ng ordinaryong Kotlin function sa isang building block ng UI. Inilalarawan ng Composable function kung paano dapat magmukhang isang fragment ng interface — text, button, listahan. Sa halip na magbalik ng halaga, ang function ay naglalabas ng mga UI component sa komposisyon. Ito ay kahawig ng isang generator: bawat function ay nagdaragdag ng mga elemento sa screen kapag tinawag.

@Composable
fun ProfileCard(name: String, avatarUrl: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface
        )
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            AsyncImage(
                model = avatarUrl,
                contentDescription = "Avatar",
                modifier = Modifier.size(48.dp).clip(CircleShape)
            )
            Spacer(Modifier.width(12.dp))
            Text(
                text = name,
                style = MaterialTheme.typography.titleMedium
            )
        }
    }
}

Ang function na ProfileCard ay tumatanggap ng mga parameter (name, avatarUrl) at naglalabas ng Card → Row → AsyncImage + Text. Komposisyon — ay isang puno ng mga naipalabas na component sa isang daan. Kung hindi nagbago ang mga parameter, nilalaktawan ng Compose ang tawag sa function (recomposition skip). Kung name lang ang nagbago, tatawagin lang ang Text, ang iba pang elemento ay hindi na iguguhit muli. Ang ganitong intelligent recomposition — ay pangunahing bentahe ng performance ng Compose kumpara sa manual optimization ng View System.

Slot at Content Lambda

Aktibong gumagamit ang mga Composable function ng mga slot — trailing lambda, content: @Composable (() -> Unit). Pinapayagan nito ang paggawa ng mga container: Ang Card, Column, Row ay tumatanggap ng content lambda, at ang nilalaman ay naka-embed sa lugar ng slot. Pinalitan ng Slot API ang mga XML attribute tulad ng android:layout_gravity — ngayon ang posisyon ng mga child element ay tinutukoy ng Kotlin code sa loob ng content block.

Pamamahala ng estado sa Compose

Estado sa Compose — ay anumang halaga na maaaring magbago sa paglipas ng panahon. Kapag nagbago ang estado, nag-iskedyul ang Compose ng recomposition para sa lahat ng component na nagbabasa ng estadong ito. Ang mekanismo ay kahawig ng React hooks: ang mutableStateOf ay nagbabalik ng MutableState, ang pagbasa ng .value ay awtomatikong nag-a-subscribe sa kasalukuyang komposisyon sa mga pagbabago.

@Composable
fun CounterExample() {
    var count by remember { mutableStateOf(0) }

    Column(modifier = Modifier.padding(16.dp)) {
        Text("Pinindot: $count")
        Button(onClick = { count++ }) {
            Text("Palakihin")
        }
    }
}

@Composable
fun UserScreen(viewModel: UserViewModel) {
    val userName by viewModel.userName.collectAsState()
    Text("Gumagamit: $userName")
}

Ang remember ay nag-iimbak ng halaga sa pagitan ng mga rekomposisyon — kung hindi, ang mutableStateOf ay malilikha muli sa bawat pag-update ng UI. Ang collectAsState() ay nagko-convert ng StateFlow mula sa ViewModel patungo sa estado na katugma sa Compose. Rekomendasyon — para sa screen state gumamit ng ViewModel na may StateFlow, para sa lokal na estado (hal. pinalawak na card) — mutableStateOf. Ang paghihiwalay na ito ay tumutugma sa prinsipyo ng “matalino/tangang” component.

State Hoisting

State Hoisting — pattern ng paglipat ng estado mula sa child component patungo sa parent component. Ang parent ay nagpapasa ng halaga at callback sa pamamagitan ng mga parameter, tinatawag ng child ang callback sa pagbabago. Ang parent ay nag-iimbak ng mutableStateOf, ang child ay mga parameter lamang. Ginagawa nitong reusable at testable ang component: ang parehong TextField ay maaaring gamitin sa anumang source ng data.

Modifier — pagsasaayos ng hitsura

Modifier — ay isang bagay na naglalarawan ng mga pagbabago ng Composable: laki, spacing, background, pagproseso ng pag-click, animation, pag-scroll. Ang mga modifier ay inilalapat sa pamamagitan ng chain ng tawag: Modifier.fillMaxWidth().padding(16.dp).background(Color.Blue).clickable { }. Ang bawat tawag ay nagbabalik ng bagong Modifier na may idinagdag na property — walang mutation ng orihinal na bagay.

Mahalaga ang pagkakasunod-sunod ng mga modifier. Ang Modifier.padding(16.dp).background(Color.Blue) ay nagkukulay ng lugar na may spacing. Ang Modifier.background(Color.Blue).padding(16.dp) ay nagkukulay ng panloob na parihaba, habang ang spacing ay nananatiling transparent. Mekanika ay kahawig ng CSS box model: padding → background ay gumagana tulad ng margin + background; background → padding — tulad ng background + padding sa loob. Kailangan lang tandaan ng developer: padding una = panlabas na spacing, padding pagkatapos = panloob.

Custom modifier

Kung hindi sapat ang built-in modifier, ginagawa ang custom modifier sa pamamagitan ng Modifier.composed { ... } o Modifier.then(). Sa loob ng custom modifier, maaaring gamitin ang layout measurements (Modifier.layout { measurable, constraints -> ... }), pagguhit (Modifier.drawWithContent { ... }), gestures (Modifier.pointerInput { ... }). Halimbawa: modifier para sa pulsing animation kapag pinindot — sumusukat ng laki, sa pag-click ay nag-start ng scale animation sa pamamagitan ng animateFloatAsState.

Para sa mga animation, nagbibigay ang Compose ng animate*AsState (animateFloatAsState, animateColorAsState, animateDpAsState) — ang mga halaga ay nag-a-animate sa pagitan ng luma at bagong estado kapag nagbago. Kung kailangan ng animation ng paglitaw/paglaho — AnimatedVisibility at AnimatedContent na may built-in na transition (fade, slide, expand). Lahat ng animation ay gumagana sa graphics layer, hindi nagdudulot ng hindi kinakailangang komposisyon.

Side Effects: LaunchedEffect, DisposableEffect, remember

Ang mga Composable function ay hindi dapat magsagawa ng mga side action nang direkta (network request, timer, subscription) — tinatawag ang mga ito sa bawat rekomposisyon, na hahantong sa pagdoble ng mga request. Para sa mga side effect, nagbibigay ang Compose ng pamilya ng Effect function: LaunchedEffect ay nag-start ng coroutine sa pagpasok sa komposisyon at kinakansela ito sa paglabas, DisposableEffect — para sa mga resource na nangangailangan ng explicit cleanup (sensor, BroadcastReceiver).

@Composable
fun SensorReader() {
    val context = LocalContext.current
    var sensorValue by remember { mutableStateOf(0f) }

    DisposableEffect(Unit) {
        val sensor = registerSensorListener(context) { value ->
            sensorValue = value
        }
        onDispose {
            unregisterSensorListener(sensor)
        }
    }

    Text("Halaga: $sensorValue")
}

@Composable
fun UserGreeting(userId: String) {
    LaunchedEffect(userId) {
        val profile = api.fetchProfile(userId)
        // update ng estado
    }
}

LaunchedEffect(userId) ay nag-restart kung nagbago ang userId — ang nakaraang coroutine ay kinakansela, ang bago ay magsisimula sa bagong userId. Inaalis nito ang manual na pamamahala ng pagkansela ng request. DisposableEffect(Unit) — effect na may fixed key Unit, nagti-trigger sa pagpasok sa komposisyon at tumatawag ng onDispose sa paglabas. Nagrerehistro ang SensorReader ng listener at nag-a-unsubscribe kapag umalis sa screen — walang panganib ng memory leak.

rememberCoroutineScope

Kung ang coroutine ay kailangang i-start hindi sa pagpasok sa komposisyon, ngunit sa isang event (pagpindot ng button), ginagamit ang rememberCoroutineScope(). Nagbabalik ito ng CoroutineScope na nakatali sa lifecycle ng Composable, hindi nangangailangan ng DisposableEffect. Halimbawa: pag-start ng network request sa pag-click ng button — scope.launch { viewModel.loadData() }.

Jetpack Compose vs View System: paghahambing

Ang pagpili sa pagitan ng Compose at View System — ang pangunahing tanong sa arkitektura ng Android developer sa 2026. Ang parehong teknolohiya ay suportado ng Google, ngunit ang Compose ang pangunahing direksyon kung saan inilalaan ng Google ang mga resources nito. Ang View System ay tumatanggap lamang ng mga kritikal na pag-aayos at hindi na umuunlad. Ang pagkakaiba ay makikita sa syntax, pamamahala ng estado, performance, at oras ng pag-develop.

Para sa mga bagong proyekto, inirerekomenda ng Google ang Jetpack Compose bilang pamantayan ng pag-develop ng UI. Ang View System ay nananatili para sa suporta ng code na isinulat bago ang 2021 at mga kaso kung saan kinakailangan ang minimal na laki ng APK (hal. para sa mga umuusbong na merkado na may entry-level device). Compose ay nagbabawas ng volume ng UI code ng 30–50% kumpara sa View System salamat sa deklaratibong syntax at built-in na animation.