登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

查看: 979611|回复: 90

第二十九讲:WebView学习指南

  [复制链接]

0

主题

0

帖子

-16

安币

限制会员

发表于 2011-4-29 13:23:07 | 显示全部楼层 |阅读模式
本帖最后由 andbus 于 2011-4-29 13:37 编辑

本讲内容: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中设定权限:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="android.basic.lesson29" android:versioncode="1" android:versionname="1.0">
  3.     <application android:icon="@drawable/icon" android:label="@string/app_name">
  4.         <activity android:label="@string/app_name" android:name=".MainWebView">
  5.             <intent -filter="">
  6.                 <action android:name="android.intent.action.MAIN">
  7.                 <category android:name="android.intent.category.LAUNCHER">
  8.             </category></action></intent>
  9.         </activity>

  10.     </application>
  11.     <uses -sdk="" android:minsdkversion="8">
  12.         <uses -permission="" android:name="android.permission.INTERNET">
  13. </uses></uses></manifest>
复制代码
3、在res/layout/main.xml中放置一个输入框,一个按钮和一个WebView:
<?xml version="1.0" encoding="utf-8"?>  4、在Activity文件的OnCreate方法中默认载入一个百度页面,点击按钮时载入预设的网址http://android.yaohuiji.com
  1. package android.basic.lesson29;

  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.webkit.WebView;
  6. import android.widget.Button;
  7. import android.widget.EditText;

  8. public class MainWebView extends Activity {

  9.         WebView mWebView;

  10.         /** Called when the activity is first created. */
  11.         @Override
  12.         public void onCreate(Bundle savedInstanceState) {
  13.                 super.onCreate(savedInstanceState);
  14.                 setContentView(R.layout.main);

  15.                 //定义UI组件
  16.                 mWebView = (WebView) findViewById(R.id.WebView01);
  17.                 Button b1 = (Button) findViewById(R.id.Button01);
  18.                 final EditText et = (EditText) findViewById(R.id.EditText01);

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

  25.                 //给按钮绑定单击监听器
  26.                 b1.setOnClickListener(new View.OnClickListener() {

  27.                         @Override
  28.                         public void onClick(View v) {
  29.                                 //访问编辑框中的网址
  30.                                 mWebView.loadUrl(et.getText().toString());
  31.                         }
  32.                 });

  33.         }
  34. }
复制代码
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

  1. package android.basic.lesson29;

  2. import java.io.IOException;
  3. import java.io.InputStream;

  4. import org.apache.http.util.ByteArrayBuffer;
  5. import org.apache.http.util.EncodingUtils;

  6. import android.app.Activity;
  7. import android.os.Bundle;
  8. import android.view.View;
  9. import android.webkit.WebView;
  10. import android.widget.Button;

  11. public class MainWebView2 extends Activity {
  12.         /** Called when the activity is first created. */
  13.         @Override
  14.         public void onCreate(Bundle savedInstanceState) {
  15.                 super.onCreate(savedInstanceState);
  16.                 setContentView(R.layout.main);

  17.                 //定义UI组件
  18.                 Button b1 = (Button) findViewById(R.id.Button01);
  19.                 Button b2 = (Button) findViewById(R.id.Button02);

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

  21.                 //定义并绑定按钮单击监听器
  22.                 b1.setOnClickListener(new View.OnClickListener() {
  23.                         @Override
  24.                         public void onClick(View v) {
  25.                                 //加载URL assets目录下的内容可以用 "file:///android_asset" 前缀
  26.                                 wv.loadUrl("file:///android_asset/html/test1.html");
  27.                         }
  28.                 });

  29.                 //定义并绑定按钮单击监听器
  30.                 b2.setOnClickListener(new View.OnClickListener() {
  31.                         @Override
  32.                         public void onClick(View v) {
  33.                                 String data = "";
  34.                                 try {
  35.                                         // 读取assets目录下的文件需要用到AssetManager对象的Open方法打开文件
  36.                                         InputStream is = getAssets().open("html/test2.html");
  37.                                         // loadData()方法需要的是一个字符串数据所以我们需要把文件转成字符串
  38.                                         ByteArrayBuffer baf = new ByteArrayBuffer(500);
  39.                                         int count = 0;
  40.                                         while ((count = is.read()) != -1) {
  41.                                                 baf.append(count);
  42.                                         }
  43.                                         data = EncodingUtils.getString(baf.toByteArray(), "utf-8");
  44.                                 } catch (IOException e) {
  45.                                         e.printStackTrace();
  46.                                 }
  47.                                 // 下面两种方法都可以加载成功
  48.                                 wv.loadData(data, "text/html", "utf-8");
  49.                                 // wv.loadDataWithBaseURL("", data, "text/html", "utf-8", "");
  50.                         }
  51.                 });

  52.         }
  53. }
复制代码

4、运行程序单击第二个按钮,效果如下:[url=http://android.yaohuiji.com/wp-content/uploads/2010/08/image40.png]

对比上面的例子,我们可以看到两个明显的区别,其一,图片没加载出来,其二链接失效,点击后无法加载test1.html 。五、两个和WebView相关的重要对象:WebChromeClient  和 WebViewClient和WebView相关的辅助对象,除了WebSettings以外还有WebChromeClient和WebViewClient。接下来的这个例子内容比较丰富,虽然注释比较清晰,但是您一次消化起来还是比较困难的,因此您需要的是一点点耐心,多看几遍,最重要的是自己至少敲代码敲一遍。1、在上面的例子中继续增加内容,增加 test3.html 的内容:



  1.      

  2.      <script type="text/JavaScript">     
  3.      function alertFuction(){
  4.        var a=1;
  5.        var b=2
  6.        alert(a+b);      
  7.      }  
  8.      function confirmFuction(){  
  9.         confirm("你确定要删除吗?")  
  10.      }  

  11.      </script>   

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

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

  16.   
复制代码

2、MainWebView3.java的内容,请注意注释内容:
  1. package android.basic.lesson29;

  2. import java.io.FileOutputStream;

  3. import android.app.Activity;
  4. import android.app.AlertDialog;
  5. import android.app.AlertDialog.Builder;
  6. import android.content.DialogInterface;
  7. import android.graphics.Bitmap;
  8. import android.graphics.Canvas;
  9. import android.graphics.Picture;
  10. import android.os.Bundle;
  11. import android.view.KeyEvent;
  12. import android.view.View;
  13. import android.webkit.JsPromptResult;
  14. import android.webkit.JsResult;
  15. import android.webkit.WebChromeClient;
  16. import android.webkit.WebView;
  17. import android.webkit.WebViewClient;
  18. import android.widget.Button;
  19. import android.widget.Toast;

  20. public class MainWebView3 extends Activity {

  21.         /** Called when the activity is first created. */
  22.         @Override
  23.         public void onCreate(Bundle savedInstanceState) {
  24.                 super.onCreate(savedInstanceState);
  25.                 setContentView(R.layout.main);

  26.                 // 定义UI组件
  27.                 Button b1 = (Button) findViewById(R.id.Button01);
  28.                 Button b2 = (Button) findViewById(R.id.Button02);
  29.                 Button b3 = (Button) findViewById(R.id.Button03);

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

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

  33.                         @Override
  34.                         public boolean onKey(View v, int keyCode, KeyEvent event) {
  35.                                 if (event.getAction() == KeyEvent.ACTION_DOWN) {
  36.                                         if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
  37.                                                 wv.goBack();
  38.                                                 return true;
  39.                                         }
  40.                                 }
  41.                                 return false;
  42.                         }
  43.                 });

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

  46.                 // 定义并绑定按钮单击监听器
  47.                 b1.setOnClickListener(new View.OnClickListener() {
  48.                         @Override
  49.                         public void onClick(View v) {
  50.                                 // 加载URL assets目录下的内容可以用 "file:///android_asset" 前缀
  51.                                 wv.loadUrl("file:///android_asset/html/test1.html");
  52.                         }
  53.                 });

  54.                 // 定义并绑定按钮单击监听器
  55.                 b2.setOnClickListener(new View.OnClickListener() {
  56.                         @Override
  57.                         public void onClick(View v) {
  58.                                 // 加载URL assets目录下的内容可以用 "file:///android_asset" 前缀
  59.                                 wv.loadUrl("file:///android_asset/html/test3.html");
  60.                         }
  61.                 });

  62.                 // 定义并绑定按钮单击监听器
  63.                 b3.setOnClickListener(new View.OnClickListener() {
  64.                         @Override
  65.                         public void onClick(View v) {
  66.                                 Picture pic = wv.capturePicture();
  67.                                 int width = pic.getWidth();
  68.                                 int height = pic.getHeight();
  69.                                 if (width > 0 && height > 0) {
  70.                                         Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
  71.                                         Canvas canvas = new Canvas(bmp);
  72.                                         pic.draw(canvas);
  73.                                         try {
  74.                                                 String fileName = "sdcard/" + System.currentTimeMillis() + ".png";
  75.                                                 FileOutputStream fos = new FileOutputStream(fileName);

  76.                                                 if (fos != null) {
  77.                                                         bmp.compress(Bitmap.CompressFormat.PNG, 90, fos);
  78.                                                         fos.close();
  79.                                                 }
  80.                                                 Toast.makeText(getApplicationContext(), "截图成功,文件名是:" + fileName, Toast.LENGTH_SHORT).show();
  81.                                         } catch (Exception e) {
  82.                                                 e.printStackTrace();
  83.                                         }
  84.                                 }
  85.                         }
  86.                 });

  87.                 // 创建WebViewClient对象
  88.                 WebViewClient wvc = new WebViewClient() {

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

  98.                         @Override
  99.                         public void onPageStarted(WebView view, String url, Bitmap favicon) {
  100.                                 Toast.makeText(getApplicationContext(), "WebViewClient.onPageStarted", Toast.LENGTH_SHORT).show();
  101.                                 super.onPageStarted(view, url, favicon);
  102.                         }

  103.                         @Override
  104.                         public void onPageFinished(WebView view, String url) {
  105.                                 Toast.makeText(getApplicationContext(), "WebViewClient.onPageFinished", Toast.LENGTH_SHORT).show();
  106.                                 super.onPageFinished(view, url);
  107.                         }

  108.                         @Override
  109.                         public void onLoadResource(WebView view, String url) {
  110.                                 Toast.makeText(getApplicationContext(), "WebViewClient.onLoadResource", Toast.LENGTH_SHORT).show();
  111.                                 super.onLoadResource(view, url);
  112.                         }

  113.                 };

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

  116.                 // 创建WebViewChromeClient
  117.                 WebChromeClient wvcc = new WebChromeClient() {

  118.                         // 处理Alert事件
  119.                         @Override
  120.                         public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
  121.                                 // 构建一个Builder来显示网页中的alert对话框
  122.                                 Builder builder = new Builder(MainWebView3.this);
  123.                                 builder.setTitle("计算1+2的值");
  124.                                 builder.setMessage(message);
  125.                                 builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
  126.                                         @Override
  127.                                         public void onClick(DialogInterface dialog, int which) {
  128.                                                 result.confirm();
  129.                                         }
  130.                                 });
  131.                                 builder.setCancelable(false);
  132.                                 builder.create();
  133.                                 builder.show();
  134.                                 return true;
  135.                         }

  136.                         @Override
  137.                         public void onReceivedTitle(WebView view, String title) {
  138.                                 MainWebView3.this.setTitle("可以用onReceivedTitle()方法修改网页标题");
  139.                                 super.onReceivedTitle(view, title);
  140.                         }

  141.                         // 处理Confirm事件
  142.                         @Override
  143.                         public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
  144.                                 Builder builder = new Builder(MainWebView3.this);
  145.                                 builder.setTitle("删除确认");
  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.setNeutralButton(android.R.string.cancel, new AlertDialog.OnClickListener() {

  154.                                         @Override
  155.                                         public void onClick(DialogInterface dialog, int which) {
  156.                                                 result.cancel();
  157.                                         }

  158.                                 });
  159.                                 builder.setCancelable(false);
  160.                                 builder.create();
  161.                                 builder.show();
  162.                                 return true;
  163.                         }

  164.                         // 处理提示事件
  165.                         @Override
  166.                         public boolean onJsPrompt(WebView view, String url, String message, String defaultValue,
  167.                                         JsPromptResult result) {
  168.                                 // 看看默认的效果
  169.                                 return super.onJsPrompt(view, url, message, defaultValue, result);
  170.                         }
  171.                 };

  172.                 // 设置setWebChromeClient对象
  173.                 wv.setWebChromeClient(wvcc);
  174.         }
  175. }
复制代码

3、运行程序,查看结果:
[/url]
启动起来时的画面
[url=http://android.yaohuiji.com/wp-content/uploads/2010/08/image42.png]

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

[/url]

点击第二个按钮,我们看到加载的网页中有两个按钮,我们知道默认情况下Android会直接忽略掉由javascript弄出来的alert等弹出信息,除非我们在WebChromeClient中覆盖onJsAlert()方法和onJsConfirm()方法,让我们分别点击它们看看效果。[url=http://android.yaohuiji.com/wp-content/uploads/2010/08/image44.png]


[/url]

接下来我们再页面中跳转几次后,使用后退按钮[url=http://android.yaohuiji.com/wp-content/uploads/2010/08/JC4ZZPBJHHNCIVGS5L.jpg]
,查看我们是否屏蔽了Activity默认的行为,结果当然是屏蔽了^_^,这一段代码没有留意的同学回去在看一下吧。接下来我们把页面切换到这一个网页:

[/url]
然后我们按下第三个保存图片的按钮,不出意外的话我们截取到了该页的完整图片,并把它保存到了sdcard中了,我在这里展示一下我截取的效果给你看,别被它清晰的效果吓住就行^_^
[url=http://android.yaohuiji.com/wp-content/uploads/2010/08/1282569949780.png]


好了,因为篇幅关系,我们关于WebView的功能也只能介绍到这里,关于WebView的其它功能我们在接下来的项目中会涉及到,到时候我们再一起学习,本讲就到这里吧,各位下次再见。



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

1

主题

182

帖子

73

安币

程序猿

Rank: 2

发表于 2011-9-22 14:19:59 | 显示全部楼层
很好,很强大!

0

主题

47

帖子

35

安币

程序猿

Rank: 2

发表于 2011-10-24 23:28:49 | 显示全部楼层
很好,很强大

0

主题

52

帖子

29

安币

程序猿

Rank: 2

发表于 2011-12-1 21:16:13 | 显示全部楼层
LoadData与 loadurl
的区别?

0

主题

83

帖子

206

安币

攻城狮

Rank: 3Rank: 3

发表于 2012-3-2 17:16:46 | 显示全部楼层
WebViewClient对象方法测试
WebViewChromeClient对象方法测试
这两个测试是一样的啊?

0

主题

17

帖子

16

安币

初级码农

Rank: 1

发表于 2012-3-24 14:14:56 | 显示全部楼层
我找你的做了 怎么做不了呢 第一步就不不行显示是:XML document structures must start and end within the same entity.怎么回事啊??

0

主题

28

帖子

77

安币

初级码农

Rank: 1

QQ达人

发表于 2012-3-25 21:48:16 | 显示全部楼层
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent">
  6.    
  7.    
  8.     <LinearLayout   
  9.         android:orientation="horizontal"  
  10.         android:layout_width="fill_parent"   
  11.        android:layout_height="fill_parent"   
  12.         android:animationCache="true"   
  13.         android:layout_weight="9">  
  14.         <EditText   
  15.             android:id="@+id/EditText01"   
  16.             android:layout_width="wrap_content"  
  17.             android:layout_weight="9"   
  18.             android:layout_height="wrap_content"  
  19.             android:hint="请输入网址"
  20.             />  
  21.         <Button android:id="@+id/Button01"   
  22.             android:layout_width="wrap_content"  
  23.             android:layout_weight="1"   
  24.             android:layout_height="wrap_content"  
  25.             android:text="连接" />  
  26.     </LinearLayout>  
  27.    
  28.       
  29.      <WebView   
  30.        android:id="@+id/WebView01"   
  31.        android:layout_width="fill_parent"   
  32.        android:layout_height="fill_parent"      
  33.        android:layout_weight="1"  
  34.      />

  35.    



  36. </LinearLayout>
复制代码
main.xml中布局文件代码。。。

0

主题

28

帖子

77

安币

初级码农

Rank: 1

QQ达人

发表于 2012-3-25 21:50:08 | 显示全部楼层
还有输入框输入的网址必须加   http://   不然就跳转不了,而且网站跳转后用的是系统的浏览器了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站长推荐

通过邮件订阅最新安卓weekly信息
上一条 /4 下一条

下载安卓巴士客户端

全国最大的安卓开发者社区
联系我们
关闭
合作电话:
15618560077
Email:
805941275@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表