Jetpack Compose: nədir, əsas anlayışlar və composable funksiyalar

Jetpack Compose nədir?

Jetpack Compose — Google tərəfindən Android istifadəçi interfeysləri qurmaq üçün deklarativ çərçivədir, 2019-cu ildə elan edilmiş və 2021-ci ildə stabil buraxılışa çatmışdır. Köhnə View System-dən (XML + Activity/Fragment) fərqli olaraq, Compose annotasiyalı Kotlin funksiyalarından — @Composable istifadə edir. İnterfeys tamamilə Kotlin-də təsvir olunur: XML və kod arasında bölgü yoxdur. Bu, XML və Kotlin-də id uyğunsuzluğu ilə bağlı səhv sinfini aradan qaldırdı (type-safe synthetic refaktorinq zamanı kömək etmirdi).

Compose öz renderinq sistemi — Canvas üzərində qurulmuşdur, View iyerarxiyasına bağlı deyil. Hər bir Composable onMeasure/onDraw View System-i keçərək birbaşa Canvas üzərində çəkir. Bu, mürəkkəb ekranlarda performans artımı verir: Google testlərində (2023) 200 elementli Compose ekranı RecyclerView + ViewHolder-dakı analoqdan 40% daha sürətli render olundu.

Minimal tələblər və uyğunluq

Compose işləməsi üçün minSdk 21 (Android 5.0) və Kotlin 1.9+ tələb olunur. Compose BOM (Bill of Materials) bütün Compose kitabxanalarının versiyalarını sinxronlaşdırır. Çərçivə View System-də mövcud kodla uyğundur: Compose XML-də ComposeView vasitəsilə, köhnə View isə AndroidView vasitəsilə Compose iyerarxiyasına daxil edilir. Google Play Console (2025) məlumatlarına görə, Android 5.0+ aktiv cihazların 97%-ni əhatə edir, buna görə də uyğunluq əksər layihələr üçün məhdudiyyət deyil.

Composable funksiyalar və kompozisiya

@Composable — adi Kotlin funksiyasını UI tikinti blokuna çevirən annotasiyadır. Composable funksiya interfeys fraqmentinin — mətn, düymə, siyahının necə görünməli olduğunu təsvir edir. Dəyər qaytarmaq əvəzinə, funksiya UI komponentlərini kompozisiyaya emit edir. Bu generatoru xatırladır: hər bir funksiya çağırıldıqda ekrana elementlər əlavə edir.

@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 funksiyası parametrləri (name, avatarUrl) qəbul edir və Card → Row → AsyncImage + Text emit edir. Kompozisiya — bir keçiddə emit edilmiş komponentlərin ağacıdır. Parametrlər dəyişməyibsə, Compose funksiya çağırışını atlayır (recomposition skip). Yalnız name dəyişibsə, yalnız Text çağırılacaq, qalan elementlər yenidən çəkilməyəcək. Belə intelligent recomposition — View System-in əl optimallaşdırması ilə müqayisədə Compose-un əsas performans üstünlüyüdür.

Slotlar və Content Lambda

Composable funksiyalar slotlardan — trailing lambda, content: @Composable (() -> Unit) fəal istifadə edir. Bu, konteynerlər yaratmağa imkan verir: Card, Column, Row content lambda qəbul edir və məzmun slot yerinə daxil edilir. Slot API android:layout_gravity tipli XML atributlarını əvəz etdi — indi alt elementlərin yerləşməsi content bloku daxilində Kotlin kodu ilə təyin olunur.

Compose-də vəziyyətin idarə edilməsi

Vəziyyət Compose-də — zamanla dəyişə bilən istənilən dəyərdir. Vəziyyət dəyişdikdə, Compose bu vəziyyəti oxuyan bütün komponentlər üçün recomposition planlaşdırır. Mexanizm React hooks-larını xatırladır: mutableStateOf MutableState qaytarır, .value oxunması cari kompozisiyanı dəyişikliklərə avtomatik abunə edir.

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

    Column(modifier = Modifier.padding(16.dp)) {
        Text("Basıldı: $count")
        Button(onClick = { count++ }) {
            Text("Artır")
        }
    }
}

@Composable
fun UserScreen(viewModel: UserViewModel) {
    val userName by viewModel.userName.collectAsState()
    Text("İstifadəçi: $userName")
}

remember dəyəri recompositions arasında saxlayır — əks halda mutableStateOf hər UI yeniləməsində yenidən yaradılardı. collectAsState() ViewModel-dən StateFlow-u Compose-uyğun vəziyyətə çevirir. Tövsiyə — ekran vəziyyəti üçün ViewModel ilə StateFlow, lokal vəziyyət üçün (məsələn, genişləndirilmiş kart) mutableStateOf istifadə edin. Bu bölgü prinsipi "ağıllı/axmaq" komponentlərə uyğundur.

State Hoisting

State Hoisting — vəziyyətin alt komponentdən ana komponentə çıxarılması nümunəsidir. Ana parametrlər vasitəsilə dəyər və callback ötürür, alt dəyişiklik zamanı callback-i çağırır. Ana mutableStateOf saxlayır, alt isə yalnız parametrləri saxlayır. Bu, komponenti təkrar istifadə edilə bilən və test edilə bilən edir: eyni TextField istənilən məlumat mənbəyi ilə istifadə oluna bilər.

Modifier — görünüşün konfiqurasiyası

Modifier — Composable-in transformasiyalarını təsvir edən obyektdir: ölçü, boşluqlar, fon, klik işlənməsi, animasiya, sürüşdürmə. Modifikatorlar çağırış zənciri vasitəsilə tətbiq olunur: Modifier.fillMaxWidth().padding(16.dp).background(Color.Blue).clickable { }. Hər çağırış əlavə edilmiş xüsusiyyətlə yeni Modifier qaytarır — orijinal obyekt mutasiya olunmur.

Modifikatorların sırası vacibdir. Modifier.padding(16.dp).background(Color.Blue) boşluq ilə sahəni rəngləyir. Modifier.background(Color.Blue).padding(16.dp) daxili düzbucaqlını rəngləyir, boşluq isə şəffaf qalır. Mexanika CSS box modelini xatırladır: padding → background margin + background kimi işləyir; background → padding — background + padding daxildə. Tərtibatçı yadda saxlamalıdır: padding əvvəl = xarici boşluq, padding sonra = daxili.

Xüsusi modifikatorlar

Daxili modifikatorlar kifayət etmirsə, Modifier.composed { ... } və ya Modifier.then() vasitəsilə xüsusi modifikator yaradılır. Xüsusi modifikator daxilində layout ölçmələri (Modifier.layout { measurable, constraints -> ... }), çəkmə (Modifier.drawWithContent { ... }), jestlər (Modifier.pointerInput { ... }) istifadə oluna bilər. Nümunə: basıldıqda pulsasiya edən animasiya üçün modifikator — ölçünü ölçür, klikdə animateFloatAsState vasitəsilə miqyas animasiyasını işə salır.

Animasiyalar üçün Compose animate*AsState (animateFloatAsState, animateColorAsState, animateDpAsState) təqdim edir — dəyərlər dəyişiklik zamanı köhnə və yeni vəziyyət arasında animasiya olunur. Görünmə/yox olma animasiyası lazımdırsa — AnimatedVisibility və AnimatedContent daxili keçidlərlə (fade, slide, expand). Bütün animasiyalar graphics layer-də işləyir, lazımsız kompozisiyaya səbəb olmur.

Side Effects: LaunchedEffect, DisposableEffect, remember

Composable funksiyalar yan təsirləri birbaşa yerinə yetirməməlidir (şəbəkə sorğuları, taymerlər, abunəliklər) — onlar hər recomposition-da çağırılır, bu da sorğuların təkrarlanmasına gətirib çıxarar. Yan təsirlər üçün Compose Effect funksiyaları ailəsini təqdim edir: LaunchedEffect kompozisiyaya daxil olanda korutin işə salır və çıxanda ləğv edir, DisposableEffect — aydın təmizləmə tələb edən resurslar üçün (sensorlar, 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("Dəyər: $sensorValue")
}

@Composable
fun UserGreeting(userId: String) {
    LaunchedEffect(userId) {
        val profile = api.fetchProfile(userId)
        // vəziyyət yeniləməsi
    }
}

LaunchedEffect(userId) userId dəyişdikdə yenidən başlayır — əvvəlki korutin ləğv edilir, yenisi yeni userId ilə işə düşür. Bu, sorğuların ləğvini əl ilə idarə etməyi aradan qaldırır. DisposableEffect(Unit) — sabit Unit açarı ilə effekt, kompozisiyaya daxil olanda işə düşür və çıxanda onDispose çağırır. SensorReader dinləyicini qeydiyyatdan keçirir və ekrandan çıxdıqda abunəni ləğv edir — sızma riski olmadan.

rememberCoroutineScope

Korutin kompozisiyaya daxil olanda deyil, hadisə ilə (düyməyə basma) işə salınmalıdırsa, rememberCoroutineScope() istifadə olunur. O, Composable-in həyat dövrünə bağlı CoroutineScope qaytarır, DisposableEffect tələb etmir. Nümunə: düyməyə basdıqda şəbəkə sorğusunu işə salmaq — scope.launch { viewModel.loadData() }.

Jetpack Compose vs View System: müqayisə

Compose və View System arasında seçim — 2026-cı ildə Android tərtibatçısının əsas memarlıq sualıdır. Hər iki texnologiya Google tərəfindən dəstəklənir, lakin Compose Google-un resurslarını xərclədiyi əsas istiqamətdir. View System yalnız kritik düzəlişlər alır və inkişaf etmir. Fərq sintaksis, vəziyyətin idarə edilməsi, performans və inkişaf müddətində özünü göstərir.

Yeni layihələr üçün Google UI inkişafı standartı olaraq Jetpack Compose-u tövsiyə edir. View System 2021-ci ildən əvvəl yazılmış kodu dəstəkləmək və minimal APK ölçüsü tələb olunan hallar üçün qalır (məsələn, başlanğıc səviyyəli cihazları olan inkişaf edən bazarlar üçün). Compose deklarativ sintaksis və daxili animasiyalar sayəsində UI kodunun həcmini View System ilə müqayisədə 30–50% azaldır.