Jetpack Compose: bu nima, asosiy tushunchalar va composable funksiyalar

Jetpack Compose nima?

Jetpack Compose — Google tomonidan Android foydalanuvchi interfeyslarini yaratish uchun deklarativ freymvork, 2019-yilda e'lon qilingan va 2021-yilda barqaror relizga erishgan. Eski View System (XML + Activity/Fragment) dan farqli o'laroq, Compose annotatsiyalangan Kotlin funksiyalaridan — @Composable foydalanadi. Interfeys to'liq Kotlin-da tasvirlanadi: XML va kod o'rtasida bo'linish yo'q. Bu XML va Kotlin-dagi id mos kelmasligi bilan bog'liq xatolar sinfini bartaraf etdi (type-safe synthetic refaktoringda yordam bermasdi).

Compose o'zining renderlash tizimi — Canvas da qurilgan, View iyerarxiyasiga bog'liq emas. Har bir Composable to'g'ridan-to'g'ri Canvas-ga chizadi, onMeasure/onDraw View System-ni chetlab o'tadi. Bu murakkab ekranlarda samaradorlikni oshiradi: Google testlarida (2023) 200 elementli Compose ekrani RecyclerView + ViewHolder dagi analogidan 40% tezroq renderlandi.

Minimal talablar va moslik

Compose ishlashi uchun minSdk 21 (Android 5.0) va Kotlin 1.9+ talab qilinadi. Compose BOM (Bill of Materials) barcha Compose kutubxonalarining versiyalarini sinxronlashtiradi. Freymvork View System-dagi mavjud kod bilan mos keladi: Compose XML-da ComposeView orqali, eski View esa AndroidView orqali Compose iyerarxiyasiga o'rnatiladi. Google Play Console (2025) ma'lumotlariga ko'ra, Android 5.0+ faol qurilmalarning 97% ini qamrab oladi, shuning uchun moslik ko'pchilik loyihalar uchun cheklov emas.

Composable funksiyalar va kompozitsiya

@Composable — oddiy Kotlin funksiyasini UI qurilish blokiga aylantiruvchi annotatsiya. Composable funksiya interfeys fragmenti — matn, tugma, ro'yxat qanday ko'rinishini tasvirlaydi. Qiymat qaytarish o'rniga, funksiya UI komponentlarini kompozitsiyaga emit qiladi. Bu generatorni eslatadi: har bir funksiya chaqirilganda ekranga elementlar qo'shadi.

@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
            )
        }
    }
}

ProfileCard funksiyasi parametrlarni (name, avatarUrl) qabul qiladi va Card → Row → AsyncImage + Text emit qiladi. Kompozitsiya — bir o'tishda emit qilingan komponentlar daraxti. Agar parametrlar o'zgarmagan bo'lsa, Compose funksiya chaqiruvini o'tkazib yuboradi (recomposition skip). Agar faqat name o'zgargan bo'lsa, faqat Text chaqiriladi, qolgan elementlar qayta chizilmaydi. Bunday intelligent recomposition — View System-ni qo'lda optimallashtirish bilan solishtirganda Compose-ning asosiy samaradorlik ustunligidir.

Slotlar va Content Lambda

Composable funksiyalar slotlardan — trailing lambda, content: @Composable (() -> Unit) faol foydalanadi. Bu konteynerlarni yaratishga imkon beradi: Card, Column, Row content lambda qabul qiladi va mazmun slot o'rniga o'rnatiladi. Slot API android:layout_gravity tipidagi XML atributlarini almashtirdi — endi bolak elementlarning joylashuvi content bloki ichidagi Kotlin kodi bilan belgilanadi.

Compose-da holatni boshqarish

Holat Compose-da — vaqt o'tishi bilan o'zgarishi mumkin bo'lgan har qanday qiymat. Holat o'zgarganda, Compose ushbu holatni o'qiyotgan barcha komponentlar uchun recomposition rejalashtiradi. Mexanizm React hooks-ni eslatadi: mutableStateOf MutableState qaytaradi, .value ni o'qish joriy kompozitsiyani o'zgarishlarga avtomatik obuna qiladi.

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

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

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

remember qiymatni recompositions o'rtasida saqlaydi — aks holda mutableStateOf har bir UI yangilanishida qayta yaratilardi. collectAsState() ViewModel dan StateFlow ni Compose-ga mos holatga o'zgartiradi. Tavsiya — ekran holati uchun ViewModel ni StateFlow bilan, lokal holat uchun (masalan, kengaytirilgan karta) — mutableStateOf dan foydalaning. Bu bo'linish "aqlli/ahmoq" komponentlar prinsipiga mos keladi.

State Hoisting

State Hoisting — holatni bola komponentdan ota komponentga chiqarish naqshidir. Ota parametrlar orqali qiymat va callback uzatadi, bola o'zgarish vaqtida callback ni chaqiradi. Ota mutableStateOf saqlaydi, bola esa faqat parametrlarni saqlaydi. Bu komponentni qayta ishlatiladigan va sinab ko'riladigan qiladi: xuddi shu TextField har qanday ma'lumot manbai bilan ishlatilishi mumkin.

Modifier — tashqi ko'rinishni sozlash

Modifier — Composable ning o'zgarishlarini tavsiflovchi obyekt: o'lcham, bo'shliqlar, fon, bosishni qayta ishlash, animatsiya, siljitish. Modifikatorlar chaqiruv zanjiri orqali qo'llaniladi: Modifier.fillMaxWidth().padding(16.dp).background(Color.Blue).clickable { }. Har bir chaqiruv qo'shilgan xususiyat bilan yangi Modifier qaytaradi — asl obyekt mutatsiya qilinmaydi.

Modifikatorlar tartibi muhim. Modifier.padding(16.dp).background(Color.Blue) bo'shliq bilan maydonni bo'yaydi. Modifier.background(Color.Blue).padding(16.dp) ichki to'rtburchakni bo'yaydi, bo'shliq esa shaffof qoladi. Mexanika CSS box model ni eslatadi: padding → background margin + background kabi ishlaydi; background → padding — background + padding ichida. Dasturchi eslab qolishi kerak: padding avval = tashqi bo'shliq, padding keyin = ichki.

Maxsus modifikatorlar

Agar o'rnatilgan modifikatorlar yetarli bo'lmasa, Modifier.composed { ... } yoki Modifier.then() orqali maxsus modifikator yaratiladi. Maxsus modifikator ichida layout o'lchovlari (Modifier.layout { measurable, constraints -> ... }), chizish (Modifier.drawWithContent { ... }), imo-ishoralar (Modifier.pointerInput { ... }) ishlatilishi mumkin. Misol: bosilganda pulsatsiyalanuvchi animatsiya uchun modifikator — o'lchamni o'lchaydi, bosganda animateFloatAsState orqali masshtab animatsiyasini ishga tushiradi.

Animatsiyalar uchun Compose animate*AsState (animateFloatAsState, animateColorAsState, animateDpAsState) ni taqdim etadi — qiymatlar o'zgarish vaqtida eski va yangi holat o'rtasida animatsiya qilinadi. Agar paydo bo'lish/yo'qolish animatsiyasi kerak bo'lsa — AnimatedVisibility va AnimatedContent o'rnatilgan o'tishlar bilan (fade, slide, expand). Barcha animatsiyalar graphics layer da ishlaydi, ortiqcha kompozitsiyaga sabab bo'lmaydi.

Side Effects: LaunchedEffect, DisposableEffect, remember

Composable funksiyalar yon ta'sirlarni to'g'ridan-to'g'ri bajarmasligi kerak (tarmoq so'rovlari, taymerlar, obunalar) — ular har bir recomposition da chaqiriladi, bu so'rovlarning takrorlanishiga olib keladi. Yon ta'sirlar uchun Compose Effect funksiyalari oilasini taqdim etadi: LaunchedEffect kompozitsiyaga kirganda korutin ishga tushiradi va chiqqanda bekor qiladi, DisposableEffect — aniq tozalashni talab qiladigan resurslar uchun (datchiklar, 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("Qiymat: $sensorValue")
}

@Composable
fun UserGreeting(userId: String) {
    LaunchedEffect(userId) {
        val profile = api.fetchProfile(userId)
        // holat yangilanishi
    }
}

LaunchedEffect(userId) agar userId o'zgargan bo'lsa, qayta ishga tushadi — oldingi korutin bekor qilinadi, yangisi yangi userId bilan ishga tushadi. Bu so'rovlarni bekor qilishni qo'lda boshqarishni bartaraf etadi. DisposableEffect(Unit) — barqaror Unit kaliti bilan effekt, kompozitsiyaga kirganda ishga tushadi va chiqqanda onDispose ni chaqiradi. SensorReader tinglovchini ro'yxatdan o'tkazadi va ekrandan chiqqanda obunani bekor qiladi — xotira oqishisiz.

rememberCoroutineScope

Agar korutin kompozitsiyaga kirganda emas, balki hodisa bilan (tugmani bosish) ishga tushirilishi kerak bo'lsa, rememberCoroutineScope() ishlatiladi. U Composable ning hayotiy sikliga bog'langan CoroutineScope qaytaradi, DisposableEffect talab qilmaydi. Misol: tugmani bosganda tarmoq so'rovini ishga tushirish — scope.launch { viewModel.loadData() }.

Jetpack Compose vs View System: taqqoslash

Compose va View System o'rtasidagi tanlov — 2026 yilda Android dasturchisining asosiy arxitektura savolidir. Ikkala texnologiya ham Google tomonidan qo'llab-quvvatlanadi, ammo Compose Google resurslarini sarflaydigan asosiy yo'nalishdir. View System faqat kritik tuzatishlarni oladi va rivojlanmaydi. Farq sintaksis, holatni boshqarish, samaradorlik va ishlab chiqish vaqtida namoyon bo'ladi.

Yangi loyihalar uchun Google Jetpack Compose ni UI ishlab chiqish standardi sifatida tavsiya qiladi. View System 2021 yilgacha yozilgan kodni qo'llab-quvvatlash va minimal APK hajmi talab qilinadigan holatlar uchun qoladi (masalan, boshlang'ich darajadagi qurilmalari bo'lgan rivojlanayotgan bozorlar uchun). Compose deklarativ sintaksis va o'rnatilgan animatsiyalar tufayli UI kod hajmini View System bilan solishtirganda 30–50% ga kamaytiradi.