Jetpack Compose: temeller, Composable fonksiyonlar ve State

Jetpack Compose Nedir?

Jetpack Compose, tepkisel programlama ilkeleri üzerine inşa edilmiş bir Google UI framework'üdür. XML düzeni, FragmentManager ve ViewBinding içeren Activity yerine, geliştirici @Composable ek açıklamalı Kotlin fonksiyonları aracılığıyla arayüzü tanımlar. Compose, LayoutInflater kullanmaz — UI, bayt koduna derlenen saf Kotlin fonksiyonlarıdır. Framework birkaç kütüphaneden oluşur: Compose UI (temel bileşenler Text, Button, Column, Row), Compose Foundation (Material Design, Gestures, Focus), Compose Material3 (Dynamic Colors ile Material You) ve Compose Runtime (State, Side Effects, Coroutines). Compose, Android API 21+ (Android 5.0) üzerinde çalışır ve ComposeView (bir AndroidView adaptörü) aracılığıyla mevcut View/XML koduyla tamamen uyumludur.

Compose vs View System

View System (2008), manuel yönetimle View nesneleri hiyerarşisi kullanır: geliştirici XML düzeni oluşturur, findViewById ile Views bulur, RecyclerView için Adapter uygular ve veri değiştiğinde notifyDataSetChanged çağırır. Compose, UI'yı işlevsel olarak tanımlar: durum değiştiğinde, framework yalnızca değiştirilen Composable fonksiyonları yeniden oluşturur, diff'i hesaplar ve Canvas'a minimum değişiklik uygular. Compose performansı View System ile karşılaştırılabilir ve karmaşık listeler (LazyColumn) içeren senaryolarda, key parametresi aracılığıyla gereksiz öğeleri atlayarak RecyclerView'ı genellikle geride bırakır. IT Sectr'de Compose, minSdk 24+ olan Android uygulamalarının yeni modüllerinde kullanılır.

Composable Fonksiyonlar: UI'nın Yapı Taşları

@Composable — sıradan bir Kotlin fonksiyonunu UI yapı taşına dönüştüren ek açıklama. Composable fonksiyonlar diğer Composable fonksiyonları çağırarak bir bileşen ağacı oluşturabilir. View'ın aksine, Composable fonksiyonlar varsayılan olarak duruma sahip değildir — durumsuzdur (stateless) ve giriş parametreleri veya State'teki her değişiklikte yeniden çizilir. Compose Compiler, @Composable fonksiyonları kesintiye uğratılabilir ve devam ettirilebilir koda (positional memoization) dönüştürür — bu, Compose'un ağacı tamamen yeniden oluşturmadan yalnızca değiştirilen kısımları yeniden başlatmasına olanak tanır.

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.unit.dp

@Composable
fun UserProfile(name: String, avatarUrl: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        AsyncImage(
            model = avatarUrl,
            contentDescription = "User avatar",
            modifier = Modifier.size(48.dp)
        )
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = name,
            style = MaterialTheme.typography.titleMedium
        )
    }
}

UserProfile fonksiyonu, name ve avatarUrl'ü parametre olarak alır, bir avatar ve ad içeren bir satır oluşturur. Modifier.fillMaxWidth() bileşeni tam genişliğe uzatır, .padding(16.dp) dolgu ekler. MaterialTheme.typography.titleMedium, sistem Material 3 stilini kullanır. name veya avatarUrl parametreleri değiştiğinde, Compose UserProfile'ı yeniden oluşturur — bileşeni yeni değerlerle yeniden oluşturur.

Jetpack Compose'da State ve Recomposition

State Compose'da, değişikliği bağımlı @Composable fonksiyonların yeniden oluşturulmasını (yeniden başlatılmasını) tetikleyen herhangi bir değerdir. Temel yaklaşım, Compose'un snapshot sistemini destekleyen bir MutableState<T> oluşturan mutableStateOf() işlevidir. Snapshot, değişiklik izleme mekanizmasıdır: State'e yazıldığında, Compose geçerli Snapshot'ı kirli (dirty) olarak işaretler ve yeniden oluşturma zamanlayıcısı yalnızca bu State'i okuyan Composable fonksiyonları yeniden başlatır. Gözlemlenebilir koleksiyonlar için mutableStateListOf() ve mutableStateMapOf() kullanın. Compose, Kotlin Flow için collectAsState() ve LiveData için observeAsState() aracılığıyla Lifecycle-Aware bileşenlerden State'i destekler.

@Composable
fun LikeButton() {
    var liked by remember { mutableStateOf(false) }
    var count by remember { mutableStateOf(42) }
    
    Button(
        onClick = {
            liked = !liked
            if (liked) count++ else count--
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = if (liked) MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Text("♥ $count")
    }
}

Kod, mutableStateOf() aracılığıyla depolanan liked (Boolean) ve count (Int) durumuna sahip bir "Like" düğmesi oluşturur. Basıldığında, liked tersine çevrilir ve sayaç artar/azalır — Compose, LikeButton'ı otomatik olarak yeniden oluşturur. by delegesi, State'i normal bir değişken gibi kullanmaya izin verir: liked.value = !liked.value yerine liked = !liked. Düğme rengi, primary (beğenildi) ve surfaceVariant (beğenilmedi) arasında tepkisel olarak değişir.

remember: Yeniden Oluşturmalar Arasında Önbellekleme

remember — yeniden oluşturmalar arasında bir değeri önbelleğe alan Compose fonksiyonu. remember olmadan, bir Composable fonksiyonun her yeniden başlatılışı yeni bir durum (mutableStateOf) oluşturur — bu, uygulama mantığını bozar: ekran döndürme veya üst State değişikliğinde sayaç sıfırlanır. remember bir hesaplama lambda'sı alır ve değeri yalnızca ilk oluşturmada hesaplar; sonraki oluşturmalarda önbelleğe alınmış sonucu döndürür. Önbelleği sıfırlamak için remember(key) kullanın — anahtar, değerin ne zaman yeniden hesaplanacağını belirler. remember(key1, key2) herhangi bir anahtar değiştiğinde yeniden hesaplar. Uzun ömürlü durumlar (ekran döndürmeye dayanan) için rememberSaveable kullanın — SavedStateHandle aracılığıyla Bundle'a kaydeden remember benzeri bir işlev.

@Composable
fun TimerScreen() {
    var seconds by rememberSaveable { mutableStateOf(0) }
    
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            seconds++
        }
    }
    
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Elapsed: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable, ekran döndürmede (yapılandırma değişikliği) seconds değerini korur. LaunchedEffect, her saniye seconds değerini artıran bir coroutine başlatır. TimerScreen'in yeniden oluşturulmasında (her saniye) rememberSaveable sayesinde seconds sıfırlanmaz. Yapılandırma değişikliklerine dayanmaması gereken durumlar için (örneğin, animasyon bayrakları) normal remember kullanın.

Modifier: Composable Ayar Zinciri

Modifier — Composable bileşenlerin görünümünü, davranışını ve düzenini yapılandırmak için Builder desenini uygulayan değişmez bir kapsayıcı nesnedir. Her Modifier yöntemi çağrısı (.padding(), .width(), .clickable(), .background()) eklenen öğeyle birlikte yeni bir Modifier döndürür. Değiştirici sırası önemlidir: .padding(16.dp).clickable { } — dolgu, tıklama işleyicisinden önce uygulanır, clickable dolgu dahil tüm alanı izler. .clickable { }.padding(16.dp) — dolgudan önceki tüm alan tıklanabilirdir, dolgu içeriği içe doğru kaydırır. Modifier, then(otherModifier) aracılığıyla özel uygulamaları ve üst ayarlara erişmek için compositionLocal'i destekler.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Card clicked") },
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Jetpack Compose", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                "State ve Modifier ile Android için Bildirimsel UI",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample, Modifier zincirini gösterir: fillMaxWidth + padding + clickable. Card, kendi elevation ve colors ayarlarına sahip bir Material3 bileşenidir. İç içe Column'un iç dolgusu 16dp'dir. Compose Material3, Android 12+ üzerinde Dynamic Color (Material You) için renkleri otomatik olarak uyarlar. Card, Compose'daki 30+ yerleşik Material3 bileşeninden biridir.

State hoisting ve Compose Mimarisi

State hoisting — durumu bir Composable fonksiyondan onu çağırana yükselterek fonksiyonu durumsuz (stateless) hale getiren bir desendir. Durumsuz bir bileşen, State'e kendisi sahip olmadan parametreler aracılığıyla veri ve geri çağrılar alır. Bu, yeniden kullanılabilirliği ve test edilebilirliği artırır: bileşen farklı State'lerle çağrılabilir ve ön izlemede test edilebilir. Google, mimariyi önerir: ViewModel + StateFlow (veya MutableStateFlow) + Compose'da collectAsState(). ViewModel durumu ekran düzeyine yükseltir, Compose bunu işler. Yan etkiler (LaunchedEffect, DisposableEffect) tek seferlik olayları işler.