(转)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中设定权限：

View Code

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="android.basic.lesson29" android:versioncode="1" android:versionname="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:label="@string/app_name" android:name=".MainWebView">
            <intent -filter="">
                <action android:name="android.intent.action.MAIN">
                <category android: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：

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

View Code

 1 package android.basic.lesson29;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.View;
 6 import android.webkit.WebView;
 7 import android.widget.Button;
 8 import android.widget.EditText;
 9 
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、运行程序，查看效果：

点击Go按钮，可以看到本博客出现，不过没有经过任何缩放处理，在接下里的例子我们继续研究，如何做更多的控制。

二、补充一点基础知识：关于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 的内容如下：

View Code

 1 package android.basic.lesson29;
 2 
 3 import java.io.IOException;
 4 import java.io.InputStream;
 5 
 6 import org.apache.http.util.ByteArrayBuffer;
 7 import org.apache.http.util.EncodingUtils;
 8 
 9 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、运行程序单击第二个按钮，效果如下：

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

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

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

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

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

View Code

     

     <script type="text/JavaScript">     
     function alertFuction(){ 
       var a=1;
       var b=2 
       alert(a+b);      
     }  
     function confirmFuction(){  
        confirm("你确定要删除吗?")  
     }  

     </script>   

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

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

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

View Code

  1 package android.basic.lesson29;
  2 
  3 import java.io.FileOutputStream;
  4 
  5 import android.app.Activity;
  6 import android.app.AlertDialog;
  7 import android.app.AlertDialog.Builder;
  8 import android.content.DialogInterface;
  9 import android.graphics.Bitmap;
 10 import android.graphics.Canvas;
 11 import android.graphics.Picture;
 12 import android.os.Bundle;
 13 import android.view.KeyEvent;
 14 import android.view.View;
 15 import android.webkit.JsPromptResult;
 16 import android.webkit.JsResult;
 17 import android.webkit.WebChromeClient;
 18 import android.webkit.WebView;
 19 import android.webkit.WebViewClient;
 20 import android.widget.Button;
 21 import android.widget.Toast;
 22 
 23 public class MainWebView3 extends Activity {
 24 
 25     /** Called when the activity is first created. */
 26     @Override
 27     public void onCreate(Bundle savedInstanceState) {
 28         super.onCreate(savedInstanceState);
 29         setContentView(R.layout.main);
 30 
 31         // 定义UI组件
 32         Button b1 = (Button) findViewById(R.id.Button01);
 33         Button b2 = (Button) findViewById(R.id.Button02);
 34         Button b3 = (Button) findViewById(R.id.Button03);
 35 
 36         final WebView wv = (WebView) findViewById(R.id.WebView01);
 37 
 38         // 覆盖默认后退按钮的作用，替换成WebView里的查看历史页面
 39         wv.setOnKeyListener(new View.OnKeyListener() {
 40 
 41             @Override
 42             public boolean onKey(View v, int keyCode, KeyEvent event) {
 43                 if (event.getAction() == KeyEvent.ACTION_DOWN) {
 44                     if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
 45                         wv.goBack();
 46                         return true;
 47                     }
 48                 }
 49                 return false;
 50             }
 51         });
 52 
 53         // 设置支持Javascript
 54         wv.getSettings().setJavaScriptEnabled(true);
 55 
 56         // 定义并绑定按钮单击监听器
 57         b1.setOnClickListener(new View.OnClickListener() {
 58             @Override
 59             public void onClick(View v) {
 60                 // 加载URL assets目录下的内容可以用 "file:///android_asset" 前缀
 61                 wv.loadUrl("file:///android_asset/html/test1.html");
 62             }
 63         });
 64 
 65         // 定义并绑定按钮单击监听器
 66         b2.setOnClickListener(new View.OnClickListener() {
 67             @Override
 68             public void onClick(View v) {
 69                 // 加载URL assets目录下的内容可以用 "file:///android_asset" 前缀
 70                 wv.loadUrl("file:///android_asset/html/test3.html");
 71             }
 72         });
 73 
 74         // 定义并绑定按钮单击监听器
 75         b3.setOnClickListener(new View.OnClickListener() {
 76             @Override
 77             public void onClick(View v) {
 78                 Picture pic = wv.capturePicture();
 79                 int width = pic.getWidth();
 80                 int height = pic.getHeight();
 81                 if (width > 0 && height > 0) {
 82                     Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
 83                     Canvas canvas = new Canvas(bmp);
 84                     pic.draw(canvas);
 85                     try {
 86                         String fileName = "sdcard/" + System.currentTimeMillis() + ".png";
 87                         FileOutputStream fos = new FileOutputStream(fileName);
 88 
 89                         if (fos != null) {
 90                             bmp.compress(Bitmap.CompressFormat.PNG, 90, fos);
 91                             fos.close();
 92                         }
 93                         Toast.makeText(getApplicationContext(), "截图成功，文件名是：" + fileName, Toast.LENGTH_SHORT).show();
 94                     } catch (Exception e) {
 95                         e.printStackTrace();
 96                     }
 97                 }
 98             }
 99         });
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 }