使用html开发软件界面
因为android软件开发分工目前还没有细化,程序员往往需要负责软件界面的开发,
虽然软件的界面图片已经由美工设计好了,但如果使用layout技术把软件做成如图片所示的界面确实很困难,
而且也比较耗时。Android通过WebView实现了JS代码与Java代码互相通信的功能,
使得android软件的界面开发也可以采用HTML网页技术,这样,广大网页美工可以参
与进android软件的界面开发工作,从而让程序员从中解脱出来。
<WebView> 代码中使用浏览器Webkit,就要使用到WebView控件;使用<WebView> 显示网页内容;
采用布局layout完成软件界面很累人,很痛苦;
将网页文件及图片放到assets目录下
json数组[{id:20,name:"xxx",mobile:"1332"},{}]
json字符串转成json对象
java对象作为插件安装到webkit,js代码就能访问到数据了;
OO的方法将对象的数据转成json字符串;
配置单元测试:
<uses-library android:name="android.test.runner"/>
<instrumentation android:name="android.test.InstrumentationTestRunner"
android:targetPackage="cn.itcast.html" android:label="My File Test" />
隐式意图Intent调用电话拨号器;
Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + mobile));
startActivity(intent);
拨打电话权限:
<uses-permission android:name="android.permission.CALL_PHONE"/>
软件界面更新立刻被用户看到:将index.html放到服务器中;
webView.loadUrl("http://192.168.1.100:8080/web/index.html");
允许网络访问权限:
<uses-permission android:name="android.permission.INTERNET"/>
- 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>Insert title here</title>
- <script type="text/javascript">
- function show(jsondata){
- var jsonobjs = eval(jsondata);//json字符串转换为json对象
- var table = document.getElementById("personTable");
- for(var y=0; y<jsonobjs.length; y++){
- var tr = table.insertRow(table.rows.length); //添加一行
- //添加三列
- var td1 = tr.insertCell(0);
- var td2 = tr.insertCell(1);
- td2.align = "center";
- var td3 = tr.insertCell(2);
- td3.align = "center";
- //设置列内容和属性
- td1.innerHTML = jsonobjs[y].id;
- td2.innerHTML = jsonobjs[y].name;
- td3.innerHTML = "<a href='javascript:contact.call(\""+ jsonobjs[y].mobile+ "\")'>"+ jsonobjs[y].mobile+ "</a>";
- }
- }
- </script>
- </head>
- <!-- js代码通过webView调用其插件中的java代码 -->
- <body onload="javascript:contact.getContacts()">
- <table border="0" width="100%" id="personTable" cellspacing="0">
- <tr>
- <td width="20%">编号</td><td width="40%" align="center">姓名</td><td align="center">电话</td>
- </tr>
- </table>
- <a href="javascript:window.location.reload()">刷新</a>
- </body>
- </html>
- Contact.java
- package cn.itcast.domain;
- public class Contact {
- private Integer id;
- private String name;
- private String mobile;
- public Contact(Integer id, String name, String mobile) {
- 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;
- }
- }
- ContactService.java
- package cn.itcast.service;
- import java.util.ArrayList;
- import java.util.List;
- import cn.itcast.domain.Contact;
- public class ContactService {
- public List<Contact> getContacts(){
- List<Contact> contacts = new ArrayList<Contact>();
- contacts.add(new Contact(2, "shenlu", "5201314"));
- contacts.add(new Contact(12, "shenlu", "5201314"));
- contacts.add(new Contact(22, "shenlu", "5201314"));
- return contacts;
- }
- }
- MainActivity.java
- package cn.itcast.html;
- import java.util.List;
- import org.json.JSONArray;
- import org.json.JSONException;
- import org.json.JSONObject;
- import cn.itcast.domain.Contact;
- import cn.itcast.service.ContactService;
- import android.app.Activity;
- import android.content.Intent;
- import android.net.Uri;
- import android.os.Bundle;
- import android.webkit.WebView;
- public class MainActivity extends Activity {
- private ContactService service;
- private WebView webView;
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);
- service = new ContactService();
- webView = (WebView) this.findViewById(R.id.webView);
- webView.getSettings().setJavaScriptEnabled(true);//允许webkit执行js代码;
- //对象,插件名称
- //window.open()
- //document.write()
- //contact.xxx
- webView.addJavascriptInterface(new ContactPlugin(), "contact");//为webkit添加插件,即java类
- webView.loadUrl("file:///android_asset/index.html");//加载html文件
- //webView.loadUrl("http://192.168.1.100:8080/web/index.html");
- }
- private final class ContactPlugin{
- public void getContacts(){
- List<Contact> contacts = service.getContacts();
- //OO的方法将对象的数据转成json字符串;
- try {
- JSONArray jsonArray = new JSONArray();//新建json数组
- for(Contact contact : contacts){
- JSONObject item = new JSONObject();//新建json对象
- item.put("id", contact.getId());
- item.put("name", contact.getName());
- item.put("mobile", contact.getMobile());
- jsonArray.put(item);
- }
- String json = jsonArray.toString();//得到json字符串;
- // webView.loadUrl("javascript:show('[{""},{}]')");
- webView.loadUrl("javascript:show('"+ json +"')"); //调用js的show方法;
- } catch (JSONException e) {
- e.printStackTrace();
- }
- }
- public void call(String mobile){
- Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + mobile));
- startActivity(intent);
- }
- }
- }
- ContactTest.java-----单元测试
- package cn.itcast.html;
- import java.util.List;
- import org.json.JSONArray;
- import org.json.JSONException;
- import org.json.JSONObject;
- import cn.itcast.domain.Contact;
- import cn.itcast.service.ContactService;
- import android.test.AndroidTestCase;
- import android.util.Log;
- public class ContactTest extends AndroidTestCase {
- private static final String TAG = "MainActivity";
- public void testContact() throws Exception{
- List<Contact> contacts = new ContactService().getContacts();
- //OO的方法将对象的数据转成json字符串;
- JSONArray jsonArray = new JSONArray();//新建json数组
- for(Contact contact : contacts){
- JSONObject item = new JSONObject();//新建json对象
- item.put("id", contact.getId());
- item.put("name", contact.getName());
- item.put("mobile", contact.getMobile());
- jsonArray.put(item);
- }
- String json = jsonArray.toString();//得到json字符串;
- Log.i(TAG, json);
- }
- }
- AndroidManifest.xml
- <?xml version="1.0" encoding="utf-8"?>
- <manifest xmlns:android="http://schemas.android.com/apk/res/android"
- package="cn.itcast.html"
- android:versionCode="1"
- android:versionName="1.0" >
- <uses-sdk android:minSdkVersion="8" />
- <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="cn.itcast.html" android:label="My File Test" />
- </manifest>
- /layout/main.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
- <WebView
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:id="@+id/webView"
- />
- </LinearLayout>