Cách lắng nghe WebView tải xong URL trong Android bằng Kotlin

Giới thiệu

Bài viết này minh họa cách lắng nghe sự kiện WebView hoàn thành tải trang URL trong Android sử dụng Kotlin, WebViewClient và WebChromeClient.

Các bước thực hiện

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project và điền đầy đủ thông tin để tạo dự án mới.

Bước 2: Thiết kế giao diện (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="4dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textColor="#000000"
        android:textSize="24sp" />

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/btnLoad"
        android:layout_below="@id/textView" />

    <Button
        android:id="@+id/btnLoad"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Tải URL" />
</RelativeLayout>

Bước 3: Viết logic xử lý (src/MainActivity.kt)

import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Button
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    lateinit var webView: WebView
    lateinit var textView: TextView
    private lateinit var btnLoad: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        
        textView = findViewById(R.id.textView)
        btnLoad = findViewById(R.id.btnLoad)
        webView = findViewById(R.id.webView)
        webView.webViewClient = WebViewClient()
        
        btnLoad.setOnClickListener {
            webView.webViewClient = object : WebViewClient() {
                override fun onPageFinished(view: WebView, weburl: String) {
                    Toast.makeText(this@MainActivity, "WebView đã tải xong....", Toast.LENGTH_LONG).show()
                }
            }
            
            webView.webChromeClient = object : WebChromeClient() {
                override fun onProgressChanged(view: WebView, newProgress: Int) {
                    textView.text = "Đang tải trang: $newProgress%"
                    if (newProgress == 100) {
                        textView.text = "Trang đã tải xong."
                    }
                }
            }
            
            webView.loadUrl("https://www.tutorialspoint.com/")
        }
    }
}

Bước 4: Cấu hình Manifest (androidManifest.xml)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.example.q11">
    <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/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Chạy ứng dụng

Kết nối thiết bị Android thực với máy tính. Trong Android Studio, mở file activity và nhấn biểu tượng Run trên thanh công cụ. Chọn thiết bị di động của bạn và kiểm tra màn hình hiển thị.

Giải thích: WebViewClient.onPageFinished() gọi khi trang tải xong. WebChromeClient.onProgressChanged() cung cấp tiến độ tải (0-100%). Cần bật JavaScript: webView.settings.javaScriptEnabled = true.