Android'de UI Nasıl Yapılır — Pratik Rehber

Kısa cevap: Yeni projeler için Jetpack Compose'u seçin, eski sistemleri desteklemek için XML'i, web içeriğini entegre etmek için WebView'i kullanın; Android Studio, çalışmayı hızlandıran ve performansı hata ayıklamanıza yardımcı olan Preview, Layout Inspector, Profiler ve tema oluşturucular sunar.

XML — Klasik ve Uyumluluk

XML — res/layout içindeki bildirimsel düzenler, bakımı yapılan projeler ve mevcut View sistemiyle sıkı entegrasyon gereken durumlar için uygundur.

Basit bir layout örneği (activity_main.xml):

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Merhaba, XML!"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tıkla"
        app:layout_constraintTop_toBottomOf="@id/textView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Artıları: Öngörülebilirlik, testlerin basitliği, ViewBinding/DataBinding ile uyumluluk. Eksileri: Dinamik yapılar için şablon kod gerektirmesi, iç içe geçmiş layout'ların performansı düşürebilmesi.

Jetpack Compose — Modern Reaktif UI

Compose — Kotlin fonksiyonları olarak UI, recomposition yalnızca state değişikliklerinde gerçekleşir. Greenfield projeler ve kademeli geçişler için önerilir.

Minimal örnek:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent { MyApp() }
    }
}

@Composable
fun MyApp() {
    var text by remember { mutableStateOf("Merhaba, Compose!") }
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text)
        Spacer(Modifier.height(16.dp))
        Button(onClick = { text = "Tıklandı!" }) { Text("Değiştir") }
    }
}

Pratik tavsiyeler:

• Composable'ları küçük ve yeniden kullanılabilir tutun.
• Asenkron mantık için LaunchedEffect kullanın, composable gövdesinde side-effect'ten kaçının.
• Hızlı tasarım ve testler için Preview'ı etkinleştirin.

WebView ve HTML Kullanım Durumları

WebView, mevcut web içeriğini, açılış sayfalarını veya PWA'ları uygulama içine entegre etmek için kullanışlıdır.

Yerel dosya yükleme örneği:

val webView: WebView = findViewById(R.id.webview)
webView.settings.javaScriptEnabled = true
webView.webViewClient = WebViewClient()
webView.loadUrl("file:///android_asset/index.html")

Güvenlik ve performans tavsiyeleri:

• Gerekmiyorsa JS'yi devre dışı bırakın.
• Dosya sistemi erişimini sınırlayın.
• Farklı WebView motorlarında test edin (farklı Android sürümleri farklı uygulamalara sahiptir).

UI İçin Android Studio Araçları

• Composable Preview — Uygulamayı başlatmadan composable'ları hızlıca görüntüleme.
• Layout Inspector — Çalışma zamanında View/Compose hiyerarşisinde hata ayıklama.
• Material Theme Builder — Palet tabanlı tema oluşturma.
• Profiler (CPU, GPU, Frames) — FPS ve overdraw ölçümü.
• Lint ve Accessibility kontrolleri — Optimizasyon ve erişilebilirlik için otomatik öneriler.

Hızlı optimizasyon adımları:

1. Profiler'ı etkinleştirin → kareleri izleyin ve ana iş parçacığındaki uzun işlemleri ortadan kaldırın.
2. Overdraw'ı ölçün ve şeffaf katmanları en aza indirin.
3. Büyük listelerde (RecyclerView/LazyColumn) belleği profilleyin.

Sık Yapılan Hatalar

• UI iş parçacığında ağır iş çalıştırma (ANR).
• XML'de aşırı iç içe geçmiş layout'lar.
• Compose'da UI state'in ViewModel dışında tutulması.
• WebView'de içerik filtrelemesi olmadan JavaScript'in açık bırakılması.
• Erişilebilirliğin göz ardı edilmesi (TalkBack, contentDescription).

SSS

• XML ekranını Compose'a nasıl geçiririm?

  • Parça parça geçiş yapın: Tek tek View'ları AndroidView ile sarın veya yeni ekranları Compose ile oluşturun, navigasyonu aynı bırakın.

• XML ve Compose'u karıştırabilir miyim?

  • Evet: Birlikte çalışma için XML içinde ComposeView veya Compose içinde AndroidView kullanın.

• Geliştirme açısından hangisi daha hızlı?

  • Compose genellikle prototipler ve karmaşık UI mantığı için daha hızlıdır; XML, eski projelerde küçük statik ekranlar için daha basittir.

• WebView'i nasıl test ederim?

  • İçerik yüklemeyi, navigasyonu, bağlantı işlemeyi ve farklı WebView sürümlerine sahip gerçek cihazlarda güvenliği kontrol edin.