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) = 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 的屏幕设备,也就是适用于高密度屏幕设备。
<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,一起交流学习。
WebView的基本使用及相关特性的更多相关文章
- 初窥css---选择器及相关特性
选择器及相关特性 基础选择器 标签选择器 相当于全选,在我看来局限性较大,也没啥意义的感觉,用处不太大 id选择器 有利于对于某个小盒子的部分属性进行改变,但是若是需要改的小盒子很多的话,就会很麻烦 ...
- C#中的自定义控件中的属性、事件及一些相关特性的总结(转)
摘要: C#中的自定义控件中的属性(Property).事件(Event)及一些相关特性(Attribute)的总结 今天学习了下C#用户控件开发添加自定义属性的事件,主要参考了MSDN,总结并实 ...
- java8的相关特性
1,为什么要介绍java8的相关特性? 因为现在的企业大部分已经从java7向java8开始迈进了,用java8的公司越来越多了,java8中的一些知识还是需要了解一些的; java8具有以下特点: ...
- innodb buffer pool相关特性
背景 innodb buffer pool作为innodb最重要的缓存,其缓存命中率的高低会直接影响数据库的性能.因此在数据库发生变更,比如重启.主备切换实例迁移等等,innodb buffer po ...
- hive 桶相关特性分析
1. hive 桶相关概念 桶(bucket)是指将表或分区中指定列的值为key进行hash,hash到指定的桶中,这样可以支持高效采样工作. 抽样( sampling )可以在全体数 ...
- 《C++标准程序库》学习笔记(一)C++相关特性
抱着本厚厚的<C++标准库>读了几天,想想也该写点关于用法的总结,一来怕今后容易忘记,二来将书上的事例重新敲一遍,巩固对程序库相关知识的了解.今天开第一篇,以后不固定更新.当然,笔者所读为 ...
- c++11相关特性
前言 发现好多情况下都会用到c++11的新特性啊. 所以稍稍总结一下,只会粗略的说,不会详细的讲…… upd.csp-s可能不是c++11标准,请慎用.(博主考试CE后的善意提醒) 1.auto&am ...
- [ES6系列-03]ES6中关于参数相关特性详解(参数默认值与参数解构赋值与剩余参数)
[原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 今天总结一下 ES6 中跟参数相关的内容. 欢迎补充斧正.留言交流. 让我们互相学习一起进步. 1. ES6 参数默认值( ...
- LINQ系列:C#中与LINQ相关特性
1. 匿名类型 通过关键字var定义匿名类型,编译器将根据运算符右侧表达式的值来发出一个强类型. 使用匿名类型时要遵守的一些基本规则: ◊ 匿名类型必须有一个初始化值,而且这个值不能是空值(null) ...
随机推荐
- ES6的编程风格
1,建议使用let替代var 2,全局常量使用const,多使用const有利于提高程序的运行效率. const有两个好处:一是阅读代码的人立刻会意识到不应该修改这个值,二是防止无意间修改变量值导致错 ...
- 盘点Linux运维常用工具(二)-web篇之nginx
1.nginx的概述 .nginx是一个开源的.支持高性能.高并发的WWW服务和代理服务软件 .是由俄罗斯人Igor Sysoev开发的,具有高并发.占用系统资源少等特性 .官网:http://ngi ...
- AlphaGo、人工智能、深度学习解读以及应用
经过比拼,AlphaGo最终还是胜出,创造了人机大战历史上的一个新的里程碑.几乎所有的人都在谈论这件事情,这使得把“人工智能”.“深度学习”的热潮推向了新的一个高潮.AlphaGo就像科幻电影里具有人 ...
- python读取文件指定行内容
python读取文件指定行内容 import linecache text=linecache.getline(r'C:\Users\Administrator\Desktop\SourceCodeo ...
- USB概述及协议基础
USB概述及协议基础 USB的拓扑结构 USB是一种主从结构的系统.主机叫做Host,从机叫做Device(也叫做设备). 通常所说的主机具有一个或者多个USB主控制器(host controller ...
- 聊聊order by的工作机制
总结写在前面: 1. 介绍了orderBy的两种算法流程:全字段排序 和 rowid排序. 2. rowid排序 相比 全字段排序,参与排序字段较少,耗内存较少,多一步回表,如果内存够的情况下MySQ ...
- JS中的call()方法和apply()方法用法总结(挺好 转载下)
最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 1. 每个函数都包含两个非继承而来的方法 ...
- java web 中base64传输的坑
今天在项目中,前端需要向后端发送一张图片,使用toDataURL方法以base64编码的形式传输,在写好程序后,发现报错为base64不是有效的图片,反复排查后发现接口需要一张格式为png的图片,在前 ...
- 由国产性能测试工具WEB压力测试仿真能力对比让我想到的
软件的行业在中国已得到长足的发展,软件的性能测试在软件研发过程显得越来越重要.国产的性能工具在好多大公司都在提供云服务的有偿收费测试.如:阿里的PTS(Performance Testing Serv ...
- python如何通过正则表达式一次性提取到一串字符中所有的汉字
1.python如何通过正则表达式一次性提取到一串字符中所有的汉字 https://blog.csdn.net/py0312/article/details/93999895 说明:字符串前的 “ r ...