Jetpack Compose ile Kotlin Kullanarak WebView Oluşturma Üzerine

AndroidManifest.xml

WebView kullanabilmek için internet erişim izni ekleyin. AndroidManifest.xml dosyasını aşağıdaki gibi güncelleyin:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.WebViewExample">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:theme="@style/Theme.WebViewExample">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Ana Aktiviteyi Oluşturma

Şimdi asıl kısmımıza geçelim. WebView ve buton arasındaki geçişi sağlayacak kodları yazalım.

MainActivity.kt:

package com.cloffygames.webviewexample

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.cloffygames.webviewexample.ui.theme.WebViewExampleTheme
import androidx.compose.ui.viewinterop.AndroidView
import android.webkit.WebView
import android.webkit.WebViewClient

// MainActivity, uygulamanın ana etkinliğini temsil eder ve bir bileşen etkinliği (ComponentActivity) olarak tanımlanır.
class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // setContent, Compose UI'yi etkinliğin içerik görünümü olarak ayarlamak için kullanılır.
        setContent {
            WebViewExampleTheme {
                // Scaffold, temel ekran yapısını oluşturur ve çeşitli UI bileşenleri için yuvalar sağlar.
                Scaffold(
                    modifier = Modifier.fillMaxSize(),

                    // Üst çubuk (TopAppBar) bileşenini tanımlar.
                    topBar = {
                        TopAppBar(
                            title = { Text("WebView Example") }, // Üst çubuk başlığını ayarlar.
                            colors = TopAppBarDefaults.topAppBarColors(
                                containerColor = MaterialTheme.colorScheme.primary, // Üst çubuğun arka plan rengini ayarlar.
                                titleContentColor = MaterialTheme.colorScheme.onPrimary // Başlık metninin rengini ayarlar.
                            )
                        )
                    }
                ) { innerPadding ->
                    // currentScreen, mevcut ekranı belirten bir değişken.
                    var currentScreen by remember { mutableStateOf("home") }

                    // Ekran içeriğini belirler.
                    if (currentScreen == "home") {
                        HomeScreen(
                            onButtonClick = { currentScreen = "webview" }, // Butona tıklanınca currentScreen'i günceller.
                            modifier = Modifier.padding(innerPadding) // İçerik dolgusunu ayarlar.
                        )
                    } else {
                        WebViewScreen(
                            url = "https://github.com/serhattastan", // WebView içinde yüklenecek URL'yi belirtir.
                            modifier = Modifier.padding(innerPadding) // İçerik dolgusunu ayarlar.
                        )
                    }
                }
            }
        }
    }
}

// HomeScreen, ana ekranı tanımlar ve bir buton içerir.
@Composable
fun HomeScreen(onButtonClick: () -> Unit, modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Text(
            text = "Welcome to the WebView Example!",
            style = MaterialTheme.typography.headlineSmall,
            modifier = Modifier.padding(bottom = 16.dp)
        )
        Button(
            onClick = onButtonClick,
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(text = "Go to WebView")
        }
    }
}

// WebViewScreen, belirtilen URL'yi yüklemek için bir WebView bileşeni oluşturur.
@Composable
fun WebViewScreen(url: String, modifier: Modifier = Modifier) {
    // AndroidView, geleneksel Android bileşenlerini (burada WebView) Compose ile kullanmak için kullanılır.
    AndroidView(
        factory = {
            WebView(it).apply {
                webViewClient = WebViewClient() // WebViewClient, sayfa yükleme işlemlerini yönetir.
                settings.javaScriptEnabled = true // JavaScript desteğini etkinleştirir.
                loadUrl(url) // Belirtilen URL'yi yükler.
            }
        },
        modifier = modifier.fillMaxSize() // WebView'in ekranı doldurmasını sağlar.
    )
}

// WebViewScreen'in önizlemesini sağlayan fonksiyon.
@Preview(showBackground = true)
@Composable
fun WebViewScreenPreview() {
    WebViewExampleTheme {
        WebViewScreen("https://www.example.com") // Önizleme için örnek bir URL yükler.
    }
}

// HomeScreen'in önizlemesini sağlayan fonksiyon.
@Preview(showBackground = true)
@Composable
fun HomeScreenPreview() {
    WebViewExampleTheme {
        HomeScreen(onButtonClick = {})
    }
}

Bu kod, başlangıçta bir ana ekran (HomeScreen) gösterir ve “Go to WebView” butonuna tıklandığında WebView ekranına (WebViewScreen) geçiş yapar. Ana ekran ve WebView ekranı arasında geçiş yapmak için currentScreen adlı bir değişken kullanılır.

Bu kadar! Artık Kotlin ve Jetpack Compose kullanarak bir WebView uygulaması yapmayı öğrendiniz. Bu temel bilgilerle kendi projelerinizi geliştirebilir ve daha fazla özellik ekleyebilirsiniz.

Herhangi bir sorunuz olursa, yorumlarda belirtmekten çekinmeyin. Mutlu kodlamalar!