在Android开发中,通常使用xml格式来描述布局文件。就目前而言,熟悉android布局及美化的人员少之又少,出现了严重的断层。大部分企业,其实还是程序员自己动手布局。这样既浪费时间和精力,也未必能达到理想的效果。但是,在企业级的android开发中,使用html页面进行布局,也有很多的优势(例如:简单,大部分开发人员及美工都熟悉,方便统一进行更新,管理)。据笔者了解,已经有不少的公司在使用这种方式进行布局开发。这也可能是一种趋势。
下面,我将给出一个实例代码,供大家学习使用html页面给Android应用布局。
MainActivity.java
view source print?01
class="java keyword">package
com.dazhuo.ui;
02
03
import
java.util.List;
04
05
import
org.json.JSONArray;
06
import
org.json.JSONObject;
07
08
import
com.dazhuo.domain.Person;
09
import
com.dazhuo.service.PersonService;
10
11
import
Android.app.Activity;
12
import
Android.content.Intent;
13
import
Android.net.Uri;
14
import
Android.os.Bundle;
15
import
Android.util.Log;
16
import
Android.webkit.WebView;
17
18
19
public
class
MainActivity
extends
Activity {
20
private
PersonService service;
21
private
WebView webview;
22
@Override
23
public
void
onCreate(Bundle savedInstanceState) {
24
super
.onCreate(savedInstanceState);
25
setContentView(R.layout.main);
26
service =
new
PersonService();
27
webview = (WebView)
this
.findViewById(R.id.webView);
//Android内置浏览器对象
28
webview.getSettings().setJavaScriptEnabled(
true
);
//启用javascript支持
29
//添加一个js交互接口,方便html布局文件中的javascript代码能与后台java代码直接交互访问
30
webview.addJavascriptInterface(
new
PersonPlugin() ,
"Person"
);
//new类名,交互访问时使用的别名
31
// <body onload="javascript:Person.getPersonList()">
32
webview.loadUrl(
"file:///Android_asset/index.html"
);//加载本地的html布局文件
33
//其实可以把这个html布局文件放在公网中,这样方便随时更新维护 例如 webview.loadUrl("www.xxxx.com/index.html");
34
}
35
//定义一个内部类,从java后台(可能是从网络,文件或者sqllite数据库) 获取List集合数据,并转换成json字符串,调用前台js代码
36
private
final
class
PersonPlugin{
37
public
void
getPersonList(){
38
List<Person> list = service.getPersonList();
//获得List数据集合
39
//将List泛型集合的数据转换为JSON数据格式
40
try
{
41
JSONArray arr =
new
JSONArray();
42
for
(Person person :list)
43
{
44
JSONObject json =
new
JSONObject();
45
json.put(
"id"
, person.getId());
46
json.put(
"name"
, person.getName());
47
json.put(
"mobile"
,person.getMobile());
48
arr.put(json);
49
50
}
51
String JSONStr =arr.toString();
//转换成json字符串
52
webview.loadUrl(
"javascript:show('"
+ JSONStr +
"')"
);
//执行html布局文件中的javascript函数代码--
53
Log.i(
"MainActivity"
, JSONStr);
54
}
catch
(Exception e) {
55
// TODO: handle exception
56
}
57
58
}
59
//打电话的方法
60
public
void
call(String mobile){
61
Intent intent =
new
Intent(Intent.ACTION_CALL, Uri.parse(
"tel:"
+ mobile));
62
startActivity(intent);
63
}
64
}
65
}
Person.java
view source print?01
package
com.dazhuo.domain;
02
03
public
class
Person {
04
private
Integer id;
05
public
Integer getId() {
06
return
id;
07
}
08
public
Person(Integer id, String name, String mobile) {
09
super
();
10
this
.id = id;
11
this
.name = name;
12
this
.mobile = mobile;
13
}
14
public
void
setId(Integer id) {
15
this
.id = id;
16
}
17
public
String getName() {
18
return
name;
19
}
20
public
void
setName(String name) {
21
this
.name = name;
22
}
23
public
String getMobile() {
24
return
mobile;
25
}
26
public
void
setMobile(String mobile) {
27
this
.mobile = mobile;
28
}
29
private
String name;
30
private
String mobile;
31
}
PersonService.java
view source print?01
package
com.dazhuo.service;
02
03
import
java.util.ArrayList;
04
import
java.util.List;
05
06
import
com.dazhuo.domain.Person;
07
08
public
class
PersonService {
09
public
List<Person> getPersonList()
10
{
11
12
List<Person> list =
new
ArrayList<Person>();
13
list.add(
new
Person(
32
,
"aa"
,
"13675574545"
));
14
list.add(
new
Person(
32
,
"bb"
,
"13698874545"
));
15
list.add(
new
Person(
32
,
"cc"
,
"13644464545"
));
16
list.add(
new
Person(
32
,
"dd"
,
"13908978877"
));
17
list.add(
new
Person(
32
,
"ee"
,
"15908989898"
));
18
return
list;
19
}
20
}
index.html
view source print?01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
02
<
html
>
03
<
head
>
04
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
05
<
title
>Insert title here</
title
>
06
<
script
type
=
"text/javascript"
>
07
function show(jsondata){
08
var jsonobjs = eval(jsondata);
09
var table = document.getElementById("personTable");
10
for(var y=0; y<
jsonobjs.length
; y++){
11
var
tr
=
table
.insertRow(table.rows.length); //添加一行
12
//添加三列
13
var
td1
=
tr
.insertCell(0);
14
var
td2
=
tr
.insertCell(1);
15
td2.align
=
"center"
;
16
var
td3
=
tr
.insertCell(2);
17
td3.align
=
"center"
;
18
//设置列内容和属性
19
td1.innerHTML
=
jsonobjs
[y].id;
20
td2.innerHTML
=
jsonobjs
[y].name;
21
td3.innerHTML
=
"<a href='javascript:Person.call(\"
"+ jsonobjs[y].mobile+ "\")'>"+ jsonobjs[y].mobile+ "</
a
>";
22
}
23
}
24
</
script
>
25
26
</
head
>
27
<!-- js代码通过webView调用其插件中的java代码 -->
28
<
body
onload
=
"javascript:Person.getPersonList()"
>
29
<
table
border
=
"0"
width
=
"100%"
id
=
"personTable"
cellspacing
=
"0"
>
30
<
tr
>
31
<
td
width
=
"20%"
>编号</
td
><
td
width
=
"40%"
align
=
"center"
>姓名</
td
><
td
align
=
"center"
>电话</
td
>
32
</
tr
>
33
</
table
>
34
<
a
href
=
"javascript:window.location.reload()"
>刷新</
a
>
35
</
body
>
36
37
</
html
>