Android Jetpack Compose: Deklaratif UI'ye Geçiş Rehberi
Jetpack Compose, Android UI geliştirmeyi temelden değiştiriyor. XML dosyalarıyla uğraşmak yerine Kotlin kodunda doğrudan arayüz tanımlıyorsun. Bu yaklaşım daha az hata, daha hızlı geliştirme ve daha okunaklı kod demek.
Geleneksel XML yaklaşımında arayüzü statik olarak tanımlarsın, sonra Java/Kotlin'de dinamik davranış eklersin. Compose'da ise duruma (state) göre UI otomatik güncelleniyor. Fonksiyonlar ve değişkenlerin kombinasyonuyla arayüz oluşturursun.
Projenin build.gradle.kts dosyasına ekle:
1dependencies {2implementation "androidx.compose.ui:ui:1.6.0"3implementation "androidx.compose.material3:material3:1.1.0"4implementation "androidx.activity:activity-compose:1.8.0"5}Activity'de XML yerine Compose kullan:
1class MainActivity: AppCompatActivity() {2override fun onCreate(savedInstanceState: Bundle?) {3super.onCreate(savedInstanceState)4setContent {5MyApp()6}7}8}911fun MyApp() {12Column(13modifier = Modifier.fillMaxSize().padding(16.dp),14verticalArrangement = Arrangement.Center,15horizontalAlignment = Alignment.CenterHorizontally16) {17Text(18text = "Merhaba Compose!",19fontSize = 24.sp,20fontWeight = FontWeight.Bold21)22Spacer(modifier = Modifier.height(16.dp))23Button(onClick = { /* Tıklama işlemi */ }) {24Text("Tıkla")25}26}27}Çıktı: Ekranın ortasında "Merhaba Compose!" yazısı ve altında "Tıkla" butonu görünür.
UI durumunu yönetmek için remember ve mutableStateOf kullan:
2fun Counter() {3var count by remember { mutableStateOf(0) }45Column(horizontalAlignment = Alignment.CenterHorizontally) {6Text(text = "Sayı: $count", fontSize = 20.sp)7Button(onClick = { count++ }) {8Text("Artır")9}10}11}Butona her tıklandığında count artar ve UI otomatik yenilenir.
XML'den Compose'a geçiş, kodu daha modüler ve test edilebilir hale getiriyor. Aynı dilde arayüz ve mantık yazıyorsun, context switching yok. Compose Preview ile gerçek cihaza kurmadan değişiklikleri görebilirsin.
Deklaratif yaklaşım alışması biraz zaman alsa da, bir kez öğrendiğinde geri dönüşü olmaz.
0 yorum