android.webkit.WebView 体验1：使用html作为UI

最新推荐文章于 2023-06-30 15:17:16 发布

最新推荐文章于 2023-06-30 15:17:16 发布 · 255 阅读

文章标签：

本文介绍如何利用HTML和JavaScript技术开发Android应用界面，并实现与Java代码的双向通信，包括数据展示和用户交互处理。

因为android软件开发分工目前还没有细化，程序员往往需要负责软件界面的开发，尽管软件的界面图片已经由美工设计好了，但如果使用layout技术把软件做成如图片所示的界面确实很困难，而且也比较耗时。Android通过WebView实现了JS代码与Java代码互相通信的功能，使的android软件的界面开发也可以采用HTML网页技术，这样，广大网页美工可以参与进android软件的界面开发工作，从而把程序员从中解脱出来。

需求：

如上，显示用户信息列表，然后到点击用户电话进行拨号，或者点击姓名，进入详细信息。

目前的问题是：点击名字，如何交给android呢？如果进行交互？

（js到java再到js之间这样的交互）

也就是js里面调用java代码，java代码还可以调用js

在项目的assets目录放入index.html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>联系人列表</title>
<script type="text/javascript">
//我们传入的jsondata是一个数组如：
//[{id:20,name:"王昌龙",phone:"18701445755"},......] 这样
function show(jsondata){
var jsonobjs = eval(jsondata);
var table = document.getElementById("personTable");
for(var y=0; y<jsonobjs.length; y++){
var tr = table.insertRow(table.rows.length); //添加一行
tr.onmouseover = function (){
this.style.backgroundColor= "red";
}
tr.onmouseout = function (){
this.style.backgroundColor= "#000000";
}
//添加三列
var td1 = tr.insertCell(0);
var td2 = tr.insertCell(1);
td2.align = "center";
var td3 = tr.insertCell(2);
//设置列内容和属性
td1.innerHTML = jsonobjs[y].id;
//转义
td2.innerHTML = "<a href='javascript:partner4java.call(/"5554/")'>"+ jsonobjs[y].name + "</a>";
td3.innerHTML = jsonobjs[y].phone;
}
}

function init(){
var jsondata = "[{id:20,name:/"王昌龙/",phone:/"18701445755/"},{id:21,name:/"小妾/",phone:/"18701445755/"}]";
show(jsondata);
}
</script>
</head>
<body bgcolor="#000000" text="#FFFFFF" style="margin:0 0 0 0" onload="javascript:init()">
//partner4java.personlist()">
<table border="0" width="100%" id="personTable" cellspacing="0">
<tr>
<td width="15%">编号</td><td align="center">姓名</td><td width="15%">电话</td>
</tr>
</table>

</body>
</html>

如上，是我们html里面的基本用法，但是我们需要改变这里面的数据提供方式

修改main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/webView"/>
</LinearLayout>

你可以把webView看做嵌入你程序的浏览器：

package cn.partner4java.html;

import java.util.ArrayList;
import java.util.List;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import cn.partner4java.html.bean.Contact;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.WebView;

public class MainActivity extends Activity {
private WebView webView;
//我们用它来完成我们的异步调用 ,当我new这个对象出来，它会绑定到当前
//activity消息队列里去，如果发现它里面新建了Runnable，它就会新建一个线程去。。。
private Handler handler = new Handler();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
webView = (WebView) this.findViewById(R.id.webView);
//支持javaScript
webView.getSettings().setJavaScriptEnabled(true);
//不保存表单数据
webView.getSettings().setSaveFormData(false);
//不保存密码
webView.getSettings().setSavePassword(false);
//不支持页面放大功能
webView.getSettings().setSupportZoom(false);
//addJavascriptInterface方法中要绑定的Java对象及方法要运行在另外的线程中，不能运行在构造他的线程中
//也就是说不能运行在当前的activity线程中
//就是把这个方法绑定到页面中，js也可以调用
//docment:xxx()
//partner4java:xxx()
webView.addJavascriptInterface(new Partner4javaJavaScript(), "partner4java");
//把我们的页面显示出来
webView.loadUrl("file:///android_asset/index.html");

}

private final class Partner4javaJavaScript{
/**
* 获取所有联系人
*/
public void getContacts(){
handler.post(new Runnable() {
@Override
public void run() {
//可以通过访问SQLite访问数据库获取
List<Contact> contacts = new ArrayList<Contact>();
contacts.add(new Contact(12, "王昌龙", "18701445755"));
contacts.add(new Contact(13, "小妾", "18701445755"));
webView.loadUrl("javascript:show('"+ buildJson(contacts) +"')");
}
});

}

/**
* 生成Json格式的数据
* @param contacts
* @return
*/
private String buildJson(List<Contact> contacts){
try {
JSONArray jsonArray = new JSONArray();
for(Contact contact:contacts){
JSONObject jsonObject = new JSONObject();
jsonObject.put("id", contact.getId());
jsonObject.put("name", contact.getName());
jsonObject.put("phone", contact.getPhone());
jsonArray.put(jsonObject);
}
return jsonArray.toString();
} catch (JSONException e) {
e.printStackTrace();
}
return null;
}

}
}

修改：

onload="javascript:partner4java.getContacts()">

然后加入回调方法：

/**
* 回调方法
* @param phone
*/
public void call(final String phone){
handler.post(new Runnable() {
@Override
public void run() {
startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:"+ phone)));
}
});
}

加入拨号权限:

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

还可以：

webView.setWebChromeClient(new Partner4javaWebClient());

private final class Partner4javaWebClient extends WebChromeClient{

@Override

public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

new AlertDialog.Builder(HtmlActivity.this)

.setTitle("提示信息")

.setMessage(message)

.setPositiveButton("确定", new DialogInterface.OnClickListener(){

public void onClick(DialogInterface dialoginterface, int i){}