最新消息:欢迎访问Android开发中文站!商务联系微信:loading_in

Android学习之WebView使用小结

开发进阶 AndroidChina 6535浏览 0评论

这段时间基于项目需要 在开发中与WebView的接触比较多,前段时间关于HTML5规范尘埃落定的消息出现在各大IT社区头版上,更有人说:HTML5将颠覆原生App开发 虽然我不太认同这一点 但是关于HTML5+JS+CSS+Native的跨平台开发模式还是为很多企业节省了开发资源和成本、一定程度上提升了WebView的使用率和地位。

网上关于HTML5规范定稿的一篇见解文章:

http://www.csdn.net/article/2014-11-06/2822513-how-html5-changes

本篇主要基于这段时间对WebView的使用经验和网上学习到的对WebView开发做一个要点小结:

一、WebView基于webkit引擎展现web页面的控件,使用前需要在Android Manifest file中配置internet访问权限,否则提示页面无法访问。

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

二、WebView属性的设置

1、设置WebSettings类

WebSettings用来对WebView的配置进行配置和管理,比如是否可以进行文件操作、缓存的设置、页面是否支持放大和缩小、是否允许使用数据库api、字体及文字编码设置、是否允许js脚本运行、是否允许图片自动加载、是否允许数据及密码保存等等

示例代码如下:

WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
webSettings.setDomStorageEnabled(true);
webSettings.setDatabaseEnabled(true);
webSettings.setAppCacheEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setSavePassword(true);
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);
/**
* 用WebView显示图片,可使用这个参数 设置网页布局类型:
* 1、LayoutAlgorithm.NARROW_COLUMNS :适应内容大小
* 2、LayoutAlgorithm.SINGLE_COLUMN : 适应屏幕,内容将自动缩放
*/
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
webSettings.setUseWideViewPort(true);

mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView.setHorizontalScrollbarOverlay(true);
mWebView.setHorizontalScrollBarEnabled(true);
mWebView.requestFocus();

2、设置WebChromeClient子类

WebChromeClient会在一些影响浏览器ui交互动作发生时被调用,比如WebView关闭和隐藏、页面加载进展、js确认框和警告框、js加载前、js操作超时、webView获得焦点等等

mWebView.setWebChromeClient(new MyWebChromeClient());

3、设置WebViewClient子类

WebViewClient会在一些影响内容渲染的动作发生时被调用,比如表单的错误提交需要重新提交、页面开始加载及加载完成、资源加载中、接收到https认证需要处理、页面键盘响应、页面中的url打开处理等等

mWebView.setWebViewClient(new MyWebViewClient());

4、设置addJavascriptInterface方法

使Js调用Native本地Java对象,实现本地Java代码和HTML页面进行交互,

注意:因为安全问题的考虑 Google在使用Android API 17以上的版本的时候 需要通过@JavascriptInterface来注解的Java函数才能被识别可以被Js调用。

三、设置当前网页的链接仍在WebView中跳转,而不是跳到手机浏览器里显示,

在WebViewClient的子类中重写shouldOverrideUrlLoading函数  代码如下:

webView.setWebViewClient(new WebViewClient() {

      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
           view.loadUrl(url);
           return true;
      }
});

shouldOverrideUrlLoading表示当前webView中的一个新url需要加载时,给当前应用程序一个处理机会,如果没有重写此函数,webView请求ActivityManage选择合适的方式处理请求,就像弹出uc和互联网让用户选择浏览器一样。重写后return true表示让当前程序处理,return false表示让当前webView处理

四、设置开始加载网页、加载完成、加载错误时处理

在WebViewClient子类中分别重写如下父类函数  代码如下:

webView.setWebViewClient(new WebViewClient() {

      @Override
      public void onPageStarted(WebView view, String url, Bitmap favicon) {
           super.onPageStarted(view, url, favicon);
           // 开始加载网页时处理 如:显示"加载提示" 的加载对话框
           DialogManager.showLoadingDialog(this);
      }

      @Override
      public void onPageFinished(WebView view, String url) {
           super.onPageFinished(view, url);
           // 网页加载完成时处理  如:让 加载对话框 消失
           DialogManager.dismissLoadingDialog();
      }

      @Override
      public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
           super.onReceivedError(view, errorCode, description, failingUrl);
           // 加载网页失败时处理  如:
          view.loadDataWithBaseURL(null, "<span style="0color: #FF0000\&quot;;">网页加载失败</span>",
                                           "text/html", "utf-8", null);
      }
});

五、处理https请求,为WebView处理ssl证书设置

WebView默认是不处理https请求的,页面显示空白,需要进行如下设置

在WebViewClient子类中重写父类的onReceivedSslError函数  代码如下:

webView.setWebViewClient(new WebViewClient() {

      @Override
      public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
           handler.proceed();  // 接受信任所有网站的证书
           // handler.cancel();   // 默认操作 不处理
           // handler.handleMessage(null);  // 可做其他处理
      }
});

六、显示页面加载进度

在WebChromeClient子类中重写父类的onProgressChanged函数  代码如下:

webView.setWebChromeClient(new WebChromeClient() {

      public void onProgressChanged(WebView view, int progress) {
           setTitle("页面加载中,请稍候..." + progress + "%");
           setProgress(progress * 100);

           if (progress == 100) {
                 setTitle(R.string.app_name);
           }
      }
});

onProgressChanged通知应用程序当前页面加载的进度

progress表示当前页面加载的进度,为1至100的整数

七、back键控制网页后退

Activity默认的back键处理为结束当前Activity,WebView查看了很多网页后,希望按back键返回上一次浏览的页面,这个时候我们就需要覆盖WebView所在Activity的onKeyDown函数,告诉他如何处理,代码如下:

public boolean onKeyDown(int keyCode, KeyEvent event) {
     if (webView.canGoBack() && event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
          webView.goBack();
          return true;
     }
     return super.onKeyDown(keyCode, event);
}

其中webView.canGoBack()在webView含有一个可后退的浏览记录时返回true
webView.goBack();表示返回至webView的上次访问页面

八、使用addJavascriptInterface完成和js交互

1、Js中调Native本地Java方法

设置webView的addJavascriptInterface方法,该方法有两个参数,第一个参数为被绑定到js中的类实例,第二个参数为在js中暴露的类别名,在js中引用java对象就是用这个名字
在Native Java代码如下:

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JavaScriptInterface(this), "Android");

class JavaScriptInterface{

     Context mContext;

     /** Instantiate the interface and set the context */
     JavaScriptInterface(Context c) {
           mContext = c;
     }

     /** Show a toast from the web page
       * 由Js调用执行Native本地Java方法
       */
     @JavascriptInterface
     public void showToast(String toast) {
          Log.d("TAG", "Js Invoker Native Function");
          Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
     }

}

在HTML中Js调用Native方法 代码如下:

<input onclick="showAndroidToast('Hello Android!')" type="button" value="Say hello" />

<script type="text/javascript">// <![CDATA[
function showAndroidToast(toast) { Android.showToast(toast); }
// ]]></script>

2、Java调Js方法

比如在HTML中有如下Js函数

<script type="text/javascript">// <![CDATA[
function showAlert() { alert("Be executed by Native"); }
// ]]></script>

从上面的代码,可以看出我们对系统API在19以上的版本作了兼容。因为4.4以上系统在onPageFinished时再恢复图片加载时,如果存在多张图片引用的是相同的src时,会只有一个image标签得到加载,因而对于这样的系统我们就先直接加载。

十一、WebView硬件加速导致页面渲染闪烁问题解决方法

关于Android硬件加速 开始于Android 3.0 (API level 11),在四个级别上开启/关闭硬件加速

1、Application级别:为整个应用程序开启硬件加速,在AndroidManifest中加入如下配置

<application android:hardwareAccelerated="true" ...>

2、Activity级别:控制每个activity是否开启硬件加速,只需在activity元素中添加android:hardwareAccelerated属性即可

<activity android:hardwareAccelerated="true" ...>

3、Window级别:注:目前还不支持在Window级别上关闭硬件加速

getWindow().setFlags(
     WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
     WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);

4、View级别:运行时单个view硬件加速,目前Android还不支持在View级别开启硬件加速  代码如下:

mView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

关于Android硬件加速 小吕有时间会更详细的单独整理成一篇来做介绍

先提供学习地址:http://android.toolib.net/guide/topics/graphics/hardware-accel.html

我们开启硬件加速后,WebView渲染页面更加快速,拖动也更加顺滑。但有个副作用就是容易会出现页面加载白块同时界面闪烁现象。解决这个问题的方法是设置WebView暂时关闭硬件加速 代码如下:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
      webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

十二、其他注意事项:

1> 从网络上下载html页面的过程应放在工作线程(后台线程)中

2> html下载成功后渲染出html的步骤应放在UI主线程,不然WebView加载网页过程会容易报错

转载请注明:Android开发中文站 » Android学习之WebView使用小结

您必须 登录 才能发表评论!