webView应用

最新推荐文章于 2021-05-11 11:50:52 发布

默默的偷学者

最新推荐文章于 2021-05-11 11:50:52 发布

阅读量808

点赞数

分类专栏： androidweb android小知识补充

android小知识补充同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

androidweb

2 篇文章 0 订阅

订阅专栏

转载地址：

http://android.yaohuiji.com/archives/734

今天我们来学习一个可以显示网页的控件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<?xmlversion="1.0"encoding="utf-8"?>
 
   02<manifestxmlns:android="http://schemas.android.com/apk/res/android"package="android.basic.lesson29"android:versioncode="1"android:versionname="1.0">
 
   03    <applicationandroid:icon="@drawable/icon"android:label="@string/app_name">
 
   04        <activityandroid:label="@string/app_name"android:name=".MainWebView">
 
   05            <intent-filter="">
 
   06                <actionandroid:name="android.intent.action.MAIN">
 
   07                <categoryandroid: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 ：

 
   01package android.basic.lesson29;
 
   02 
 
   03import android.app.Activity;
 
   04import android.os.Bundle;
 
   05import android.view.View;
 
   06import android.webkit.WebView;
 
   07import android.widget.Button;
 
   08import android.widget.EditText;
 
   09 
 
   10public classMainWebViewextends Activity {
 
   11 
 
   12    WebView mWebView;
 
   13 
 
   14    /** Called when the activity is first created. */
 
   15    @Override
 
   16    publicvoidonCreate(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        finalEditText 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(newView.OnClickListener() {
 
   34 
 
   35            @Override
 
   36            publicvoidonClick(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 的内容如下：

 
   01package android.basic.lesson29;
 
   02 
 
   03import java.io.IOException;
 
   04import java.io.InputStream;
 
   05 
 
   06import org.apache.http.util.ByteArrayBuffer;
 
   07import org.apache.http.util.EncodingUtils;
 
   08 
 
   09import android.app.Activity;
 
   10import android.os.Bundle;
 
   11import android.view.View;
 
   12import android.webkit.WebView;
 
   13import android.widget.Button;
 
   14 
 
   15public classMainWebView2extends Activity {
 
   16    /** Called when the activity is first created. */
 
   17    @Override
 
   18    publicvoidonCreate(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        finalWebView wv = (WebView) findViewById(R.id.WebView01);
 
   27 
 
   28        //定义并绑定按钮单击监听器
 
   29        b1.setOnClickListener(newView.OnClickListener() {
 
   30            @Override
 
   31            publicvoidonClick(View v) {
 
   32                //加载URL assets目录下的内容可以用 "file:///android_asset" 前缀
 
   33                wv.loadUrl("file:///android_asset/html/test1.html");
 
   34            }
 
   35        });
 
   36         
 
   37        //定义并绑定按钮单击监听器
 
   38        b2.setOnClickListener(newView.OnClickListener() {
 
   39            @Override
 
   40            publicvoidonClick(View v) {              
 
   41                String data ="";
 
   42                try{
 
   43                    // 读取assets目录下的文件需要用到AssetManager对象的Open方法打开文件
 
   44                    InputStream is = getAssets().open("html/test2.html");
 
   45                    // loadData()方法需要的是一个字符串数据所以我们需要把文件转成字符串
 
   46                    ByteArrayBuffer baf =newByteArrayBuffer(500);
 
   47                    intcount =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  <scripttype="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<inputonclick="alertFuction()"value="提醒对话框"type="button"> 
 
   19<br><br> 
 
   20<inputonclick="confirmFuction()"value="选择对话框"type="button"> 
 
   21<br><br> 
 
   22<a  href="test1.html">上一页</a>
 
   23   
 
   24 
 
   25

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

 
   001package android.basic.lesson29;
 
   002 
 
   003import java.io.FileOutputStream;
 
   004 
 
   005import android.app.Activity;
 
   006import android.app.AlertDialog;
 
   007import android.app.AlertDialog.Builder;
 
   008import android.content.DialogInterface;
 
   009import android.graphics.Bitmap;
 
   010import android.graphics.Canvas;
 
   011import android.graphics.Picture;
 
   012import android.os.Bundle;
 
   013import android.view.KeyEvent;
 
   014import android.view.View;
 
   015import android.webkit.JsPromptResult;
 
   016import android.webkit.JsResult;
 
   017import android.webkit.WebChromeClient;
 
   018import android.webkit.WebView;
 
   019import android.webkit.WebViewClient;
 
   020import android.widget.Button;
 
   021import android.widget.Toast;
 
   022 
 
   023public classMainWebView3extends Activity {
 
   024 
 
   025    /** Called when the activity is first created. */
 
   026    @Override
 
   027    publicvoidonCreate(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        finalWebView wv = (WebView) findViewById(R.id.WebView01);
 
   037 
 
   038        // 覆盖默认后退按钮的作用，替换成WebView里的查看历史页面
 
   039        wv.setOnKeyListener(newView.OnKeyListener() {
 
   040 
 
   041            @Override
 
   042            publicbooleanonKey(View v, intkeyCode, KeyEvent event) {
 
   043                if(event.getAction() == KeyEvent.ACTION_DOWN) {
 
   044                    if((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
 
   045                        wv.goBack();
 
   046                        returntrue;
 
   047                    }
 
   048                }
 
   049                returnfalse;
 
   050            }
 
   051        });
 
   052 
 
   053        // 设置支持Javascript
 
   054        wv.getSettings().setJavaScriptEnabled(true);
 
   055 
 
   056        // 定义并绑定按钮单击监听器
 
   057        b1.setOnClickListener(newView.OnClickListener() {
 
   058            @Override
 
   059            publicvoidonClick(View v) {
 
   060                // 加载URL assets目录下的内容可以用 "file:///android_asset" 前缀
 
   061                wv.loadUrl("file:///android_asset/html/test1.html");
 
   062            }
 
   063        });
 
   064 
 
   065        // 定义并绑定按钮单击监听器
 
   066        b2.setOnClickListener(newView.OnClickListener() {
 
   067            @Override
 
   068            publicvoidonClick(View v) {
 
   069                // 加载URL assets目录下的内容可以用 "file:///android_asset" 前缀
 
   070                wv.loadUrl("file:///android_asset/html/test3.html");
 
   071            }
 
   072        });
 
   073 
 
   074        // 定义并绑定按钮单击监听器
 
   075        b3.setOnClickListener(newView.OnClickListener() {
 
   076            @Override
 
   077            publicvoidonClick(View v) {
 
   078                Picture pic = wv.capturePicture();
 
   079                intwidth = pic.getWidth();
 
   080                intheight = pic.getHeight();
 
   081                if(width >0 && height > 0) {
 
   082                    Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
 
   083                    Canvas canvas =newCanvas(bmp);
 
   084                    pic.draw(canvas);
 
   085                    try{
 
   086                        String fileName ="sdcard/"+ System.currentTimeMillis() +".png";
 
   087                        FileOutputStream fos =newFileOutputStream(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 =newWebViewClient() {
 
   103 
 
   104            @Override
 
   105            publicbooleanshouldOverrideUrlLoading(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                returntrue;
 
   112            }
 
   113 
 
   114            @Override
 
   115            publicvoidonPageStarted(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            publicvoidonPageFinished(WebView view, String url) {
 
   122                Toast.makeText(getApplicationContext(),"WebViewClient.onPageFinished", Toast.LENGTH_SHORT).show();
 
   123                super.onPageFinished(view, url);
 
   124            }
 
   125 
 
   126            @Override
 
   127            publicvoidonLoadResource(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 =newWebChromeClient() {
 
   139 
 
   140            // 处理Alert事件
 
   141            @Override
 
   142            publicbooleanonJsAlert(WebView view, String url, String message,finalJsResult result) {
 
   143                // 构建一个Builder来显示网页中的alert对话框
 
   144                Builder builder =newBuilder(MainWebView3.this);
 
   145                builder.setTitle("计算1+2的值");
 
   146                builder.setMessage(message);
 
   147                builder.setPositiveButton(android.R.string.ok,newAlertDialog.OnClickListener() {
 
   148                    @Override
 
   149                    publicvoidonClick(DialogInterface dialog,intwhich) {
 
   150                        result.confirm();
 
   151                    }
 
   152                });
 
   153                builder.setCancelable(false);
 
   154                builder.create();
 
   155                builder.show();
 
   156                returntrue;
 
   157            }
 
   158 
 
   159            @Override
 
   160            publicvoidonReceivedTitle(WebView view, String title) {
 
   161                MainWebView3.this.setTitle("可以用onReceivedTitle()方法修改网页标题");
 
   162                super.onReceivedTitle(view, title);
 
   163            }
 
   164 
 
   165            // 处理Confirm事件
 
   166            @Override
 
   167            publicbooleanonJsConfirm(WebView view, String url, String message,finalJsResult result) {
 
   168                Builder builder =newBuilder(MainWebView3.this);
 
   169                builder.setTitle("删除确认");
 
   170                builder.setMessage(message);
 
   171                builder.setPositiveButton(android.R.string.ok,newAlertDialog.OnClickListener() {
 
   172 
 
   173                    @Override
 
   174                    publicvoidonClick(DialogInterface dialog,intwhich) {
 
   175                        result.confirm();
 
   176                    }
 
   177 
 
   178                });
 
   179                builder.setNeutralButton(android.R.string.cancel,newAlertDialog.OnClickListener() {
 
   180 
 
   181                    @Override
 
   182                    publicvoidonClick(DialogInterface dialog,intwhich) {
 
   183                        result.cancel();
 
   184                    }
 
   185 
 
   186                });
 
   187                builder.setCancelable(false);
 
   188                builder.create();
 
   189                builder.show();
 
   190                returntrue;
 
   191            }
 
   192 
 
   193            // 处理提示事件
 
   194            @Override
 
   195            publicbooleanonJsPrompt(WebView view, String url, String message, String defaultValue,
 
   196                    JsPromptResult result) {
 
   197                // 看看默认的效果
 
   198                returnsuper.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中了，我在这里展示一下我截取的效果给你看，别被它清晰的效果吓住就行^_^

WebSetting常用方法

setAllowFileAccess	启用或禁用WebView访问文件数据
setBlockNetworkImage	是否显示网络图像
setBuiltInZoomControls	设置是否支持缩放
setCacheMode	设置缓冲的模式
setDefaultFontSize	设置默认的字体大小
setDefaultTextEncodingName	设置在解码时时候用的默认编码
setFixedFontFamily	设置固定使用的字体
setJavaScriptEnabled	设置是否支持Javascript
setLayoutAlgorithm	设置布局方式
setLightTouchEnabled	设置用鼠标激活被选项
setSupportZoom	设置是否支持变焦

WebViewClient常用方法

doUpdateVisitedHistory	更新历史记录
onFormResubmission	应用程序重新请求网页数据
onLoadResource	加载指定地址提供的资源
onPageFinished	网页加载完毕
onPageStarted	网页开始加载
onReceivedError	报告错误信息
onScaleChanged	WebView发生改变
shouldOverrideUrlLoading	控制新的连接在当前WebView中打开

PS：

建立一个简单WEBVIEW，发现2个问题

1.载入URL 直接跳转到系统自带默认浏览器中
myWebView.loadUrl("http://www.hao123.com");

解决方法：重写

         WebViewClient wvc =new WebViewClient() {

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

};

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

2.发现自己建的WEBVIEW显示不完全，页面有拖动现象，宽度上拖动

原因是自己最外面的布局有边距，所以导致webview大小与手机屏幕大小不一致才导致这个问题

一般来说，想让页面显示在一页

    //设置加载进来的页面自适应手机屏幕
       myWebView.getSettings().setUseWideViewPort(true);
       myWebView.getSettings().setLoadWithOverviewMode(true);