Jetpack Compose: nedir, temel kavramlar ve Composable işlevler

Jetpack Compose nedir?

Jetpack Compose, Google tarafından Android kullanıcı arayüzleri oluşturmak için 2019'da duyurulan ve 2021'de kararlı sürüme ulaşan bildirimsel bir çerçevedir. Eski View System'den (XML düzeni + Activity/Fragment) farklı olarak Compose, ek açıklamalı Kotlin işlevlerini — @Composable — kullanır. Arayüz tamamen Kotlin'de tanımlanır: XML ve kod arasında ayrım yoktur. Bu, XML ve Kotlin'de uyuşmayan ID'lerle ilgili hata sınıfını ortadan kaldırdı (type-safe synthetic yeniden düzenlemede yardımcı olmuyordu).

Compose, View hiyerarşisine bağlı olmayan kendi işleme sistemi Canvas üzerine inşa edilmiştir. Her Composable, View System'in onMeasure/onDraw'ını atlayarak doğrudan Canvas üzerine çizilir. Bu, karmaşık ekranlarda performans artışı sağlar: Google testlerinde (2023), 200 öğeli bir Compose ekranı, RecyclerView + ViewHolder üzerindeki benzer bir ekrandan %40 daha hızlı işlenmiştir.

Minimum Gereksinimler ve Uyumluluk

Compose, minSdk 21 (Android 5.0) ve Kotlin 1.9+ gerektirir. Compose BOM (Bill of Materials), tüm Compose kütüphanelerinin sürümlerini senkronize eder. Çerçeve, mevcut View System koduyla uyumludur: Compose, XML düzenlerinde ComposeView aracılığıyla, eski View'lar ise Compose hiyerarşisinde AndroidView aracılığıyla gömülür. Google Play Console'a (2025) göre, Android 5.0+ aktif cihazların %97'sini kapsar, bu nedenle uyumluluk çoğu proje için bir sınırlama değildir.

Composable işlevler ve kompozisyon

@Composable, sıradan bir Kotlin işlevini UI yapı taşına dönüştüren bir ek açıklamadır. Bir Composable işlevi, arayüzün bir parçasının nasıl görünmesi gerektiğini tanımlar — metin, düğme, liste. Bir değer döndürmek yerine, işlev kompozisyona UI bileşenleri yayar (emit). Bu bir üretece benzer: her işlev çağrıldığında ekrana öğeler ekler.

@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 işlevi parametreler (name, avatarUrl) alır ve Card → Row → AsyncImage + Text yayar. Kompozisyon, tek bir geçişte yayılan bileşenlerin ağacıdır. Parametreler değişmediyse, Compose işlev çağrısını atlar (recomposition skip). Yalnızca name değiştiyse, yalnızca Text çağrılır, diğer öğeler yeniden çizilmez. Bu akıllı yeniden kompozisyon, Compose'un manuel View System optimizasyonuna göre temel performans avantajıdır.

Slotlar ve Content Lambda

Composable işlevler, slotları (trailing lambda, content: @Composable (() -> Unit)) aktif olarak kullanır. Bu, kapsayıcılar oluşturmayı sağlar: Card, Column, Row bir content lambda kabul eder ve içerik slota gömülür. Slot API, android:layout_gravity gibi XML niteliklerinin yerini aldı — artık alt öğelerin konumlandırılması, içerik bloğu içindeki Kotlin koduyla ayarlanır.

Compose'da durum yönetimi

Compose'da Durum (State), zaman içinde değişebilen herhangi bir değerdir. Durum değiştiğinde, Compose bu durumu okuyan tüm bileşenler için yeniden kompozisyon planlar. Mekanizma React hook'larına benzer: mutableStateOf, MutableState<T> döndürür, .value okumak mevcut kompozisyonu otomatik olarak değişikliklere abone eder.

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

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

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

remember, yeniden kompozisyonlar arasında değeri korur — aksi takdirde mutableStateOf her UI güncellemesinde yeniden oluşturulur. collectAsState(), ViewModel'deki StateFlow'u Compose uyumlu duruma dönüştürür. Öneri — ekran düzeyindeki durum için ViewModel ile StateFlow'u, yerel durum (örneğin, genişletilmiş kart) için mutableStateOf'u kullanın. Bu ayrım, akıllı/aptal bileşen ilkesini izler.

State Hoisting (Durum Kaldırma)

State Hoisting, durumu alt bileşenden üst bileşene yükseltme modelidir. Üst, parametreler aracılığıyla değeri ve bir geri çağrıyı iletir, alt değişiklikte geri çağrıyı çağırır. Üst, mutableStateOf tutar, alt yalnızca parametreleri tutar. Bu, bileşeni yeniden kullanılabilir ve test edilebilir yapar: aynı TextField herhangi bir veri kaynağıyla kullanılabilir.

Modifier — görünüm özelleştirme

Modifier, Composable dönüşümlerini (boyut, dolgu, arka plan, tıklama işleme, animasyon, kaydırma) tanımlayan bir nesnedir. Değiştiriciler, bir çağrı zinciri aracılığıyla uygulanır: Modifier.fillMaxWidth().padding(16.dp).background(Color.Blue).clickable { }. Her çağrı, eklenen özellikle birlikte yeni bir Modifier döndürür — orijinal nesnede değişiklik olmaz.

Değiştiricilerin sırası önemlidir. Modifier.padding(16.dp).background(Color.Blue) dolgulu alanı renklendirir. Modifier.background(Color.Blue).padding(16.dp) iç dikdörtgeni renklendirir ve dolgu şeffaf kalır. Mekanik, CSS kutu modeline benzer: önce padding → background, margin + background gibi çalışır; önce background → padding, background + iç dolgu gibi çalışır. Geliştiricinin yalnızca şunu hatırlaması yeterlidir: önce padding = dış kenar boşluğu, sonra padding = iç dolgu.

Özel Değiştiriciler

Yerleşik değiştiriciler yeterli değilse, Modifier.composed { ... } veya Modifier.then() aracılığıyla özel bir değiştirici oluşturulur. Özel bir değiştiricinin içinde, düzen ölçümleri (Modifier.layout { measurable, constraints -> ... }), çizim (Modifier.drawWithContent { ... }), hareketler (Modifier.pointerInput { ... }) kullanılabilir. Örnek: tıklamada nabız animasyonu için değiştirici — boyutu ölçer, tıklamada animateFloatAsState aracılığıyla ölçek animasyonu başlatır.

Animasyonlar için Compose, animate*AsState (animateFloatAsState, animateColorAsState, animateDpAsState) sağlar — değerler değişiklikte eski ve yeni durum arasında canlandırılır. Giriş/çıkış animasyonları için — AnimatedVisibility ve AnimatedContent yerleşik geçişlerle (fade, slide, expand) birlikte. Tüm animasyonlar grafik katmanında çalışır ve gereksiz kompozisyonu tetiklemez.

Side Effects: LaunchedEffect, DisposableEffect, remember

Composable işlevler doğrudan yan etkiler (ağ istekleri, zamanlayıcılar, abonelikler) gerçekleştirmemelidir — her yeniden kompozisyonda çağrılırlar ve bu da yinelenen isteklere yol açar. Yan etkiler için Compose, bir Effect işlev ailesi sağlar: LaunchedEffect kompozisyona girişte bir kotlin başlatır ve çıkışta iptal eder, DisposableEffect — açık temizlik gerektiren kaynaklar (sensörler, BroadcastReceiver) için.

@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("Değer: $sensorValue")
}

@Composable
fun UserGreeting(userId: String) {
    LaunchedEffect(userId) {
        val profile = api.fetchProfile(userId)
        // durum güncelleme
    }
}

LaunchedEffect(userId), userId değişirse yeniden başlatılır — önceki kotlin iptal edilir ve yeni userId ile yenisi başlatılır. Bu, manuel istek iptal yönetimini ortadan kaldırır. DisposableEffect(Unit) — sabit anahtar Unit'e sahip bir etki, kompozisyona girişte tetiklenir ve çıkışta onDispose'u çağırır. SensorReader bir dinleyici kaydeder ve ekrandan ayrılırken aboneliği iptal eder — sızıntı riski olmadan.

rememberCoroutineScope

Bir kotlinin kompozisyona girişte değil, bir olayda (düğme tıklaması) başlatılması gerekiyorsa, rememberCoroutineScope() kullanılır. Composable yaşam döngüsüne bağlı bir CoroutineScope döndürür ve DisposableEffect gerektirmez. Örnek: düğme tıklamasında ağ isteği başlatma — scope.launch { viewModel.loadData() }.

Jetpack Compose vs View System: karşılaştırma

Compose ve View System arasında seçim yapmak, 2026'da Android geliştiricileri için ana mimari sorudur. Her iki teknoloji de Google tarafından desteklenmektedir, ancak Compose, Google'ın kaynak harcadığı ana yöndür. View System yalnızca kritik düzeltmeler alır ve gelişmemektedir. Fark, sözdizimi, durum yönetimi, performans ve geliştirme süresinde kendini gösterir.

Yeni projeler için Google, Jetpack Compose'u UI geliştirme standardı olarak önermektedir. View System, 2021'den önce yazılmış kodun bakımı ve APK boyutunun kritik olduğu durumlar (örneğin, giriş seviyesi cihazlara sahip gelişmekte olan pazarlar) için kalmıştır. Compose, bildirimsel sözdizimi ve yerleşik animasyonları sayesinde View System'e kıyasla UI kodu hacmini %30–50 oranında azaltır.