有一段时间没记录学习日志了,今天初次接触WebView,那么就把第一次简单使用WebView的一些方法给大家分享下。
在html5泛滥的年代,传统app倍感压力,作为新时代的程序猿,得与时俱进,那么就让我们去看看使用webView如何简单的加载网页吧!
首先是布局文件,里面就一个webView控件:
接下来是java文件:
那么Js调用的方法总结如下:window.Android指定调用名称.调用的对象中的方法()
3:双向交互
把以上两种方法用会了,难道还不能双向交互么?
补充:
在使用浏览器的时候,我们见到浏览器中有这样一种功能,1:使网页适配 2:使用原网页
其实在加载网页的时候,我们也可以对webView进行设置,实现网页自适应手机分辨率并居中显示,方法有两种
首先都要获取WebSettings settings = webView.getSettings();
1:settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
参数中的LayoutAlgorithm有三个常量,分别是:
用SINGLE_COLUMN类型可以设置页面居中显示,页面可以放大缩小,但这种方法不怎么好,有时候会让你的页面布局走样而且我测了一下,只能显示中间那一块,超出屏幕的部分有时候不能显示。这三种类型视情况而定吧!
2: //设置加载进来的页面自适应手机屏幕
这方法可以让你的页面适应手机屏幕的分辨率,完整的显示在屏幕上,可以放大缩小。
在html5泛滥的年代,传统app倍感压力,作为新时代的程序猿,得与时俱进,那么就让我们去看看使用webView如何简单的加载网页吧!
首先是布局文件,里面就一个webView控件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setLoadWithOverviewMode(true);//设置webview加载的页面的模式
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);//加载进来的页面自适应居中
webView.setHorizontalScrollBarEnabled(false);//设置水平滚动条
webView.setVerticalScrollBarEnabled(true);//设置竖直滚动条
webView.getSettings().setJavaScriptEnabled(true);//设置可以调用Js
webView.loadUrl(HttpHelp.yPayUel(fee, xchtrainorderID));//加载网页
这样就可以实现网页的简单调用了,但是这样还不够,此时如果当网页自动跳转时,你会发现我们的app打开了浏览器,并没有在app内部的webView中进行跳转,那是因为WebView默认用系统自带浏览器处理页面跳转。如果我们需要在app内部的webView中进行跳转,还需要设置webView.setWebViewClient();并且重写OnKeyDown()方法,以免按返回键退出当前Activity。
具体设置如下:
当这样设置后,webView的跳转也是在app内部进行了,是不是很简单,很神奇呀!!!赶快拿出你的双手放键盘上去敲一敲吧!
这只是简单的打开网页,那么要如何使android和js相互调用呢?
1:Android调用Js中的方法:
其中,testmethod()是js中的一个方法,当然你可以把这个方法改成其他的方法,也就是android调用其他的方法。
2:Js调用Android的方法
其中,"demo"是在android中指定的调用名称,代码中的clickOnAndroidTest()是“demo”对应的对象:new JsDemo() 中的一个方法。如下所示,在Android端的写法:
具体设置如下:
webView.setWebViewClient(new WebViewClient() {
/**
* 重写加载URL(禁止页面内部调用其他浏览器打开连接)
* @param view
* @param url
* @return
*/
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);// 使用当前WebView处理跳转
return true;// true表示此事件在此处被处理,不需要再广播
}
//开始加载
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
}
//加载完成
@Override
public void onPageFinished(WebView view, String url) {
}
//加载失败
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
Toast.makeText(YpayActivity.this, "Oh no! " + description, Toast.LENGTH_SHORT).show();
}
});
这只是简单的打开网页,那么要如何使android和js相互调用呢?
1:Android调用Js中的方法:
webView.loadUrl("javascript:testmethod()");
2:Js调用Android的方法
<a onClick="window.demo.clickOnAndroidTest()">
webView.addJavascriptInterface(new JsDemo(), "demo");
3:双向交互
把以上两种方法用会了,难道还不能双向交互么?
补充:
在使用浏览器的时候,我们见到浏览器中有这样一种功能,1:使网页适配 2:使用原网页
其实在加载网页的时候,我们也可以对webView进行设置,实现网页自适应手机分辨率并居中显示,方法有两种
首先都要获取WebSettings settings = webView.getSettings();
1:settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
参数中的LayoutAlgorithm有三个常量,分别是:
1.NARROW_COLUMNS:可能的话使所有列的宽度不超过屏幕宽度
2.NORMAL:正常显示不做任何渲染
3.SINGLE_COLUMN:把所有内容放大webview等宽的一列中用SINGLE_COLUMN类型可以设置页面居中显示,页面可以放大缩小,但这种方法不怎么好,有时候会让你的页面布局走样而且我测了一下,只能显示中间那一块,超出屏幕的部分有时候不能显示。这三种类型视情况而定吧!
2: //设置加载进来的页面自适应手机屏幕
settings.setUseWideViewPort(true);
//设置webview加载的页面的模式
settings.setLoadWithOverviewMode(true);
第一个方法设置webview推荐使用的窗口,设置为true。第二个方法是设置webview加载的页面的模式,也设置为true。
这方法可以让你的页面适应手机屏幕的分辨率,完整的显示在屏幕上,可以放大缩小。