WebView的基本使用及相关特性

WebView 是一个显示网页内容的组件，能够显示网络上的一些在线内容而且能够做为 Web 浏览器滚动显示的内容，它使用 WebKit做为渲染引擎来显示网页，里面包括放大、缩小、执行文本搜索等进行先后导航的方法。

注意 ：若是要在 WebView 中显示在线网页等内容时，须要在 AndroidManifest.xml 文件中添加网络权限，参考以下：

<uses-permission android:name="android.permission.INTERNET" />
复制代码

基本用法

默认状况下 WebView 不启用 JavaScript ,网页错误也将被忽略，若是仅仅是在 UI 上显示一段 HTML,这就会很是好， 用户在不须要再阅读以前与用户交互，网页不须要与用户交互 ，若是你须要一个完整的浏览器，你须要调用相应的 Intent 去启动浏览器去执行某些操做，而不是使用 WebView 来显示，调用系统浏览器使用以下代码：

Uri uri = Uri.parse("https://www.example.com");
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);
 
复制代码

使用 WebView 主要有两种使用方式，在 Activity 等 onCreate() 方法直接建立使用或者在布局文件中引入，参考以下：

1. 在代码中直接建立 WebView

WebView webview = new WebView(this);
//这里将整个 Activity 窗口做为 WebView 的显示界面，也可单独放在某个布局中
setContentView(webview);


复制代码

2. 在布局文件中使用 WebView

<WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent">
</WebView>
复制代码

那么，咱们如何加载一个网页呢，若是网页是本地的又如何加载呢，还有如何加载一段 HTML 的片断呢，经常使用的加载方法主要有两个，以下：

1. 加载一个完整的网页

这里测试使用百度首页、CSDN首页、腾讯首页进行测试，测试百度首页时，须要设置以下属性网页内容才能正确显示，若是不设置将显示为白屏：

webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webView.loadUrl("https://www.baidu.com");
复制代码

测试 CSDN 首页时，会提示打开系统带浏览器的应用去打开该页面，设置以下属性才能直接加载网页内容：

webView.setWebViewClient(new WebViewClient());
webView.loadUrl("http://blog.csdn.net");
复制代码

测试腾讯首页时能够直接加载首页内容：

webView.loadUrl("http://www.qq.com");
复制代码

测试环境可能不一样，结果也不相同。

2. 加载本地的 HTML 文件

其中加载 SD 卡上的 HTML 文件时要申请访问 SD 卡上的权限 Manifest.permission.WRITE_EXTERNAL_STORAGE，参考以下：

//加载 assets 目录下的 HTML 文件
webView.loadUrl("file:///android_asset/mine.html");
//加载 SD 卡上的 HTML 文件
webView.loadUrl("file:///"+Environment.getExternalStorageDirectory().getAbsolutePath()+ File.separator+"mine.html");
复制代码

3. 加载 HTML 片断

加载 HTML 片断时，要设置字符集，不然会出现乱码，参考以下：

//加载 HTML 片断，设置字符集防止乱码出现
webView.loadData(Util.getHtmlData(),"text/html; charset=UTF-8",null);
复制代码

WebView 的设置与界面处理主要有如下几个方面：

1. 建立并设置 WebChromeClient，主要是辅助 WebView 来处理 JavaScript 的对话框、网站标题、加载进度等；
2. 建立并设置 WebViewClient, 主要是提供各类事件的回调等；
3. 经过 WebSetting 对象能够设置 WebView 的各类相关属性，如支持 JavaScript 、设置 WebView 缓存、字体大小等；
4. JS 与 Java 的互相调用，如使用addJavascriptInterface（Object，String）方法将Java对象注入WebView。此方法容许您将Java对象注入到页面的JavaScript上下文中，以即可以经过页面中的JavaScript访问它们。

缩放

Android 1.5 以后支持调用以下方法启用内置缩放：

WebSettings.setBuiltInZoomControls(boolean)
复制代码

注意：设置了内置缩放，WebView 的宽高又是 wrap_content，将会致使未定义的行为，使用时应该避免这种状况。

构建网页以支持不一样的屏幕密度

屏幕密度是基于屏幕分辨率的，低密度的屏幕每英寸可用像素更少，高密度的屏幕每英寸可用像素更多，屏幕密度是比较重要的，由于其余因素相同的状况下，根据像素定义的 UI 元素，在低密度屏幕上显示较大，在较高屏幕密度的屏幕上显示较小；为了方便 Android 将实际中的屏幕密度换算成比较普遍的屏幕密度：高、中和低。

默认状况下，WebView 缩放的网页，使其绘制的尺寸与中密度屏幕上的默认外观相匹配，因此在高密度屏幕上适用于 1.5 倍的缩放（像素较小），在低密度屏幕上适用于 0.75 倍的缩放（像素较大）；从 Android 2.0 开始 WebView 支持 DOM、CSS 及 meta 标签，帮助 Web 开发人员根据不一样的屏幕密度来适配目标屏幕。

下面是处理不一样屏幕密度的一些说明：

1. 使用 window.devicePixelRatio 属性指定当前设备的默认缩放因子，也指设备上物理像素和设备独立像素(device-independent pixels (dips))的比例，若是 window.devicePixelRatio 的值为 1 ，则该设备被认为是中密度（mdpi）设备，而且默认缩放不该用于网页，若是 window.devicePixelRatio 值为原来的 1.5 倍 ，则该设备被认为是高密度设备（hdpi），页面内容缩放为 1.5 倍;若是 window.devicePixelRatio 值为 0.75，则该设备被认为是低密度设备（ldpi），内容缩放为原来的 0.75 倍，用公式表示以下：

window.devicePixelRatio(dpr) = physical pixel / dips(css pixel)}

physical pixel = dips *  density / 160} (Android)
复制代码

2. 使用 -webkit-device-pixel-ratio CSS 媒体查询来指定使用此样式表的屏幕密度，其值应该为 0.75 、1 、1.5，分别指明这些样式表适用于低密度、中密度、高密度的屏幕设备，以下面的声明代表 hdpi.css 只适用于屏幕像素密度比例为 1.5 的屏幕设备，也就是适用于高密度屏幕设备。

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio:1.5)" href="hdpi.css" />
复制代码

HTML5 视频支持

若是在应用程序中支持 HTML 视频，须要启用硬件加速。

关于硬件加速请参考：Android硬件加速

全屏支持

为了支持全屏幕，如视频或其余 HTML 内容，须要设置一个 WebChromeClient 并实现 onShowCustomView(View，WebChromeClient.CustomViewCallback) 和 onHideCustomView() 两个方法:

1. onShowCustomView

通知应用程序当前页面进入全屏模式，应用程序将以全屏模式包含 Web 内容、视频以及其余 HTML 的内容。

/** * @param view 显示的View. * @param callback 调用当前页退出当前页 * full screen mode. */
public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback) {};
复制代码

2. onHideCustomView

通知应用程序当前页面退出全屏模式，应用程序必须隐藏自定义的 View。

public void onHideCustomView() {}
复制代码

若是这两个方法中的任何一个没有实现，则对应的页面的 Web 页面不能进入全屏模式，也能够实现 getVideoLoadingProgressView() 来自定义视频缓冲时要显示的视图。

public View getVideoLoadingProgressView() {
        return null;
}
复制代码

HTML5 地理位置 API

针对 Android N 以及 API level > M 的设备，地理位置 API 仅仅支持以 HTTPs 的方式，若是应用以非 HTTPS 的方式请求地理位置 API onGeolocationPermissionsShowPrompt(String, GeolocationPermissions.Callback) 方法将会被拒绝调用。

布局尺寸

建议将 WebView 的高度设置成固定值或者是 MATCH_PARENT 而不建议使用 WRAP_CONTENT ,若是 WebView 的高度使用了 MATCH_PARENT ,它的父布局高度实用 WRAP_CONTENT 会致使石梯大小不一致。

将 WebView 的高度设置成 WRAP_CONTENT 将会出现以下行为：

1. HTML 的高度被设置成了固定值，这意味着相对于 HTML BODY 高度的元素大小可能不正确；
2. 对于应用程序所在设备是 Android 4.4 及更早的 SDk, meta 标签将会被忽略以保证向后的兼容性；

不支持使用 WRAP_CONTENT 的布局宽度。若是使用这样的宽度，WebView 会尝试使用其父布局的宽度。

关于错误数据的收集

若是用户赞成，WebView 的一些诊断数据将会以匿名的方式上传到 Google ,这些数据会帮助 Google 改善 WebView ,每一个已初始化 WebView 的应用程序都会收集这些数据，若是想停用该功能须要在清单文件中进行以下设置：

<meta-data android:name="android.webkit.WebView.MetricsOptOut" android:value="true" />
复制代码

参考连接：WebView 官网介绍

若是以为对本身有帮助，能够关注公众号：jzman-blog，一块儿交流学习。