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，一起交流学习。