android 之 利用HTML搭建界面

原创 2012年03月29日 23:44:20

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.ethan.html"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="7" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <uses-library android:name="android.test.runner"/>
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
	<uses-permission android:name="android.permission.CALL_PHONE"/>
	<uses-permission android:name="android.permission.INTERNET"/>
    <instrumentation android:name="android.test.InstrumentationTestRunner"
        android:targetPackage="com.ethan.html" 
        android:label="Tests for My App"/>
</manifest>


assets/index.html:

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
	<script type="text/javascript">
		function show(jsondata) {
			var jsonobjs = eval(jsondata);
			var table = document.getElementById("personTable");
			for(var i=0;i<jsonobjs.length;i++) {
				//add a new row
				var tr = table.insertRow(table.rows.length);
				
				//add 3 cols
				var td1 = tr.insertCell(0);
				var td2 = tr.insertCell(1);
				td2.align = "center";
				
				var td3 = tr.insertCell(2);
				td3.align = "center";
				
				td1.innerHTML = jsonobjs[i].id;
				td2.innerHTML = jsonobjs[i].name;
				td3.innerHTML = "<a href='javascript:contact.call(\""+jsonobjs[i].mobile+"\")'>"+jsonobjs[i].mobile+"</a>";
			}
		}
	</script>
</head>

<body onload="javascript:contact.getContacts()">
	<table border="0" width="100%" id="personTable" cellspacing="0">
		<tr bgcolor="#E7F5FE">
			<td width="15%">编号</td>
			<td width="30%" align="center">姓名</td>
			<td align="center">电话</td>
		</tr>
	</table>
	
	<a href="javascript:window.location.reload()">刷新</a>
</body>

package com.ethan.service;

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

import com.ethan.domain.Contact;

public class ContactService {
	public List<Contact> getContacts() {
		//模拟一下数据
		List<Contact> contacts = new ArrayList<Contact>();
		contacts.add(new Contact(34,"xxx","232323223"));
		contacts.add(new Contact(34,"aaa","2111123223"));
		contacts.add(new Contact(34,"bbb","111323223"));
		contacts.add(new Contact(34,"ccc","211122223"));
		contacts.add(new Contact(34,"迈克","2321111223"));
		return contacts;
	}
}

package com.ethan.domain;

public class Contact {
	private Integer id;
	private String name;
	private String mobile;
	public Contact(Integer id, String name, String mobile) {
		super();
		this.id = id;
		this.name = name;
		this.mobile = mobile;
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getMobile() {
		return mobile;
	}
	public void setMobile(String mobile) {
		this.mobile = mobile;
	}
}
测试类:

package com.ethan.html;

import java.util.List;

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

import com.ethan.domain.Contact;
import com.ethan.service.ContactService;

import android.test.AndroidTestCase;
import android.util.Log;

public class ContactTest extends AndroidTestCase {
	private static final String TAG = "MainActivity";
	public void getContacts() {
		List<Contact> contacts = new ContactService().getContacts();
		// json数组
		JSONArray array = new JSONArray();
		try {
			for (Contact c : contacts) {
				JSONObject item = new JSONObject();

				item.put("id", c.getId());
				item.put("name", c.getName());
				item.put("mobile", c.getMobile());
				// 放进json数组
				array.put(item);

			}
			
			String json = array.toString();
			Log.i(TAG,json);
		} catch (JSONException e) {
			e.printStackTrace();
		}
	}

}

主类:
package com.ethan.html;

import java.util.List;

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

import com.ethan.domain.Contact;
import com.ethan.service.ContactService;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;

public class MainActivity extends Activity {
	private ContactService contactService;
	private WebView webView;
	private static final String TAG = "MainActivity";
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		contactService = new ContactService();
		 webView = (WebView) findViewById(R.id.webview);
		// 设置开启javascript
		webView.getSettings().setJavaScriptEnabled(true);
		// 加入一个javascript插件
		// contact.methodName();
		webView.addJavascriptInterface(new ContactPlugin(), "contact");
		webView.loadUrl("file:///android_asset/index.html");
	}

	private final class ContactPlugin {
		public void getContacts() {
			List<Contact> contacts = contactService.getContacts();
			// json数组
			JSONArray array = new JSONArray();
			try {
				for (Contact c : contacts) {
					JSONObject item = new JSONObject();

					item.put("id", c.getId());
					item.put("name", c.getName());
					item.put("mobile", c.getMobile());
					// 放进json数组
					array.put(item);

				}
				
				String json = array.toString();
				Log.i(TAG,json);
				webView.loadUrl("javascript:show(' "+json+" ')");
			} catch (JSONException e) {
				e.printStackTrace();
			}
		}
		
		public void call(String mobile) {
			Intent intent = new Intent(Intent.ACTION_CALL,Uri.parse("tel:"+mobile));
			startActivity(intent);
		}
	}
	
	
}


相关文章推荐

android采用HTML设计软件界面

  • 2015年09月17日 08:45
  • 49KB
  • 下载

Android采用HTML设计软件界面webview

MainActivity.java package cn.itcast.html; import java.util.List; import org.json.JSONArray; ...

Android界面 Html5还是Native,说说他们的各自的优缺点。

曾被人问到Android界面用Html5写有什么you shi

android使用html开发软件界面

转载网址:

使用HTML来生产Android界面

1. HTML 开发软件界面    因为android软件开发分工目前还没有细化,程序员往往需要负责软件界面的开发,    虽然软件的界面图片已经由美工设计好了,但如果使用layout技术把软件做...

android使用html开发软件界面

使用html开发软件界面 因为android软件开发分工目前还没有细化,程序员往往需要负责软件界面的开发, 虽然软件的界面图片已经由美工设计好了,但如果使用layout技术把软件做成如图片所示的界...

利用HTML显示QQ的几个界面

最近闲来无事,利用HTML写了几个QQ界面。先看看效果图 登录 QQ2012 QQ 20...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android 之 利用HTML搭建界面
举报原因:
原因补充:

(最多只允许输入30个字)