Android Webkit简单用例
在项目的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){}
}).show();
return true;
}
}
<!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){}
}).show();
return true;
}
}