android使用html开发软件界面

使用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"/>

隐式意图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"/>

[html]

index.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript">
functionshow(jsondata){
varjsonobjs=eval(jsondata);//json字符串转换为json对象
vartable=document.getElementById("personTable");
for(vary=0;y<jsonobjs.length;y++){
vartr=table.insertRow(table.rows.length);//添加一行
//添加三列
vartd1=tr.insertCell(0);
vartd2=tr.insertCell(1);
td2.align="center";
vartd3=tr.insertCell(2);
td3.align="center";
//设置列内容和属性
td1.innerHTML=jsonobjs[y].id;
td2.innerHTML=jsonobjs[y].name;
td3.innerHTML="<ahref='javascript:contact.call(\""+jsonobjs[y].mobile+"\")'>"+jsonobjs[y].mobile+"</a>";
}
}
</script>
</head>
<bodyonload="javascript:contact.getContacts()">
<tableborder="0"width="100%"id="personTable"cellspacing="0">
<tr>
<tdwidth="20%">编号</td><tdwidth="40%"align="center">姓名</td><tdalign="center">电话</td>
</tr>
</table>
<ahref="javascript:window.location.reload()">刷新</a>
</body>
</html>

[html]

Contact.java
packagecn.itcast.domain;
publicclassContact{
privateIntegerid;
privateStringname;
privateStringmobile;
publicContact(Integerid,Stringname,Stringmobile){
this.id=id;
this.name=name;
this.mobile=mobile;
}
publicIntegergetId(){
returnid;
}
publicvoidsetId(Integerid){
this.id=id;
}
publicStringgetName(){
returnname;
}
publicvoidsetName(Stringname){
this.name=name;
}
publicStringgetMobile(){
returnmobile;
}
publicvoidsetMobile(Stringmobile){
this.mobile=mobile;
}
}

[html]

ContactService.java
packagecn.itcast.service;
importjava.util.ArrayList;
importjava.util.List;
importcn.itcast.domain.Contact;
publicclassContactService{
publicList<Contact>getContacts(){
List<Contact>contacts=newArrayList<Contact>();
contacts.add(newContact(2,"shenlu","5201314"));
contacts.add(newContact(12,"shenlu","5201314"));
contacts.add(newContact(22,"shenlu","5201314"));
returncontacts;
}
}

[html]

MainActivity.java
packagecn.itcast.html;
importjava.util.List;
importorg.json.JSONArray;
importorg.json.JSONException;
importorg.json.JSONObject;
importcn.itcast.domain.Contact;
importcn.itcast.service.ContactService;
importandroid.app.Activity;
importandroid.content.Intent;
importandroid.net.Uri;
importandroid.os.Bundle;
importandroid.webkit.WebView;
publicclassMainActivityextendsActivity{
privateContactServiceservice;
privateWebViewwebView;
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
service=newContactService();
webView=(WebView)this.findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);//允许webkit执行js代码；
//对象，插件名称
//window.open()
//document.write()
//contact.xxx
webView.addJavascriptInterface(newContactPlugin(),"contact");//为webkit添加插件，即java类
webView.loadUrl("file:///android_asset/index.html");//加载html文件
//webView.loadUrl("http://192.168.1.100:8080/web/index.html");
}
privatefinalclassContactPlugin{
publicvoidgetContacts(){
List<Contact>contacts=service.getContacts();
//OO的方法将对象的数据转成json字符串；
try{
JSONArrayjsonArray=newJSONArray();//新建json数组
for(Contactcontact:contacts){
JSONObjectitem=newJSONObject();//新建json对象
item.put("id",contact.getId());
item.put("name",contact.getName());
item.put("mobile",contact.getMobile());
jsonArray.put(item);
}
Stringjson=jsonArray.toString();//得到json字符串；
//webView.loadUrl("javascript:show('[{""},{}]')");
webView.loadUrl("javascript:show('"+json+"')");//调用js的show方法；
}catch(JSONExceptione){
e.printStackTrace();
}
}
publicvoidcall(Stringmobile){
Intentintent=newIntent(Intent.ACTION_CALL,Uri.parse("tel:"+mobile));
startActivity(intent);
}
}
}

[html]

ContactTest.java-----单元测试
packagecn.itcast.html;
importjava.util.List;
importorg.json.JSONArray;
importorg.json.JSONException;
importorg.json.JSONObject;
importcn.itcast.domain.Contact;
importcn.itcast.service.ContactService;
importandroid.test.AndroidTestCase;
importandroid.util.Log;
publicclassContactTestextendsAndroidTestCase{
privatestaticfinalStringTAG="MainActivity";
publicvoidtestContact()throwsException{
List<Contact>contacts=newContactService().getContacts();
//OO的方法将对象的数据转成json字符串；
JSONArrayjsonArray=newJSONArray();//新建json数组
for(Contactcontact:contacts){
JSONObjectitem=newJSONObject();//新建json对象
item.put("id",contact.getId());
item.put("name",contact.getName());
item.put("mobile",contact.getMobile());
jsonArray.put(item);
}
Stringjson=jsonArray.toString();//得到json字符串；
Log.i(TAG,json);
}
}

[html]

AndroidManifest.xml
<?xmlversion="1.0"encoding="utf-8"?>
<manifestxmlns:android="http://schemas.android.com/apk/res/android"
package="cn.itcast.html"
android:versionCode="1"
android:versionName="1.0">
<uses-sdkandroid:minSdkVersion="8"/>
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name">
<uses-libraryandroid:name="android.test.runner"/>
<activity
android:name=".MainActivity"
android:label="@string/app_name">
<intent-filter>
<actionandroid:name="android.intent.action.MAIN"/>
<categoryandroid:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
<uses-permissionandroid:name="android.permission.CALL_PHONE"/>
<uses-permissionandroid:name="android.permission.INTERNET"/>
<instrumentationandroid:name="android.test.InstrumentationTestRunner"
android:targetPackage="cn.itcast.html"android:label="MyFileTest"/>
</manifest>

[html]

/layout/main.xml
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns: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>

更多相关文章

随机推荐