Kotlin'de Jetpack Compose: Modern Android UI Geliştirme - 2026

Başlatan Uytuz, Mar 20, 2026, 01:24 ÖS

« önceki - sonraki »
Yazdır
Aşağı git Sayfa1
Kullanıcı Eylemleri

Uytuz

Mar 20, 2026, 01:24 ÖS
Kotlin'de Jetpack Compose, Android UI geliştirmenin modern ve declarative (bildirime dayalı) yoludur. Eski XML + View sistemine kıyasla Compose, tamamen Kotlin koduyla UI oluşturmanızı sağlar – daha kısa, daha güvenli ve state-driven bir yaklaşım sunar. 2026 itibarıyla Compose, Android'in resmi UI toolkit'i konumunda: Yeni projelerin %95+ı Compose ile başlıyor, Material 3 desteği tam, performans iyileştirmeleri (baseline profiles, compiler optimizasyonları) ve Wear OS, TV, Desktop (Compose Multiplatform) desteğiyle genişledi. Compose, reaktif state yönetimiyle birleşince (State, MutableState, ViewModel entegrasyonu) UI kodunuz hem daha az boilerplate içerir hem de daha test edilebilir olur.

Google'da "Jetpack Compose tutorial", "Compose Android", "Compose State", "Compose Material 3" gibi aramalar Türkiye'de ve dünyada en yüksek hacimli Android/Kotlin konularından. Compose'u iyi anlamak, modern Android geliştiricisi olmanın şartı – eski View sistemini öğrenmeye gerek kalmadan profesyonel uygulamalar yapabilirsiniz.

Neden Jetpack Compose Öğrenmelisiniz? (2026 Perspektifi)
  • Declarative paradigma: Ne istediğinizi tanımlayın (XML gibi imperative değil), Compose nasıl çizeceğini kendisi halleder.
  • Kısalık: Bir ekranı 100+ satır XML + Kotlin yerine 30-50 satır Kotlin ile yazın.
  • State-driven: State değişince UI otomatik yeniden çizilir – reaktif ve predictable.
  • Multiplatform potansiyeli: Compose Multiplatform ile Android + Desktop + Web (kısmi) aynı UI kodu.
  • Popüler kullanım: Google'ın kendi app'leri (Maps, Play Store güncellemeleri), Netflix, Airbnb, Twitter/X Android app'i Compose kullanıyor.
  • Kariyer avantajı: Android iş ilanlarının çoğu "Jetpack Compose experience" arıyor.

Kurulum ve İlk Uygulama
  • Android Studio: Güncel sürüm (Koala veya üstü) indirin – Compose zaten entegre.

    • Yeni proje → "Empty Compose Activity" şablonu seçin.
  • Dependency'ler (build.gradle.kts - Module level):

    Kod Seç
    implementation("androidx.compose.ui:ui:1.6.0")  // Güncel sürüm 2026'da 1.7+ olabilir
    implementation("androidx.compose.material3:material3:1.2.0")
    implementation("androidx.compose.ui:ui-tooling-preview:1.6.0")
    implementation("androidx.activity:activity-compose:1.8.0")
    debugImplementation("androidx.compose.ui:ui-tooling:1.6.0")
  • Theme ve Preview:

    Kod Seç
    @Preview(showBackground = true)
    @Composable
    fun GreetingPreview() {
        MyAppTheme {  // Material3 theme
            Greeting("Android")
        }
    }
Temel Compose Kavramları
Compose fonksiyonları @Composable ile işaretlenir – UI parçacıklarıdır.

Kod Seç
import androidx.compose.material3.Text
import androidx.compose.material3.Button
import androidx.compose.foundation.layout.Column
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun Greeting(isim: String) {
    Column {
        Text(text = "Merhaba $isim!")
        Button(onClick = { /* tıklama */ }) {
            Text("Tıkla")
        }
    }
}
MainActivity'de kullanım:

Kod Seç
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    Greeting("Compose Dünyası")
                }
            }
        }
    }
}
State Yönetimi
En kritik kısım – mutableStateOf ile reaktif state.
Kod Seç
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

@Composable
fun Sayac() {
    var sayac by remember { mutableStateOf(0) }  // State hoisting için remember

    Column {
        Text("Sayaç: $sayac")
        Button(onClick = { sayac++ }) {
            Text("Artır")
        }
    }
}
ViewModel ile (uzun ömürlü state):

Kod Seç
class SayacViewModel : ViewModel() {
    private val _sayac = mutableStateOf(0)
    val sayac: State<Int> = _sayac

    fun artır() {
        _sayac.value++
    }
}

// Kullanım
val viewModel: SayacViewModel = viewModel()
Text("Sayaç: ${viewModel.sayac.value}")
Button(onClick = viewModel::artır) { ... }
Layout'lar ve Modifier'lar

Kod Seç
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.arrangement
import androidx.compose.foundation.lazy.LazyColumn

@Composable
fun ListeOrnek() {
    LazyColumn(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(100) { index ->
            Text("Öğe $index", modifier = Modifier.padding(8.dp))
        }
    }
}
Navigation (Compose Navigation):

Kod Seç
implementation("androidx.navigation:navigation-compose:2.7.0")
Basit Proje: Todo List Uygulaması
Tam çalışan bir Todo app – state, list, ekleme/silme.
  • ViewModel:


    Kod Seç
    data class Todo(val id: Int, val metin: String, var tamamlandi: Boolean = false)

    class TodoViewModel : ViewModel() {
        private val _todos = mutableStateListOf<Todo>()
        val todos: List<Todo> = _todos

        fun ekle(metin: String) {
            _todos.add(Todo(_todos.size, metin))
        }

        fun sil(todo: Todo) {
            _todos.remove(todo)
        }

        fun toggle(todo: Todo) {
            val index = _todos.indexOf(todo)
            _todos[index] = todo.copy(tamamlandi = !todo.tamamlandi)
        }
    }
  • Composable Ekran:


    Kod Seç
    @Composable
    fun TodoScreen(viewModel: TodoViewModel = viewModel()) {
        var yeniMetin by remember { mutableStateOf("") }

        Column(modifier = Modifier.padding(16.dp)) {
            Row {
                TextField(value = yeniMetin, onValueChange = { yeniMetin = it })
                Button(onClick = {
                    if (yeniMetin.isNotBlank()) {
                        viewModel.ekle(yeniMetin)
                        yeniMetin = ""
                    }
                }) {
                    Text("Ekle")
                }
            }

            LazyColumn {
                items(viewModel.todos) { todo ->
                    Row {
                        Checkbox(checked = todo.tamamlandi, onCheckedChange = { viewModel.toggle(todo) })
                        Text(
                            todo.metin,
                            modifier = Modifier.clickable { viewModel.toggle(todo) },
                            textDecoration = if (todo.tamamlandi) TextDecoration.LineThrough else null
                        )
                        Spacer(Modifier.weight(1f))
                        Button(onClick = { viewModel.sil(todo) }) { Text("Sil") }
                    }
                }
            }
        }
    }
  • MainActivity:


    Kod Seç
    setContent {
        MyAppTheme {
            TodoScreen()
        }
    }
Bu proje çalıştırıldığında tam işlevsel bir Todo listesi olur – ekleme, tamamlama, silme.

İleri Konular
  • Animation:animateDpAsState, AnimatedVisibility.
  • Theme: Material 3 dynamic color (Wallpaper renkleri).
  • Navigation:NavHost, composable route'lar.
  • Dependency Injection: Hilt + Compose.
  • Testing:createComposeRule.

Sonuç ve Pratik Önerileri
Jetpack Compose, Android UI'nin geleceğidir – öğrenmesi kolay, yazması keyifli. Bu rehber ve Todo projesiyle temel bir app yapabilecek seviyedesiniz. İleri için:
  • Not alma app'i yapın (Room + Compose).
  • Hava durumu app'i (Retrofit + Coroutines + Compose).
  • Compose Multiplatform ile desktop versiyonu ekleyin.
  • Kaynaklar: Android resmi docs (developer.android.com/compose), "Jetpack Compose by Tutorials" (raywenderlich), Google'ın Compose samples GitHub.

Bu rehberle Compose'u etkili kullanmaya başlayacaksınız. Kendi Todo app'inizi genişletin veya başka proje için yorum bırakın! 2026'da Android projelerinizde Compose size büyük hız kazandıracak.
Yazdır
Yukarı git Sayfa1
Kullanıcı Eylemleri