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 的设置与界面解决主要有以下几个方面：

创立并设置 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) = \frac{physical pixel}{dips(css pixel)}physical pixel = dips * \frac{density}{160} (Android)

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

HTML 的高度被设置成了固定值，这意味着相对于 HTML BODY 高度的元素大小可能不正确；
对于应用程序所在设施是 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，一起交流学习。

jzman-blog.jpg