WebView的基本使用及相关特性

0

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)
  1. 使用 -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,一起交流学习。

clipboard.png


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...