WebView 详解(简易浏览器Demo)

在Android应用中,需要使用WebView控件对Web程序进行解析,这个控件实际上使用了Webkit内核的内嵌浏览器.
下面以一个简易浏览器的例子来讲述WebView的使用步骤:
先上成果图:

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所做的简易浏览器