2016年10月10日 最近在做项目时,用到了WebView这个控件,因为之前对WebView并没有什么深入的了解,一直以为这个控件功能很简单,实现主要在web端。但是今天正式用到这个控件时,才发现我对这个控件的了解真的很浅薄,所以特别在这里进行一些记录。
什么是WebView?
WebView是用来显示web page的一个View组件,这个类,是调用浏览器或者在Activity中显示在网页的基础。 WebView采用了Webkit浏览器内核(一种开源浏览器引擎),并且具有导航(后退前进浏览的网页)、缩放网页、执行文本搜索等功能。 看起来webView还是蛮强大的。
WebView的基本用法
使用WebView的基础操作就不在这里介绍了,直接引入控件,findViewById即可,不要忘记加网络权限。
基本用法
Google webView只用来展示一些html作为你的UI界面的一部分,给用户阅读,它能用来和用户进行交互。如果需要一个全面的browser,那你应该使用intent启动一个外部浏览器。例如:
复制 Uri uri = Uri . parse ( "http://www.example.com" );
Intent intent = new Intent( Intent . ACTION_VIEW , uri) ;
startActivity(intent) ;
加载一个url
复制 webview . loadUrl ( "http://slashdot.org/" );
加载一个HTML字符串
复制 String summary = "<html><body>You scored <b>192</b> points.</body></html>" ;
webview . loadData (summary , "text/html" , null );
loadData() and loadDataWithBaseUrl()的区别
在使用loadData加载一串html代码时,我发现总是出现编码异常的问题,无论我怎么更改编码,而换作loadDataWithBaseUrl这种问题就消失了 这是因为loadData()中的html 代码中不能包含'#', '%', '', '?'四中特殊字符,这就为我们内嵌css样式等制造了麻烦,因为css中经常用'#', '%'等字符 所以在使用loadData()加载一串html代码时,需要先将这些特殊字符进行转换,好吧真的很麻烦。
参数不同: loadDataWithBaseURL()比loadData()多个参数 baseUrl String: 指定HTML代码片段中相关资源的相对根路径,null代表'about:blank' historyUrl:指定历史URL,null代表'about:blank',如果非null,这个url则必须有效
自定义行为
WebView有几个可以自定义的Behavior,如下:
创建和设置 WebChromeClient 的子类。作用:进行一些可能影响浏览器的界面的变化的操作,比如加载的进度,js的alert(),web title、icon
创建和设置 WebViewClient的子类。 作用:负责处理各种通知、请求事件
修改 WebSettings,比如 setJavaScriptEnabled()
注入java object到js环境中,通过 addJavascriptOmterface(Object,String)方法。使他们通过js中页面访问
Zoom缩放
使用WebSettings.setBuiltInZoomControls(boolean)方法启用或者关闭内部缩放机制 注意:如果webView的width or height设置为warp_content,那会导致缩放时出现一些不确定的情况,所以google建议使用webView时,却定它的宽和高
Cookies和webView多窗口管理
google建议:出于安全,app应该有自己的cookies管理,此处对cookies不再讨论 多窗口管理可以通过自定义WebChromeClient 其他问题: 当设备出现方向改变,配置发生改变,Activity将会被recreated or destory,这会导致WebView重新加载页面。处理这种情况需要这个链接:Handling Runtime Changes
下面让是常见的方法:
WebSettings
复制 // 1. WebSettings: 获取webView设置
WebSettings settings = webView . getSettings ();
// 启用js
settings . setJavaScriptEnabled ( true );
// **********************************缩放功能
/**
* 是否使用wide viewport
* 什么是viewport?
* 需要一定的web基础,查了以下百度首页的源码发现
* <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
* 再配合度娘理解,就是一种为了适配移动屏幕的一种meta标签,与移动设备的像素有关(注意这句话:width=device-width)
* TODO API不太明白,wide viewport也不太明白:待处理
* 该方法用来开启或者关闭双击查看网页缩略图的功能
*/
settings . setUseWideViewPort ( true );
// webView 是否支持缩放
settings . setSupportZoom ( true );
// 是否启用放大缩小按钮
settings . setBuiltInZoomControls ( false );
// 是否显示放大缩小按钮
settings . setDisplayZoomControls ( true );
//************************************字体功能
// 设置默认物理字体大小
settings . setDefaultFontSize ( 15 );
// 设置默认逻辑字体大小
settings . setDefaultFixedFontSize ( 15 );
// 设置物理最小字体,默认为8
settings . setMinimumFontSize ( 12 );
// 设置逻辑最小字体,默认为8
settings . setMinimumLogicalFontSize ( 12 );
// 设置默认字体编码
settings . setDefaultTextEncodingName ( "UTF-8" );
// TODO html的物理字体和逻辑字体我也分不清楚:待处理
// 设置字体缩放,参数为百分比,当为200时,字体大小为原来的两倍,最小字体为setMinimumFontSize的值
// Api14代替了方法:void setTextSize (WebSettings.TextSize)
// (API14之前要使用setTextSize方法)
if ( Build . VERSION . SDK_INT >= Build . VERSION_CODES . ICE_CREAM_SANDWICH ) {
settings . setTextZoom ( 100 );
}
###WebChromeClient
复制 // 2. WebChromeClient
final Activity activity = this ;
webView . setWebChromeClient ( new WebChromeClient() {
@ Override
// 接收 web page 加载进度,并做出处理
public void onProgressChanged ( WebView view , int progress) {
// Log.i("logi", "progress" + progress);
activity . setProgress (progress * 100 );
}
@ Override
// 接收web page title 并做出处理
public void onReceivedTitle ( WebView view , String title) {
tvTitle . setText (title);
}
@ Override
// 接受web page icon 并做出处理
public void onReceivedIcon ( WebView view , Bitmap icon) {
if (icon != null ) {
ivIcon . setImageBitmap (icon);
} else {
Log . i ( "logi" , "icon is null" );
}
}
});
###WebViewClient
复制 // 3. WebViewClient,給webView一個客戶端,這個客戶端用來處理和加載url
// 如果不给webView设置WebViewClient,则webview并没有办法处理url,所以会调用外部浏览器,只要指定了一个WebViewClient,就会在webView内部打开链接
webView . setWebViewClient ( new WebViewClient() {
@ Override
// 当webView要加载一个新的url时
// 如果该方法返回true,则代表host application(即我们的应用程序)将会处理这个url,
// 意思就是我们可以通过在shouldOverrideUrlLoading写自己的代码来对这个url进行操作,
// 可以使用webView.loadUrl来在内部打开url,也可以使用intent调用浏览器来打开这个url
// 如果返回false,则代表这个url全权交给webView的webViewClient操作,此时,shouldOverrideUrlLoading不应该有其他的代码
public boolean shouldOverrideUrlLoading ( WebView view , String url) {
// Log.i("logi", "shouldOverrideUrlLoading:" + url);
// Uri uri = Uri.parse(url);
// Intent intent = new Intent(Intent.ACTION_VIEW, uri);
// startActivity(intent);
// webView.loadUrl(url);
return false ;
}
@ Override // 通知host application(宿主应用程序,这里指我们的项目) 開始加載一個page
public void onPageStarted ( WebView view , String url , Bitmap favicon) {
super . onPageStarted (view , url , favicon);
Log . i ( "logi" , "開始加載:" + url);
// 加載之前,判斷網頁是否需要加載圖片,如果不需要,要對獲取的html代碼進行一些處理
}
@ Override // 通知host application page已經加載完成
public void onPageFinished ( WebView view , String url) {
super . onPageFinished (view , url);
Log . i ( "logi" , "加載結束:" + url);
}
@ Override // 接收错误码
public void onReceivedError ( WebView view , int errorCode , String description , String failingUrl) {
Toast . makeText (activity , "Oh no! " + description , Toast . LENGTH_SHORT ) . show ();
// 1. 第一种方法,加载一个html提示页面,个人推荐
webView . loadUrl ( "file:///android_asset/error.html" );
// 2. 第二种方法,隐藏web view 显示一个新的布局
// webView.setVisibility(View.GONE);
// tvError.setVisibility(View.VISIBLE);
}
});
下载监听
复制 // 4. WebView下载监听
webView . setDownloadListener ( new DownloadListener() {
/**
* @param url 完整的下载地址(也可能是html文档)
* @param userAgent 用于下载的用户代理
* @param contentDisposition http header的contentDisposition
* @param mimetype MIME类型
* @param contentLength 由服务器所报告的文件的大小
*/
@ Override
public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
Toast. makeText (MainActivity.this , "开始下载" , Toast.LENGTH_SHORT). show ();
// ACTION_VIEW根据数据类型打开相应的Activity,此处会调用手机浏览器下载
// Uri uri = Uri.parse(url);
// Intent intent = new Intent(Intent.ACTION_VIEW, uri);
// startActivity(intent);
// 调用系统下载器下载
DownloadManager downloadManager = (DownloadManager) MainActivity.this.getSystemService(DOWNLOAD_SERVICE);
Uri uri = Uri . parse (url);
DownloadManager . Request request = new DownloadManager . Request (uri);
long download_id = downloadManager . enqueue (request);
Log. i ( "logi" , "download_id" + download_id);
// 这个id用来区分下载任务,在我测试的华为手机上同样也是下载次数
}
});
和JS进行交互
在assert文件夹下新建一个js.html
:
复制 <! DOCTYPE html >
< html >
< head >
< title >js和java交互</ title >
< script type = "text/javascript" >
function fun1 (){
alert ( "java 调用 js代码成功!!!" );
}
//调用Android的方法,这个Android是接口的name
function showAndroidToast (toast) {
Android .showToast (toast); // 调用这个接口的showToast方法
}
</ script >
</ head >
< body >
< p >这里本来没有内容</ p >
< input type = "button" value = "调用Android的方法"
onClick = "showAndroidToast('js调用了android的代码!success!!!')" />
</ body >
</ html >
Java调用JS的方法: 其实调用非常简单,如果你有很深的js功底,完全可以用js写一个android app。 先使用webView.loadUrl("file:///android_asset/js.html");加载这个html文档,然后再使用 webView.loadUrl("javascript:fun1()");
方法即可调用js.html
中fun1()
方法。
JS调用Java方法: 同样也很简单,
先自定义一个接口JavaScriptObject
:
复制 public class JavaScriptObject {
Context mContext;
/** Instantiate the interface and set the context */
JavaScriptObject ( Context c) {
mContext = c;
}
/** Show a toast from the web page */
@ JavascriptInterface // 指定这是js接口
public void showToast ( String toast) {
Toast . makeText (mContext , toast , Toast . LENGTH_SHORT ) . show ();
}
}
使用webView.addJavascriptInterface(new JavaScriptObject(this), "Android");
方法将这个接口添加给webView,并指定名称为Android
当指定完成后,Js就可以在它的代码片段中通过这个Android接口调用他的方法了,这里是显示一个Toast
复制 function showAndroidToast (toast) {
Android .showToast (toast); // 调用这个接口的showToast方法
}
这样html button被点击时,则会调用android的Toast