WebView的基本使用及相关特性

摘要：将的高度设置成将会出现如下行为的高度被设置成了固定值，这意味着相对于高度的元素大小可能不正确对于应用程序所在设备是及更早的标签将会被忽略以保证向后的兼容性不支持使用的布局宽度。

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

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

默认情况下 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() 方法直接创建使用或者在布局文件中引入，参考如下：

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

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

这里测试使用百度首页、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");

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

其中加载 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");

加载 HTML 片段时，要设置字符集，否则会出现乱码，参考如下：

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

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

创建并设置 WebChromeClient，主要是辅助 WebView 来处理 JavaScript 的对话框、网站标题、加载进度等；

创建并设置 WebViewClient, 主要是提供各种事件的回调等；

通过 WebSetting 对象可以设置 WebView 的各种相关属性，如支持 JavaScript 、设置 WebView 缓存、字体大小等；

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 开发人员根据不同的屏幕密度来适配目标屏幕。

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

使用 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)

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

如果在应用程序中支持 HTML 视频，需要启用硬件加速。

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

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

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

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

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

public void onHideCustomView() {}

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

 public View getVideoLoadingProgressView() {
        return null;
}

针对 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 将会出现如下行为：

HTML 的高度被设置成了固定值，这意味着相对于 HTML BODY 高度的元素大小可能不正确；

对于应用程序所在设备是 Android 4.4 及更早的 SDk, meta 标签将会被忽略以保证向后的兼容性；

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

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

参考链接：WebView 官网介绍

如果觉得对自己有帮助，可以关注公众号：jzman-blog，一起交流学习。