以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之事件並且覆寫,如何實作待下回分解。

沒有留言: