Uytuz.com | Yazılım Öğren | Destek | Projeler | İnteraktif Forum
Yazılım Dersleri => Kotlin => Konuyu başlatan: 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):
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:
@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.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:class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyAppTheme {
Surface(modifier = Modifier.fillMaxSize()) {
Greeting("Compose Dünyası")
}
}
}
}
}State YönetimiEn kritik kısım – mutableStateOf ile reaktif state.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):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'larimport 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):implementation("androidx.navigation:navigation-compose:2.7.0")Basit Proje: Todo List UygulamasıTam çalışan bir Todo app – state, list, ekleme/silme.- ViewModel:
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:
@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:
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 ÖnerileriJetpack 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.