WebView的简单介绍:
在我们做项目的过程中,有可能会遇到一种需求:在应用程序里展示一些H5页面。可能有些朋友就会说,这还不简单,直接使用意图跳转到浏览器打开,完美解决。可是,需求往往是不太友好的:不能使用外部浏览器浏览。这可怎么办呢?难不成要写一个浏览器?
这倒是不用,Android已经为我们提供了一个WebView的控件,使用该控件即可在我们的应用中轻松的展示各种各样的网页了。
Web使用步骤:
1.布局文件:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="@+id/wv_html5"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
2.初始化WebView控件以及方法调用的部分代码:
WebView webView = (WebView)findViewById(R.id.wv_html5);
//允许webview 执行javaScript代码
webView.getSettings().setJavaScriptEnabled(true);
//网页跳转到另外一个网页的时候,仍然在webView中打开而不是调到外部浏览器
webView.setWebViewClient(new WebViewClient());
//跳转到对应的网页,也可以跳转到本地的网页
webView.loadUrl("http://www.baidu.com");
记得添加权限:
<uses-permission android:name="android.permission.INTERNET"/>
===============================================
webView.getSettings()方法可以设置一些浏览器的属性:
WebSettings webSettings = webView.getSettings();
//允许webview 执行javaScript代码
webSettings.setJavaScriptEnabled(true);
//设置缓存模式
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
//可以使用localStorage
webSettings.setDomStorageEnabled(true);
//可以使用数据库
webSettings.setDatabaseEnabled(true);
//应用可以存在缓存
webSettings.setAppCacheEnabled(true);
//允许访问文件
webSettings.setAllowFileAccess(true);
//保存密码
webSettings.setSavePassword(true);
//支持缩放
webSettings.setSupportZoom(true);
//设置显示缩放按钮
webSettings.setBuiltInZoomControls(true);
//双击变大,再双击后变小,当手动放大后,双击可以恢复到原始大小
webView.getSettings().setUseWideViewPort(true);
/**
* 用WebView显示图片,可使用这个参数 设置网页布局类型:
* 1、LayoutAlgorithm.NARROW_COLUMNS :适应内容大小
* 2、LayoutAlgorithm.SINGLE_COLUMN :适应屏幕,内容将自动缩放
*/
//这样的话如果你的PC网页里面没有设置 meta标签 viewport的缩放设置也没有关系。
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
//可使滚动条不占位
webViwew.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setHorizontalScrollbarOverlay(true);
webView.setHorizontalScrollBarEnabled(true);
//取消Vertical ScrollBar显示
webView.setVerticalScrollBarEnabled(false);
//取消Horizontal ScrollBar显示
webView.setHorizontalScrollBarEnabled(false);
//触摸焦点起作用,如果不设置,则在点击网页文本输入框时,不能弹出软键盘及不响应其他的一些事件。
webView.requestFocus();
webView.setWebChromeClient(new MyWebChromeClient());
WebChromeClient会在一些影响浏览器ui交互动作发生时被调用,比如WebView关闭和隐藏、页面加载进展、js确认框和警告框、js加载前、js操作超时、webView获得焦点等等
webView.setWebViewClient(new MyWebViewClient());
WebViewClient会在一些影响内容渲染的动作发生时被调用,比如表单的错误提交需要重新提交、页面开始加载及加载完成、资源加载中、接收到https认证需要处理、页面键盘响应、页面中的url打开处理等等
WebView与JS的交互
基本思路步骤:
- 使用webview打开网页
- 设置webview支持脚本
- 通过webview的loadUrl方式进行js函数调用
- 提供安卓提供一些方法供JS使用
1.//允许webview执行javascript
webview.getSettings.setJavaScriptEnabled(true);
2.//获取到html文件,也可以重网络上获取
webview.loadUrl("file:///android_asset/test.html");
3./*添加一个对象,让js可以访问该对象的方法,该对象也可以调用js中的方法
*第一个参数:包含js所需要调用方法的对象,第二个参数类似于 ID,javaScript通过这个id即可找到这个对象
*/
webView.addJavascriptInterface(new js(),"js");
4.//Android提供方法给JS调用,实例代码:
@JavascriptInterface
public void showMsg(String msg) {
Toast.makeText(context, msg, Toast.LENGTH_SHORT).show();
}
5.//Android调用JS的代码:
webView.load("javascript:showAlert()");
下面是就是JS代码:在JS中就可以提供方法给安卓调用或者调用安卓的方法:
<</span>script type="text/javascript">
//提供方法给安卓调用
function showAlert() {
alert("这个JS中的方法!");
}
//调用安卓的方法
function callAndroid(msg) {
//webView.addJavascriptInterface(new js(),"js");
//上面代码中的第二个参数就是在这里
js.showMsg(msg);
}
</</span>script>
注意
1.设置addJavascriptInterface方法
使Js调用Native本地Java对象,实现本地Java代码和HTML页面进行交互,因为安全问题的考虑 Google在使用Android API 17以上的版本的时候 需要通过@JavascriptInterface来注解的Java函数才能被识别可以被Js调用。
2.设置当前网页的链接仍在WebView中跳转,而不是跳到手机浏览器里显示,在WebViewClient的子类中重写shouldOverrideUrlLoading函数
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
shouldOverrideUrlLoading表示当前webView中的一个新url需要加载时,给当前应用程序一个处理机会,如果没有重写此函数,webView请求ActivityManage选择合适的方式处理请求,就像弹出uc和互联网让用户选择浏览器一样。重写后return true表示让当前程序处理,return false表示让当前webView处理
3.设置开始加载网页、加载完成、加载错误时处理在WebViewClient子类中分别重写如下父类函数
代码如下:
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
// 开始加载网页时处理 如:显示"加载提示" 的加载对话框
showDialog();
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// 网页加载完成时处理 如:让加载对话框 消失
dismissDialog();
}
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
// 加载网页失败时处理
...
}
});
4.显示页面加载进度
在WebChromeClient子类中重写父类的onProgressChanged函数
代码如下:
webView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
//处理进度条代码
...
}
});
5.back键控制网页后退
Activity默认的back键处理为结束当前Activity,WebView查看了很多网页后,希望按back键返回上一次浏览的页面,这个时候我们就需要覆盖WebView所在Activity的onKeyDown函数,告诉他如何处理
代码如下:
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (webView.canGoBack() && event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
webView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
其中webView.canGoBack()在webView含有一个可后退的浏览记录时返回true
webView.goBack();表示返回至webView的上次访问页面