Android WebView 应用界面开发教程

程序员文章站 2024-03-06 22:31:14

webview组件本身就是一个浏览器实现，android5.0增强的webview基于chromium m37，直接支持webrtc、webaudio、webgl。开发者可...

webview组件本身就是一个浏览器实现，android5.0增强的webview基于chromium m37，直接支持webrtc、webaudio、webgl。开发者可以直接在webview中使用聚合（polymer）和material设计。

一.webview浏览网页（加载线上url）

webview提供了很多方法执行浏览器操作，常用方法如下：

void goback()：后退
void goforward()：前进。
void gobackorforward(int step)：step为正表示前进，step为负表示后退。
void loadurl(string url)：加载指定url对应的网页。
boolean zoomin()：放大网页。
boolean zoomout()：缩小网页。

实例：迷你浏览器

该实例包含两个界面，第一个界面包括输入网址和打开网址，第二个界面包含一个webview，用于显示第一个界面输入的url对应的界面。程序代码如下：

第一个界面

public class mainactivity extends appcompatactivity {
private edittext mediturl;
private button mbtnopen;
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
mediturl = (edittext) findviewbyid(r.id.edit_url);
mbtnopen = (button) findviewbyid(r.id.btn_open);
mbtnopen.setonclicklistener(new view.onclicklistener() {
@override
public void onclick(view v) {
intent intent = new intent(mainactivity.this, webviewactivity.class);
string url = mediturl.gettext().tostring();
intent.putextra("url", url);
startactivity(intent);
}
});
}
}

这个界面很简单，一个输入框，一个按钮，分别用于输入网址和打开webview。

第二个界面

public class webviewactivity extends appcompatactivity {
private webview mwebview;
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_web_view);
mwebview = (webview) findviewbyid(r.id.web_view);
intent intent = getintent();
string url = intent.getstringextra("url");
mwebview.loadurl(url);
mwebview.getsettings().setjavascriptenabled(true);
mwebview.setwebviewclient(new webviewclient(){
});
}
@override
public void onbackpressed() {
if (mwebview != null && mwebview.cangoback()){
mwebview.goback();
}else {
super.onbackpressed();
}
}
}

这段代码调用webview的loadurl(string url)方法加载、显示该url对应的网页，并设置使其支持javascript。如果打开webview过程中跳转到浏览器，则通过设置webviewclient来是其在webview中显示。

并重写了onbackpressed()方法，当webview不为空且webview可以回退时，返回上一个webview界面，而不是直接回退到上一个activity。

由于该应用需要访问互联网，所以需要在androidmanifest.xml中配置：

<uses-permission android:name="android.permission.internet"/>

该实例的效果图如下：

Android WebView 应用界面开发教程

二.webview加载html代码

webview提供了一个loaddata(string data, string mimetype, string encoding)方法，该方法可用于加载并显示html代码，但该方法会发生乱码。

webview还提供了一个loaddatawithbaseurl(string baseurl, string data, string mimetype, string encoding, string historyurl)方法，该方法是loaddata(string data, string mimetype, string encoding)方法的增强版，不会产生乱码。该方法的几个参数说明：

data：指定要加载的html代码。

mimetype：指定html的mime类型，对于html可指定为text/html。

encoding：指定html代码编码所用的字符集，比如指定为gbk。

webview加载html代码：

public class mainactivity extends appcompatactivity {
private webview mshowwebview;
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
mshowwebview = (webview) findviewbyid(r.id.show_web_view);
stringbuilder sb = new stringbuilder();
//拼接一段html代码
sb.append("<html>");
sb.append("<head>");
sb.append("<title> 欢迎您 </title>");
sb.append("</head>");
sb.append("<body>");
sb.append("<h2> 欢迎您访问<a href = \"http:www.baicu.com\">" + "百度一下</a></h2>");
sb.append("</body>");
sb.append("</html");
//加载并显示html代码
mshowwebview.loaddatawithbaseurl(null, sb.tostring(), "text/html", "utf-8", null);
}
}

该实例运行效果如下：

Android WebView 应用界面开发教程

三.webview中的javascript调用android方法

在webview中调用android方法需要三步：

调用webview关联的websettings的setjavascriptenabled(true)启用javascript调用功能。

调用webview的addjavascriptinterface(object object, string name)方法将object对象暴露给javascript对象。

在javascript脚本中通过刚才暴露的name对象调用android方法。

写一个在javascript中调用android方法的实例，该实例界面包含一个webview组件，用于显示html页面。activity代码如下：

public class mainactivity extends appcompatactivity {
private webview mwebview;
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
mwebview = (webview) findviewbyid(r.id.web_view);
//使用file协议加载本地assets目录下的html页面
mwebview.loadurl("file:///android_asset/test.html");
//获取webview的设置对象
websettings websettings = mwebview.getsettings();
//开启javascript调用
websettings.setjavascriptenabled(true);
//将myobject对象暴露给javascript对象
mwebview.addjavascriptinterface(new myobject(this), "myobj");
}
}

在上面代码中开启了javascript调用android方法的功能，并将android应用中的myobject对象暴露给javascript脚本，暴露成javascript脚本中名为myobj的对象。

myobject代码如下：

public class myobject {
private context context;
public myobject(context context) {
this.context = context;
}
//该方法将会暴露给javascript脚本调用
@javascriptinterface
public void showtoast(string name) {
toast.maketext(context, name + "，您好！", toast.length_short).show();
}
//该方法将会暴露给javascript脚本调用
@javascriptinterface
public void showlist() {
//显示一个普通的列表对话框
new alertdialog.builder(context)
.settitle("图书列表")
.seticon(r.mipmap.ic_launcher)
.setitems(new string[]{"head first android", "head first java", "thinking in java"}, null)
.setpositivebutton("确定", null)
.create()
.show();
}
}

myobject中包含了两个方法，showtoast()和showlist()方法，且这两个方法使用了@javascriptinterface修饰，使得这两个方法会暴露给javascript脚本，从而允许javascript脚本通过myobj来调用这两个方法。html页面代码如下：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> js调用android</title>
</head>
<body>
<!-- 注意此处的myobj是android暴露出来的对象-->
<input type="button" value="打招呼"
onclick="myobj.showtoast('android');"/>
<input type="button" value="图书列表"
onclick="myobj.showlist();"/>
</body>
</html>

当用户点击页面上的两个按钮时，该页面的javascript脚本会通过myobj调用android方法。

运行该实例，点击第一个按钮，效果图如下：

Android WebView 应用界面开发教程