WebView - 走看看

WebView

转：http://android.yaohuiji.com/archives/tag/websettings

今天我们来学习一个可以显示网页的控件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中设定权限：

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

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

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

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
            </category></action></intent>

09
        </activity>

10
 
11
    </application>

12
    <uses -sdk="" android:minsdkversion="8">

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

14
</uses></uses></manifest>

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

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

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

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、运行程序，查看效果：

点击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 的内容如下：

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、运行程序单击第二个按钮，效果如下：

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

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

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

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

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

01
   
02
   
03
   
04
  <script type="text/JavaScript">    

05
  function alertFuction(){

06
    var a=1;

07
    var b=2

08
    alert(a+b);     

09
  } 

10
  function confirmFuction(){ 

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

12
  } 

13
 
14
  </script>  

15
   
16
 
17
<p>对话框测试</p> 

18
<input onclick="alertFuction()" value="提醒对话框" type="button"> 

19
<br><br> 

20
<input onclick="confirmFuction()" value="选择对话框" type="button"> 

21
<br><br> 

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

23
   
24
 
25

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

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, finalJsResult 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, newAlertDialog.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, newAlertDialog.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, newAlertDialog.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、运行程序，查看结果：

启动起来时的画面

点击第一个按钮，我们可以看到WebViewClient对象中定义的方法的确被调用了。

点击第二个按钮，我们看到加载的网页中有两个按钮，我们知道默认情况下Android会直接忽略掉由javascript弄出来的alert等弹出信息，除非我们在WebChromeClient中覆盖onJsAlert()方法和onJsConfirm()方法，让我们分别点击它们看看效果。

接下来我们再页面中跳转几次后，使用后退按钮，查看我们是否屏蔽了Activity默认的行为，结果当然是屏蔽了^_^，这一段代码没有留意的同学回去在看一下吧。

接下来我们把页面切换到这一个网页：

然后我们按下第三个保存图片的按钮，不出意外的话我们截取到了该页的完整图片，并把它保存到了sdcard中了，我在这里展示一下我截取的效果给你看，别被它清晰的效果吓住就行^_^