WebView的使用方法

使用WebView进行互联网程序开发有以下优点：
1、可以打开远程网址、也可以加载本地Html数据
2、可以搭建Java和Javascript交互桥梁
3、WebView控件可以高度定制。

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

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

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

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

view sourceprint?01 <?xml version="1.0" encoding="utf-8"?>

02 <MANIFEST android:versionname="1.0" android:versioncode="1" package="android.basic.lesson29" xmlns:android="http://schemas.android.com/apk/res/android">

03 <APPLICATION android:label="@string/app_name" android:icon="@drawable/icon">

04 <ACTIVITY android:label="@string/app_name" android:name=".MainWebView">

05 <INTENT -filter>

06 <ACTION android:name="android.intent.action.MAIN" />

07 <CATEGORY android:name="android.intent.category.LAUNCHER" />

08 </INTENT>

09 </ACTIVITY>

10

11 </APPLICATION>

12 <USES android:minsdkversion="8" -sdk />

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

14 </MANIFEST>


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

<?xml version="1.0" encoding="utf-8"?> 4、在Activity文件的OnCreate方法中默认载入一个百度页面，点击按钮时载入预设的网址http://android.yaohuiji.com ： view sourceprint?01 package android.basic.lesson29;

02

03 import android.app.Activity;

04 import android.os.Bundle;

05 import android.view.View;

06 import android.webkit.WebView;

07 import android.widget.Button;

08 import android.widget.EditText;

09

10 public class MainWebView extends Activity {

11

12 WebView mWebView;

13

14 /** Called when the activity is first created. */

15 @Override

16 public void onCreate(Bundle savedInstanceState) {

17 super.onCreate(savedInstanceState);

18 setContentView(R.layout.main);

19

20 //定义UI组件

21 mWebView = (WebView) findViewById(R.id.WebView01);

22 Button b1 = (Button) findViewById(R.id.Button01);

23 final EditText et = (EditText) findViewById(R.id.EditText01);

24

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

26 mWebView.getSettings().setJavaScriptEnabled(true);

27 //载入URL

28 mWebView.loadUrl("http://www.baidu.com");

29 //使页面获得焦点

30 mWebView.requestFocus();

31

32 //给按钮绑定单击监听器

33 b1.setOnClickListener(new View.OnClickListener() {

34

35 @Override

36 public void onClick(View v) {

37 //访问编辑框中的网址

38 mWebView.loadUrl(et.getText().toString());

39 }

40 });

41

42 }

43 }


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

[img]http://dl.iteye.com/upload/attachment/501430/c15be257-d920-3865-87b7-e25c95afba8a.png[/img]
点击Go按钮，可以看到本博客出现，不过没有经过任何缩放处理，在接下里的例子我们继续研究，如何做更多的控制。

[img]http://dl.iteye.com/upload/attachment/501432/dd135a69-2c05-3fc8-8cf6-d318148ff806.png[/img]
二、补充一点基础知识：关于WebSettings

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


[img]http://dl.iteye.com/upload/attachment/501434/e5b7ae6c-0f32-3141-9094-30fa5ce557a5.jpg[/img]
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");

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


[img]http://dl.iteye.com/upload/attachment/501436/93bc4df3-07ef-3cee-8e9a-dd762020858e.jpg[/img]
在test1中点击链接也可以跳转到test2


[img]http://dl.iteye.com/upload/attachment/501438/73b05a69-5863-3623-861e-c81a2db84987.png[/img]
四、使用 LoadData 方法加载内容

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

1、新建项目Lesson29_WebView2

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

3、MainWebView2.java 的内容如下：

view sourceprint?01 package android.basic.lesson29;

02

03 import java.io.IOException;

04 import java.io.InputStream;

05

06 import org.apache.http.util.ByteArrayBuffer;

07 import org.apache.http.util.EncodingUtils;

08

09 import android.app.Activity;

10 import android.os.Bundle;

11 import android.view.View;

12 import android.webkit.WebView;

13 import android.widget.Button;

14

15 public class MainWebView2 extends Activity {

16 /** Called when the activity is first created. */

17 @Override

18 public void onCreate(Bundle savedInstanceState) {

19 super.onCreate(savedInstanceState);

20 setContentView(R.layout.main);

21

22 //定义UI组件

23 Button b1 = (Button) findViewById(R.id.Button01);

24 Button b2 = (Button) findViewById(R.id.Button02);

25

26 final WebView wv = (WebView) findViewById(R.id.WebView01);

27

28 //定义并绑定按钮单击监听器

29 b1.setOnClickListener(new View.OnClickListener() {

30 @Override

31 public void onClick(View v) {

32 //加载URL assets目录下的内容可以用 "file:///android_asset" 前缀

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

34 }

35 });

36

37 //定义并绑定按钮单击监听器

38 b2.setOnClickListener(new View.OnClickListener() {

39 @Override

40 public void onClick(View v) {

41 String data = "";

42 try {

43 // 读取assets目录下的文件需要用到AssetManager对象的Open方法打开文件

44 InputStream is = getAssets().open("html/test2.html");

45 // loadData()方法需要的是一个字符串数据所以我们需要把文件转成字符串

46 ByteArrayBuffer baf = new ByteArrayBuffer(500);

47 int count = 0;

48 while ((count = is.read()) != -1) {

49 baf.append(count);

50 }

51 data = EncodingUtils.getString(baf.toByteArray(), "utf-8");

52 } catch (IOException e) {

53 e.printStackTrace();

54 }

55 // 下面两种方法都可以加载成功

56 wv.loadData(data, "text/html", "utf-8");

57 // wv.loadDataWithBaseURL("", data, "text/html", "utf-8", "");

58 }

59 });

60

61 }

62 }


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


[img]http://dl.iteye.com/upload/attachment/501441/41a6cf4b-4113-3a50-b3bb-2269de0e61ea.png[/img]
对比上面的例子，我们可以看到两个明显的区别，其一，图片没加载出来，其二链接失效，点击后无法加载test1.html 。

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

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

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

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

view sourceprint?01 <HTML xmlns="http://www.w3.org/1999/xhtml">

02

03 <HTML xmlns="http://www.w3.org/1999/xhtml">

04 <HEAD>

05

06 <SCRIPT type=text/JavaScript>

07 function alertFuction(){

08 var a=1;

09 var b=2

10 alert(a+b);

11 }

12 function confirmFuction(){

13 confirm("你确定要删除吗?")

14 }

15 </SCRIPT>

16

17 对话框测试

18 <INPUT οnclick=alertFuction() value=提醒对话框 type=button>

19 <INPUT οnclick=confirmFuction() value=选择对话框 type=button>

20

21 <A href="test1.html">上一页</A>


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

view sourceprint?001 package android.basic.lesson29;

002

003 import java.io.FileOutputStream;

004

005 import android.app.Activity;

006 import android.app.AlertDialog;

007 import android.app.AlertDialog.Builder;

008 import android.content.DialogInterface;

009 import android.graphics.Bitmap;

010 import android.graphics.Canvas;

011 import android.graphics.Picture;

012 import android.os.Bundle;

013 import android.view.KeyEvent;

014 import android.view.View;

015 import android.webkit.JsPromptResult;

016 import android.webkit.JsResult;

017 import android.webkit.WebChromeClient;

018 import android.webkit.WebView;

019 import android.webkit.WebViewClient;

020 import android.widget.Button;

021 import android.widget.Toast;

022

023 public class MainWebView3 extends Activity {

024

025 /** Called when the activity is first created. */

026 @Override

027 public void onCreate(Bundle savedInstanceState) {

028 super.onCreate(savedInstanceState);

029 setContentView(R.layout.main);

030

031 // 定义UI组件

032 Button b1 = (Button) findViewById(R.id.Button01);

033 Button b2 = (Button) findViewById(R.id.Button02);

034 Button b3 = (Button) findViewById(R.id.Button03);

035

036 final WebView wv = (WebView) findViewById(R.id.WebView01);

037

038 // 覆盖默认后退按钮的作用，替换成WebView里的查看历史页面

039 wv.setOnKeyListener(new View.OnKeyListener() {

040

041 @Override

042 public boolean onKey(View v, int keyCode, KeyEvent event) {

043 if (event.getAction() == KeyEvent.ACTION_DOWN) {

044 if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {

045 wv.goBack();

046 return true;

047 }

048 }

049 return false;

050 }

051 });

052

053 // 设置支持Javascript

054 wv.getSettings().setJavaScriptEnabled(true);

055

056 // 定义并绑定按钮单击监听器

057 b1.setOnClickListener(new View.OnClickListener() {

058 @Override

059 public void onClick(View v) {

060 // 加载URL assets目录下的内容可以用 "file:///android_asset" 前缀

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

062 }

063 });

064

065 // 定义并绑定按钮单击监听器

066 b2.setOnClickListener(new View.OnClickListener() {

067 @Override

068 public void onClick(View v) {

069 // 加载URL assets目录下的内容可以用 "file:///android_asset" 前缀

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

071 }

072 });

073

074 // 定义并绑定按钮单击监听器

075 b3.setOnClickListener(new View.OnClickListener() {

076 @Override

077 public void onClick(View v) {

078 Picture pic = wv.capturePicture();

079 int width = pic.getWidth();

080 int height = pic.getHeight();

081 if (width > 0 && height > 0) {

082 Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

083 Canvas canvas = new Canvas(bmp);

084 pic.draw(canvas);

085 try {

086 String fileName = "sdcard/" + System.currentTimeMillis() + ".png";

087 FileOutputStream fos = new FileOutputStream(fileName);

088

089 if (fos != null) {

090 bmp.compress(Bitmap.CompressFormat.PNG, 90, fos);

091 fos.close();

092 }

093 Toast.makeText(getApplicationContext(), "截图成功，文件名是：" + fileName, Toast.LENGTH_SHORT).show();

094 } catch (Exception e) {

095 e.printStackTrace();

096 }

097 }

098 }

099 });

100

101 // 创建WebViewClient对象

102 WebViewClient wvc = new WebViewClient() {

103

104 @Override

105 public boolean shouldOverrideUrlLoading(WebView view, String url) {

106 Toast.makeText(getApplicationContext(), "WebViewClient.shouldOverrideUrlLoading", Toast.LENGTH_SHORT)

107 .show();

108 // 使用自己的WebView组件来响应Url加载事件，而不是使用默认浏览器器加载页面

109 wv.loadUrl(url);

110 // 记得消耗掉这个事件。给不知道的朋友再解释一下，Android中返回True的意思就是到此为止吧,事件就会不会冒泡传递了，我们称之为消耗掉

111 return true;

112 }

113

114 @Override

115 public void onPageStarted(WebView view, String url, Bitmap favicon) {

116 Toast.makeText(getApplicationContext(), "WebViewClient.onPageStarted", Toast.LENGTH_SHORT).show();

117 super.onPageStarted(view, url, favicon);

118 }

119

120 @Override

121 public void onPageFinished(WebView view, String url) {

122 Toast.makeText(getApplicationContext(), "WebViewClient.onPageFinished", Toast.LENGTH_SHORT).show();

123 super.onPageFinished(view, url);

124 }

125

126 @Override

127 public void onLoadResource(WebView view, String url) {

128 Toast.makeText(getApplicationContext(), "WebViewClient.onLoadResource", Toast.LENGTH_SHORT).show();

129 super.onLoadResource(view, url);

130 }

131

132 };

133

134 // 设置WebViewClient对象

135 wv.setWebViewClient(wvc);

136

137 // 创建WebViewChromeClient

138 WebChromeClient wvcc = new WebChromeClient() {

139

140 // 处理Alert事件

141 @Override

142 public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {

143 // 构建一个Builder来显示网页中的alert对话框

144 Builder builder = new Builder(MainWebView3.this);

145 builder.setTitle("计算1+2的值");

146 builder.setMessage(message);

147 builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {

148 @Override

149 public void onClick(DialogInterface dialog, int which) {

150 result.confirm();

151 }

152 });

153 builder.setCancelable(false);

154 builder.create();

155 builder.show();

156 return true;

157 }

158

159 @Override

160 public void onReceivedTitle(WebView view, String title) {

161 MainWebView3.this.setTitle("可以用onReceivedTitle()方法修改网页标题");

162 super.onReceivedTitle(view, title);

163 }

164

165 // 处理Confirm事件

166 @Override

167 public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {

168 Builder builder = new Builder(MainWebView3.this);

169 builder.setTitle("删除确认");

170 builder.setMessage(message);

171 builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {

172

173 @Override

174 public void onClick(DialogInterface dialog, int which) {

175 result.confirm();

176 }

177

178 });

179 builder.setNeutralButton(android.R.string.cancel, new AlertDialog.OnClickListener() {

180

181 @Override

182 public void onClick(DialogInterface dialog, int which) {

183 result.cancel();

184 }

185

186 });

187 builder.setCancelable(false);

188 builder.create();

189 builder.show();

190 return true;

191 }

192

193 // 处理提示事件

194 @Override

195 public boolean onJsPrompt(WebView view, String url, String message, String defaultValue,

196 JsPromptResult result) {

197 // 看看默认的效果

198 return super.onJsPrompt(view, url, message, defaultValue, result);

199 }

200 };

201

202 // 设置setWebChromeClient对象

203 wv.setWebChromeClient(wvcc);

204 }

205 }


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


[img]http://dl.iteye.com/upload/attachment/501443/90ab38f3-d002-30be-a7e2-30a5230a902c.png[/img]

[img]http://dl.iteye.com/upload/attachment/501445/08a943a5-8586-31a6-9339-bec758f22293.png[/img]

[img]http://dl.iteye.com/upload/attachment/501447/c9d8bbbd-2c44-30c7-9478-36f87df514b0.png[/img]

[img]http://dl.iteye.com/upload/attachment/501449/8c13ce57-901b-3fb0-821d-b3b4fcc4d3f0.png[/img]

[img]http://dl.iteye.com/upload/attachment/501451/1afea226-8fb3-3bde-8306-b3e31afaba3f.png[/img]

[img]http://dl.iteye.com/upload/attachment/501453/a6a63608-7ae4-372f-ae57-1a338b8e5fcc.png[/img]

[img]http://dl.iteye.com/upload/attachment/501455/ad5304f9-3071-30b3-b36f-0bbf4cea3a08.png[/img]