วิธีแสดง Progress Bar ขณะโหลด URL ใน WebView บน Android

ภาพรวม

ตัวอย่างนี้แสดงวิธีการแสดง Progress Bar (แถบความคืบหน้า) ขณะที่ WebView กำลังโหลดหน้าเว็บ และซ่อน Progress Bar เมื่อโหลดเสร็จสิ้น

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

สร้างโปรเจกต์ Android ใหม่ใน Android Studio

ขั้นตอนที่ 2: จัดทำ 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"
    tools:context=".MainActivity">
    <ProgressBar
        android:id="@+id/progressBar"
        android:max="3"
        android:progress="100"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true" />
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/progressBar"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

ขั้นตอนที่ 3: เขียนโค้ด MainActivity.java

import android.graphics.Bitmap;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {
    WebView webview;
    ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webview = findViewById(R.id.webView);
        progressBar = findViewById(R.id.progressBar);
        webview.setWebViewClient(new WebViewClient());
        webview.loadUrl("https://www.google.com");
    }

    public class WebViewClient extends android.webkit.WebViewClient {
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            progressBar.setVisibility(View.GONE);
        }
    }
}

ขั้นตอนที่ 4: เพิ่มสิทธิ์อินเทอร์เน็ตใน AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

การทำงาน

• Progress Bar จะแสดงขณะโหลดหน้าเว็บ
• เมื่อโหลดเสร็จ (onPageFinished) Progress Bar จะถูกซ่อน
• shouldOverrideUrlLoading จัดการการนำทางลิงก์ภายใน WebView

การทดสอบ

รันแอป จะเห็น Progress Bar หมุนขณะโหลด Google และหายไปเมื่อโหลดเสร็จ