Mobil Geliştirmede Jetpack Compose: Nedir, Temel Kavramlar ve Nasıl Çalışır

Jetpack Compose Temelleri (@Composable, Composition, Recomposition)

@Composable — bir fonksiyonu Composable'a dönüştüren anotasyon. Composable fonksiyonlar UI yapı taşlarıdır. Bir View döndürmezler, Composition'a öğeler yayarlar. Composition — Composable fonksiyon çağrılarından oluşturulmuş bir UI ağacı. Compose yeni ağacı eskiyle karşılaştırır ve yalnızca değişen kısımları günceller.

Recomposition

Recomposition — durum değiştiğinde Composable fonksiyonlarının yeniden başlatılması. Compose her fonksiyonda hangi durumların okunduğunu izler. Bir durum değiştiğinde, Compose yalnızca bu durumu okuyan fonksiyonları yeniden başlatır (Smart Recomposition). Recomposition iyimserdir: birden çok kez çalışabilir, bu nedenle fonksiyonlar saf olmalıdır (yan etkisiz). Yan etkiler LaunchedEffect veya DisposableEffect'e konur. Composable fonksiyonlar suspend olamaz. Diğer Composable fonksiyonlardan çağrılırlar. Çağrı sırası garanti edilmez (Compose yeniden sıralayabilir).

// State Hoisting ve LazyColumn ile Composable Örneği
@Composable
fun ItemList(
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onItemClick(item) }
                    .padding(8.dp)
            ) {
                Text(
                    text = item,
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }
    }
}

@Composable
fun MainScreen() {
    var text by remember { mutableStateOf("") }
    val items = listOf("Item 1", "Item 2", "Item 3")

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Compose App") })
        }
    ) { padding ->
        ItemList(
            items = items,
            onItemClick = { selected -> text = selected }
        )
    }
}

Composition — bildirimsel ağaç. Recomposition — akıllı yeniden başlatma. IT Sectr, tür kararlılığını izlemeyi önerir — kararsız türler aşırı yeniden oluşturmaya neden olur.

CompositionLocal

CompositionLocal — Compose'da örtük veri geçirme. SwiftUI'deki @Environment'e benzer. CompositionLocalProvider — değer ayarlama. current — okuma. Şunlar için kullanılır: Theme (MaterialTheme), ContentScale, Density. Statik CompositionLocal — değişiklik olmadan yapılandırma için. Dinamik CompositionLocal — değişken değerler (temalar) için. IT Sectr, global yapılandırmalar için CompositionLocal ve veriler için açık parametreler kullanılmasını önerir.

Durum (remember, mutableStateOf, State Hoisting)

remember — yeniden oluşturmalar arasında değeri korur. mutableStateOf — gözlemlenebilir durum oluşturur (MutableState<T>). Değiştiğinde yeniden oluşturmayı tetikler. State Hoisting — desen: durum ebeveyn bileşene yükseltilir, alt değer + geri çağrı alır. State (değişmez) — yalnızca okuma. MutableState — okuma + yazma. rememberSaveable — döndürme/işlem sonlanmasında kalıcı olur.

State Hoisting

State Hoisting — ilke: state down, events up. Durum ebeveynde saklanır ve parametreler aracılığıyla alt bileşenlere iletilir. Alt bileşenler değişiklikleri lambda (geri çağrı) aracılığıyla bildirir. Faydaları: yeniden kullanılabilirlik, test edilebilirlik, tek doğruluk kaynağı. Örnek: MyTextField'in kendi durumunu saklaması yerine, ebeveyn dizeyi saklar ve value + onValueChange aracılığıyla iletir.

Türetilmiş Durum

derivedStateOf — hesaplanmış durum, yalnızca bağımlılıklar değiştiğinde yeniden hesaplanır. Filtreleme, dönüştürme, doğrulama için kullanılır. snapshotFlow — State'i Flow'a dönüştürür. Reaktif zincirler için kullanılır. collectAsState — Composable içinde Flow'u State'te toplar. IT Sectr, hesaplanmış değerler için derivedStateOf ve State'i coroutine'lere bağlamak için snapshotFlow kullanılmasını önerir.

Kapsayıcılar (Column, Row, Box, LazyColumn)

Column — dikey düzen (LinearLayout vertical benzeri). Row — yatay düzen. Box — istifleme düzeni (FrameLayout benzeri). LazyColumn — tembel yüklemeli dikey kaydırılabilir liste. LazyRow — yatay kaydırılabilir liste. Scaffold — ana ekran iskeleti: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — üst çubuk. BottomNavigation — alt navigasyon (Material 3'te NavigationBar). Modifier — zincir: .fillMaxWidth().padding(8.dp).clickable { }. Değiştirici sırası önemlidir — her biri yeni bir sarmalayıcı oluşturur.

LazyColumn Optimizasyonu

LazyColumn — sanallaştırılmış liste. Yalnızca görünür öğeleri işler. Optimizasyon: 1) key — öğe için benzersiz anahtar, 2) contentType — öğeleri türe göre gruplama, 3) itemContent — öğe içinde yeniden oluşturmayı en aza indirme, 4) LazyVerticalGrid / LazyHorizontalGrid — ızgaralar için. LazyLayout — özel tembel düzen. Paging 3 + Compose — collectAsLazyPagingItems aracılığıyla sayfalama. IT Sectr, öngörülebilir yeniden oluşturma için tüm LazyColumn'lerde key(item) kullanılmasını önerir.

Navigasyon (NavController, NavHost)

Navigation Compose — navigasyon kütüphanesi. NavController — hedef yığınını yönetir. NavHost — navigasyon grafiği kapsayıcısı. composable("route") — hedef kaydetme. navController.navigate("route") — gezinme. popBackStack() — geri gitme. Argümanlar: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). intentFilter aracılığıyla derin bağlantı. BottomNavigation — NavController ile entegrasyon: NavBarItem → navigate + popUpTo.

Gelişmiş Navigasyon

Birden çok geri yığını — her BottomNavigation sekmesi için ayrı geri yığını. SavedStateHandle — işlem sonlanmasında argümanları koruma. NavArgs — tür güvenli argümanlar (Kotlin 2.0+). Derin bağlantılar — harici bağlantılar için URL şemaları. Tahmine dayalı geri hareketi (Android 14+) — önizlemeli geri hareket desteği. IT Sectr, tür güvenliği için NavArgs ve BottomNavigation için birden çok geri yığını kullanılmasını önerir.

Efektler (LaunchedEffect, DisposableEffect)

LaunchedEffect — Composition'da suspend bloğu başlatır. Composition'dan çıkıldığında iptal edilir. keys değiştiğinde yeniden başlatılır. Şunlar için kullanılır: veri yükleme, zamanlayıcılar, animasyonlar. DisposableEffect — temizlik gerektiren kaynaklar için: onDispose { } — dinleyicilerden aboneliği iptal etme, bağlantıları kapatma. SideEffect — senkron efekt (her yeniden oluşturmada). Şunlar için kullanılır: günlükleme, Compose olmayan kodla senkronizasyon. IT Sectr, veri yükleme için LaunchedEffect ve temizlik için DisposableEffect kullanılmasını önerir.

Compose — fonksiyon + değiştirici. SwiftUI — struct + değiştirici. Kavramlar benzer, sözdizimi farklıdır. IT Sectr her iki framework'ü de öğrenmeyi önerir — birini anlamak diğerini öğrenmeyi kolaylaştırır.

Efekt desenleri

rememberCoroutineScope — LaunchedEffect dışında CoroutineScope'a erişim (örneğin, düğme tıklamasında). snapshotFlow — zincirler için State'i Flow'a dönüştürme. produceState — Compose olmayan kaynağı State'e dönüştürme. animateFloatAsState ve animateColorAsState — efektler aracılığıyla animasyonlar. IT Sectr, UI olayları için rememberCoroutineScope ve otomatik yükleme için LaunchedEffect kullanılmasını önerir.

Tema (MaterialTheme, Material3)

MaterialTheme — Compose'un global teması. Renkler, tipografi, şekiller. MaterialTheme { } — tüm uygulamayı sarar. Material3 (M3) — Google tasarım sistemi 2023+. Dynamic Colors — duvar kağıdına uyum (Android 12+). TextStyle — metin yapılandırması: fontSize, fontWeight, lineHeight. Shape — köşe yuvarlama. Elevation — gölgeler. IT Sectr varsayılan olarak Material3 ve modern cihazlar için Dynamic Colors kullanılmasını önerir.

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            secondary = Color(0xFF03DAC6)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC6)
        )
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            bodyLarge = TextStyle(fontSize = 16.sp)
        )
    ) { content() }
}

Animasyonlar (animate*, AnimatedVisibility)

animateFloatAsState — Float değerini canlandırır. animateColorAsState — rengi canlandırır. animateDpAsState — boyutu canlandırır. AnimatedVisibility — .animateEnterExit() ile göster/gizle. AnimatedContent — içerik değiştiğinde animasyon (crossfade, slide). updateTransition — enum durumuna dayalı animasyon. Animatable — Animatable arayüzü aracılığıyla özel animasyon. IT Sectr listeler için AnimatedVisibility ve ekran geçişleri için AnimatedContent kullanılmasını önerir.

@Composable
fun AnimatedCounter(count: Int) {
    val animatedCount by animateFloatAsState(
        targetValue = count.toFloat(),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )

    AnimatedContent(targetState = count) { targetCount ->
        Text(
            text = "$targetCount",
            style = MaterialTheme.typography.displayLarge,
            modifier = Modifier.animateContentSize()
        )
    }
}

Test (Compose UI Test)

Compose UI Test — Compose ekranlarının testi. createComposeRule() — JUnit kuralı. setContent { } — Composable ayarlama. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — öğe bulma. performClick, performTextInput, performScrollTo — eylemler. assertIsDisplayed, assertTextEquals — iddialar. Semantics — erişilebilirlik ve testler için Semantics ağacı. IdlingResource — asenkron işlemleri bekleme. Ekran görüntüsü testleri — Papercuts, Roborazzi. IT Sectr her ekran için UI testleri ve ViewModel için birim testleri önerir.

WindowSizeClass — ekran boyutuna uyum (Compact, Medium, Expanded). Material3 duyarlı düzenleriyle ilgili. Adaptive Navigation Suite'te BottomNavigation'dan NavigationRail'e otomatik geçiş için kullanılır. IT Sectr, tablet ve masaüstü Compose uyumu için WindowSizeClass kullanılmasını önerir.

Paging 3 + Compose — Google'dan sayfalama kütüphanesi. PagingData — sayfa akışı. PagingConfig — ayarlar (pageSize, prefetchDistance). collectAsLazyPagingItems() — Compose'da toplama. PagingSource — özel kaynak. RemoteMediator — hibrit yükleme (ağ + DB). Paging 3, Compose'ta sonsuz kaydırma listeleri için standarttır.