转载： WebView学习指南

转自：http://android.yaohuiji.com/archives/734

本讲内容：WebView的使用方法

今天我们来学习一个可以显示网页的控件WebView。WebView的网页渲染引擎和Safari、Chrome一样都是Webkit。使用WebView进行互联网程序开发有以下优点：
1、可以打开远程网址、也可以加载本地Html数据
2、可以搭建Java和Javascript交互桥梁
3、WebView控件可以高度定制。

下面我们通过几个例子来共同学习WebView的使用方法。

一、先做一个例子热热身看看效果，例子：通过WebView访问本博客http://android.yaohuiji.com

1、先来一个简单的例子，新建一个项目Lesson29_WebView

2、因为要访问互联网所以先在AndroidManifest.xml中设定权限：

<?xmlversion="1.0"encoding="utf-8"?>
<manifestxmlns:android="http://schemas.android.com/apk/res/android"package="android.basic.lesson29"android:versioncode="1"android:versionname="1.0">
<applicationandroid:icon="@drawable/icon"android:label="@string/app_name">
<activityandroid:label="@string/app_name"android:name=".MainWebView">
<intent-filter="">
<actionandroid:name="android.intent.action.MAIN">
<categoryandroid:name="android.intent.category.LAUNCHER">
</category></action></intent>
</activity>

</application>
<uses-sdk=""android:minsdkversion="8">
<uses-permission=""android:name="android.permission.INTERNET">
</uses></uses></manifest>

3、在res/layout/main.xml中放置一个输入框，一个按钮和一个WebView：

<?xmlversion="1.0"encoding="utf-8"?>
<linearlayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#fff">
</linearlayout>
<linearlayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal"android:layout_width="fill_parent"android:layout_height="wrap_content">
<edittextandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="http://android.yaohuiji.com"android:id="@+id/EditText01"android:layout_weight="1">
</edittext>
<buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Go"android:id="@+id/Button01"android:layout_weight="0">
</button>
</linearlayout>

<webviewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="#fff"android:id="@+id/WebView01">
</webview>

4、在Activity文件的OnCreate方法中默认载入一个百度页面，点击按钮时载入预设的网址http://android.yaohuiji.com：

packageandroid.basic.lesson29;

importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.view.View;
importandroid.webkit.WebView;
importandroid.widget.Button;
importandroid.widget.EditText;

publicclassMainWebViewextendsActivity{

WebViewmWebView;

/**Calledwhentheactivityisfirstcreated.*/
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

//定义UI组件
mWebView=(WebView)findViewById(R.id.WebView01);
Buttonb1=(Button)findViewById(R.id.Button01);
finalEditTextet=(EditText)findViewById(R.id.EditText01);

//得到WebSetting对象，设置支持Javascript的参数
mWebView.getSettings().setJavaScriptEnabled(true);
//载入URL
mWebView.loadUrl("http://www.baidu.com");
//使页面获得焦点
mWebView.requestFocus();

//给按钮绑定单击监听器
b1.setOnClickListener(newView.OnClickListener(){

@Override
publicvoidonClick(Viewv){
//访问编辑框中的网址
mWebView.loadUrl(et.getText().toString());
}
});

}
}

5、运行程序，查看效果：<略>

二、补充一点基础知识：关于WebSettings

1、先看一下WebView的继承关系，可以看到它不是在 android.widget包中，而是在android.webkit包中。

2、WebSettings： WebView组件有一个辅助类叫WebSettings，它管理WebView的设置状态。该对象可以通过WebView.getSettings()方法获得。下面举几个例子来说明WebSettings的用法：

//得到WebSettings对象，设置支持Javascript的参数

mWebView.getSettings().setJavaScriptEnabled(true);

//设置可以支持缩放

mWebView.getSettings().setSupportZoom(true);

//设置默认缩放方式尺寸是far

mWebView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);

//设置出现缩放工具

mWebView.getSettings().setBuiltInZoomControls(true);

三、加载assets目录下的本地网页

WebView调用assets目录下的本地网页和图片等资源非常方便，使用形如

wv.loadUrl("file:///android_asset/html/test1.html");

的调用方法即可，代码在第四段落里。

在test1中点击链接也可以跳转到test2

四、使用 LoadData 方法加载内容

可以在Java文件中或者XML文件中定义HTML的片段，也可以在assets目录中存放HTML文件，然后使用LoadData加载其中的内容，展示出来。下面我们使用第三部分的网页来演示一下如何使用LoadData方法，并且看看他们之间的区别。

1、新建项目Lesson29_WebView2

2、新建2个Html文件在assets/html下，内容略去，res/layout/main.xml的内容也略去了，相信对你来说已经不成问题。

3、MainWebView2.java 的内容如下：

packageandroid.basic.lesson29;

importjava.io.IOException;
importjava.io.InputStream;

importorg.apache.http.util.ByteArrayBuffer;
importorg.apache.http.util.EncodingUtils;

importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.view.View;
importandroid.webkit.WebView;
importandroid.widget.Button;

publicclassMainWebView2extendsActivity{
/**Calledwhentheactivityisfirstcreated.*/
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

//定义UI组件
Buttonb1=(Button)findViewById(R.id.Button01);
Buttonb2=(Button)findViewById(R.id.Button02);

finalWebViewwv=(WebView)findViewById(R.id.WebView01);

//定义并绑定按钮单击监听器
b1.setOnClickListener(newView.OnClickListener(){
@Override
publicvoidonClick(Viewv){
//加载URLassets目录下的内容可以用"file:///android_asset"前缀
wv.loadUrl("file:///android_asset/html/test1.html");
}
});

//定义并绑定按钮单击监听器
b2.setOnClickListener(newView.OnClickListener(){
@Override
publicvoidonClick(Viewv){
Stringdata="";
try{
//读取assets目录下的文件需要用到AssetManager对象的Open方法打开文件
InputStreamis=getAssets().open("html/test2.html");
//loadData()方法需要的是一个字符串数据所以我们需要把文件转成字符串
ByteArrayBufferbaf=newByteArrayBuffer(500);
intcount=0;
while((count=is.read())!=-1){
baf.append(count);
}
data=EncodingUtils.getString(baf.toByteArray(),"utf-8");
}catch(IOExceptione){
e.printStackTrace();
}
//下面两种方法都可以加载成功
wv.loadData(data,"text/html","utf-8");
//wv.loadDataWithBaseURL("",data,"text/html","utf-8","");
}
});

}
}

4、运行程序单击第二个按钮，效果如下：<略>

对比上面的例子，我们可以看到两个明显的区别，其一，图片没加载出来，其二链接失效，点击后无法加载test1.html 。

五、两个和WebView相关的重要对象：WebChromeClient 和 WebViewClient

和WebView相关的辅助对象，除了WebSettings以外还有WebChromeClient和WebViewClient。

接下来的这个例子内容比较丰富，虽然注释比较清晰，但是您一次消化起来还是比较困难的，因此您需要的是一点点耐心，多看几遍，最重要的是自己至少敲代码敲一遍。

1、在上面的例子中继续增加内容，增加 test3.html 的内容：

<scripttype="text/JavaScript">
functionalertFuction(){
vara=1;
varb=2
alert(a+b);
}
functionconfirmFuction(){
confirm("你确定要删除吗?")
}

</script>

对话框测试
<inputonclick="alertFuction()"value="提醒对话框"type="button">
<inputonclick="confirmFuction()"value="选择对话框"type="button">

<ahref="test1.html">上一页</a>

2、MainWebView3.java的内容，请注意注释内容：

packageandroid.basic.lesson29;

importjava.io.FileOutputStream;

importandroid.app.Activity;
importandroid.app.AlertDialog;
importandroid.app.AlertDialog.Builder;
importandroid.content.DialogInterface;
importandroid.graphics.Bitmap;
importandroid.graphics.Canvas;
importandroid.graphics.Picture;
importandroid.os.Bundle;
importandroid.view.KeyEvent;
importandroid.view.View;
importandroid.webkit.JsPromptResult;
importandroid.webkit.JsResult;
importandroid.webkit.WebChromeClient;
importandroid.webkit.WebView;
importandroid.webkit.WebViewClient;
importandroid.widget.Button;
importandroid.widget.Toast;

publicclassMainWebView3extendsActivity{

/**Calledwhentheactivityisfirstcreated.*/
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

//定义UI组件
Buttonb1=(Button)findViewById(R.id.Button01);
Buttonb2=(Button)findViewById(R.id.Button02);
Buttonb3=(Button)findViewById(R.id.Button03);

finalWebViewwv=(WebView)findViewById(R.id.WebView01);

//覆盖默认后退按钮的作用，替换成WebView里的查看历史页面
wv.setOnKeyListener(newView.OnKeyListener(){

@Override
publicbooleanonKey(Viewv,intkeyCode,KeyEventevent){
if(event.getAction()==KeyEvent.ACTION_DOWN){
if((keyCode==KeyEvent.KEYCODE_BACK)&&wv.canGoBack()){
wv.goBack();
returntrue;
}
}
returnfalse;
}
});

//设置支持Javascript
wv.getSettings().setJavaScriptEnabled(true);

//定义并绑定按钮单击监听器
b1.setOnClickListener(newView.OnClickListener(){
@Override
publicvoidonClick(Viewv){
//加载URLassets目录下的内容可以用"file:///android_asset"前缀
wv.loadUrl("file:///android_asset/html/test1.html");
}
});

//定义并绑定按钮单击监听器
b2.setOnClickListener(newView.OnClickListener(){
@Override
publicvoidonClick(Viewv){
//加载URLassets目录下的内容可以用"file:///android_asset"前缀
wv.loadUrl("file:///android_asset/html/test3.html");
}
});

//定义并绑定按钮单击监听器
b3.setOnClickListener(newView.OnClickListener(){
@Override
publicvoidonClick(Viewv){
Picturepic=wv.capturePicture();
intwidth=pic.getWidth();
intheight=pic.getHeight();
if(width>0&&height>0){
Bitmapbmp=Bitmap.createBitmap(width,height,Bitmap.Config.ARGB_8888);
Canvascanvas=newCanvas(bmp);
pic.draw(canvas);
try{
StringfileName="sdcard/"+System.currentTimeMillis()+".png";
FileOutputStreamfos=newFileOutputStream(fileName);

if(fos!=null){
bmp.compress(Bitmap.CompressFormat.PNG,90,fos);
fos.close();
}
Toast.makeText(getApplicationContext(),"截图成功，文件名是："+fileName,Toast.LENGTH_SHORT).show();
}catch(Exceptione){
e.printStackTrace();
}
}
}
});

//创建WebViewClient对象
WebViewClientwvc=newWebViewClient(){

@Override
publicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){
Toast.makeText(getApplicationContext(),"WebViewClient.shouldOverrideUrlLoading",Toast.LENGTH_SHORT)
.show();
//使用自己的WebView组件来响应Url加载事件，而不是使用默认浏览器器加载页面
wv.loadUrl(url);
//记得消耗掉这个事件。给不知道的朋友再解释一下，Android中返回True的意思就是到此为止吧,事件就会不会冒泡传递了，我们称之为消耗掉
returntrue;
}

@Override
publicvoidonPageStarted(WebViewview,Stringurl,Bitmapfavicon){
Toast.makeText(getApplicationContext(),"WebViewClient.onPageStarted",Toast.LENGTH_SHORT).show();
super.onPageStarted(view,url,favicon);
}

@Override
publicvoidonPageFinished(WebViewview,Stringurl){
Toast.makeText(getApplicationContext(),"WebViewClient.onPageFinished",Toast.LENGTH_SHORT).show();
super.onPageFinished(view,url);
}

@Override
publicvoidonLoadResource(WebViewview,Stringurl){
Toast.makeText(getApplicationContext(),"WebViewClient.onLoadResource",Toast.LENGTH_SHORT).show();
super.onLoadResource(view,url);
}

};

//设置WebViewClient对象
wv.setWebViewClient(wvc);

//创建WebViewChromeClient
WebChromeClientwvcc=newWebChromeClient(){

//处理Alert事件
@Override
publicbooleanonJsAlert(WebViewview,Stringurl,Stringmessage,finalJsResultresult){
//构建一个Builder来显示网页中的alert对话框
Builderbuilder=newBuilder(MainWebView3.this);
builder.setTitle("计算1+2的值");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok,newAlertDialog.OnClickListener(){
@Override
publicvoidonClick(DialogInterfacedialog,intwhich){
result.confirm();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
returntrue;
}

@Override
publicvoidonReceivedTitle(WebViewview,Stringtitle){
MainWebView3.this.setTitle("可以用onReceivedTitle()方法修改网页标题");
super.onReceivedTitle(view,title);
}

//处理Confirm事件
@Override
publicbooleanonJsConfirm(WebViewview,Stringurl,Stringmessage,finalJsResultresult){
Builderbuilder=newBuilder(MainWebView3.this);
builder.setTitle("删除确认");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok,newAlertDialog.OnClickListener(){

@Override
publicvoidonClick(DialogInterfacedialog,intwhich){
result.confirm();
}

});
builder.setNeutralButton(android.R.string.cancel,newAlertDialog.OnClickListener(){

@Override
publicvoidonClick(DialogInterfacedialog,intwhich){
result.cancel();
}

});
builder.setCancelable(false);
builder.create();
builder.show();
returntrue;
}

//处理提示事件
@Override
publicbooleanonJsPrompt(WebViewview,Stringurl,Stringmessage,StringdefaultValue,
JsPromptResultresult){
//看看默认的效果
returnsuper.onJsPrompt(view,url,message,defaultValue,result);
}
};

//设置setWebChromeClient对象
wv.setWebChromeClient(wvcc);
}
}

3、运行程序，查看结果：<略>