WebView 詳解(簡易瀏覽器Demo)

Mr_qyw發表於2015-05-08
WebView瀏覽器

在Android應用中,需要使用WebView控制元件對Web程式進行解析,這個控制元件實際上使用了Webkit核心的內嵌瀏覽器.
下面以一個簡易瀏覽器的例子來講述WebView的使用步驟:
先上成果圖:
WebView 詳解(簡易瀏覽器Demo)
1 由於涉及到訪問網路,所以必須要在AndroidManifest新增訪問網路許可權:

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

2 然後在佈局檔案裡,新增WebView控制元件.

因為為了做成一個瀏覽器的樣子，這裡除了新增WebView外,還新增了一個EditText用於輸入網址,以及一個按鈕,用來觸發訪問網址。除此之外，還新增了四個按鈕，分別用來控制“後退”“前進”“主頁”“設定成無圖模式”等動作。詳細程式碼如下：

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#CCCCCC"
        android:orientation="horizontal" >

        <EditText
            android:id="@+id/url"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="5"
            android:inputType="textUri"
            android:text="www.baidu.com" />

        <Button
            android:id="@+id/visit"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="訪問" >
        </Button>
    </LinearLayout>

    <ProgressBar
        android:id="@+id/loadding_progress"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="12dp"
        android:max="100" />

    <WebView
        android:id="@+id/wv"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="12" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#CCCCCC"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" >
            <ImageButton
                android:id="@+id/back"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@drawable/backbutton" >
            </ImageButton>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" >
            <ImageButton
                android:id="@+id/ahead"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@drawable/aheadbutton" >
            </ImageButton>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" >
            <Button
                android:id="@+id/home"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@drawable/homebutton" >
            </Button>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" >
            <Button
                android:id="@+id/nopicture"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@drawable/wutubutton" >
            </Button>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

3 接下來，分開多個模組來講述WebView的多個功能。

  • 首先，肯定要講述如何實現載入頁面
WebView wv = (WebView) findViewById(R.id.wv);
wv.loadUrl("http://www.baidu.com");
  • 載入頁面時,監聽載入頁面開始,結束等事件

這裡通過重寫WebViewClient的onPageFinished,onPageStarted方法。來完成想在載入頁面開始以及結束時的動作。

class myWebClient extends WebViewClient {
    @Override
    public void onPageFinished(WebView view, String url) {// 載入頁面結束時觸發
        // TODO Auto-generated method stub
        //可以在這裡結束進度條
        super.onPageFinished(view, url);
    }
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {// 載入頁面開始時觸發
        // TODO Auto-generated method stub
        //可以在這裡啟動一個進度條,用來提示使用者正在載入
        super.onPageStarted(view, url, favicon);
        }
    }
  • 在上一點雖然可以監聽載入頁面的開始與結束,但無法知道載入過程中的進度。這裡可以通過重寫WebChromeClinent的onProgressChanged方法來知道載入過程中的進度。
wv.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int newProgress) {
        Log.i(TAG, "載入進度" + newProgress);
        loadProgressBar.setProgress(newProgress);
        //當進度達到100,則隱藏進度條
        if (newProgress >= 100) {
            loadProgressBar.setAlpha(0);
        }
    }
});
  • 在WebView使用javaScript
webSettings = wv.getSettings();     
webSettings.setJavaScriptEnabled(true);//設定可以用javaScript
  • 處理在WebView所點選的連結
    當單擊在WebView上的連結時，預設行為是利用預設的網頁瀏覽器開啟。
    因此如果要處理在WebView所點選連結，要為您的WebView提供一個WebViewClient，使用setWebViewClient()。
wv.setWebViewClient(new WebViewClient() {
    public boolean shouldOverrideUrlLoading(final WebView view,final String url) {
        wv.loadUrl(url);// 載入網頁
        return true;
    }// 重寫點選動作,用webview載入
});
  • 訪問瀏覽的歷史記錄
    可以先通過WebView的canGoBack()方法與canGoForward()方法來判斷是否有能返回或者前進的歷史記錄。
    若有，在通過WebView的goBack()方法與goForward方法來返回或者前進。
case R.id.back:
    if (wv.canGoBack()) {
        wv.goBack();
    }
    break;
case R.id.ahead:
    if (wv.canGoForward()) {
        wv.goForward();
    }
    break;
  • 設定無圖模式

通過WebSettings的setBlockNetworkImage()方法便可以實現。

wv.getSettings().setBlockNetworkImage(true);
  • 設定快取
    在談設定快取前，先了解一下有哪些快取模式：
    LOAD_CACHE_ONLY: 不使用網路，只讀取本地快取資料
    LOAD_DEFAULT: 根據cache-control決定是否從網路上取資料。
    LOAD_CACHE_NORMAL: API level 17中已經廢棄, 從API level 11開始作用同LOAD_DEFAULT模式
    LOAD_NO_CACHE: 不使用快取，只從網路獲取資料.
    LOAD_CACHE_ELSE_NETWORK，只要本地有，無論是否過期，或者no-cache，都使用快取中的資料。

根據上述各種快取模式的解釋，快取策略應該為，判斷是否有網路，有的話，使用LOAD_DEFAULT，無網路時，使用LOAD_CACHE_ELSE_NETWORK。

在設定快取前，應該給快取設定一個路徑，以及控制快取大小：
設定快取路徑可以通過WebSettings的setAppCachePath()方法來實現;
而設定快取大小,可以通過WebSettings的setAppCacheMaxSize()方法來實現。

然後設定快取，就可以通過WebSettings的setAppCacheEnabled(true)來實現;
關鍵程式碼為：

//設定快取,快取大小為
webSettings.setAppCacheEnabled(true);
webSettings.setAppCachePath(CachePath.getCachePath());
webSettings.setAppCacheMaxSize(1024*1024*8);
//當有網時,快取模式設定為LOAD_DEFAULT;當沒網時,快取模式設定為LOAD_CACHE_ELSE_NETWORK;
if (checkNet.isNetWorkConnected()) {
    webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
}else { 
    webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        }

本文Demo:利用WebView所做的簡易瀏覽器

相關文章