Rock N Code: 以WebViewClient於Android開啟網頁，並以AlertDialog提示載入狀態

本文是Google Android應用程式範例實務課程-Day4課堂作業，說明如下。

[範例情境]
1.透過Android的WebViewClient包裝網頁
2.點選網頁內其他link，載入其他網頁時，必須彈出"載入中"之提示訊息
3.點選網頁內其他link，載入其他網頁時，必須直接開啟該網頁，而非另開新視窗

[情境分析]
1.1個Activity
2.1個Layout
3.要達成同一容器載入(不開新視窗)的瀏覽模式，必須思考WebViewClient的用法
4.要在載入當下，提供訊息給使用者，要會抓取onPageStarted事件
5.要在載入當下，提供訊息給使用者，要會抓取onPageFinished事件

SETP 1：新增專案

SETP 2：修改AndroidMainfest.xml

SETP 3：配置Layout

SETP 4：撰寫程式碼
依序示範如何將瀏覽網頁的預設方法改用WebViewClient來開啟，步驟將帶出不少觀念，故請務必按照順序施作。

﹡用WebViewClient開啟網頁

package com.example.android.homework6;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class Homework6 extends Activity {
    private WebView mWebView01; 
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        /*單純開啟網頁*/
        String strURI = "http://jumpin.cc/Android/";
        mWebView01 = (WebView) findViewById(R.id.myWebView1);
        mWebView01.loadUrl(strURI);
    }
}

程式一執行即刻進入網頁

隨意點選網頁連結(如圖之"中央氣象局")

結果中央氣象局是用Android內建瀏覽器開啟，
而非我們的WebViewClient

網頁上其他超連結(中央氣象局)的開啟方式不符合本例目標，必須夠過New一個WebViewClient的方式改寫，請在onCreate內加入下面這行即可
mWebView01.setWebViewClient(new WebViewClient(){ });

成功地使用WebViewClient包裝

﹡實作前述[範例情境]之2、3點

package com.example.android.homework6;
import android.app.Activity;
import android.app.ProgressDialog;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class Homework6 extends Activity {
private WebView mWebView01; 
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        /*單純開啟網頁*/
        String strURI = "http://jumpin.cc/Android/";
        mWebView01 = (WebView) findViewById(R.id.myWebView1);
        mWebView01.loadUrl(strURI);     
       
        mWebView01.setWebViewClient(new WebViewClient(){
           ProgressDialog d=new ProgressDialog(Homework6.this);
         
           @Override
           public void onPageStarted(WebView view, String url, Bitmap favicon) {          
          d.setTitle("ProgressDialog");
          d.setMessage("載入中");
          d.show();    
          }
         
           @Override
           public void onPageFinished(WebView view, String url) {
           d.dismiss();
               super.onPageFinished(view, url);
          }
        });
    }
}

捕捉onPageStarted事件，叫ProgressDialog現身

捕捉onPageFinished事件，叫ProgressDialog離開
網頁就不會被擋住

重點 I：onPageStarted
重點I I：onPageFinished
重點III：AlertDialog（本例選擇ProgressDialog這種）

SETP 5：執行
執行成果如上步驟最後一張圖。
但當使用者想回到原始網頁按下BACK時，會整個跳出Activity，跑到列舉所有AP的Menu
若要修改BACK預設操作，使其符合本利期望，需要捕捉BACK之事件並且覆寫，如何實作待下回分解。

以WebViewClient於Android開啟網頁，並以AlertDialog提示載入狀態

沒有留言: