android如何利用html进行布局设计入门

115 阅读 0 评论 76 点赞

我是靠谱客的博主野性纸鹤，这篇文章主要介绍android如何利用html进行布局设计入门，现在分享给大家，希望可以做个参考。

复制代码

1
众所周知，在android开发过程中，对于布局采用的大多是那几种布局方式。

如AbsouluteLayout、FrameLayout、LinearLayout、RelativeLayout、TableLayout。

那么如何利用htm的布局实现android的布局样式呢？

首先新建一个index.html

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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>
</head>
<body>
<table width="100%" border="0" id="contactTable" >
<tr bgcolor="#EEF7FF" style="font-size:16px;font-weight: bold;">
<td width="%20">id</td>
<td align="center">Name</td>
<td width="%30">Phone</td>
</tr>
</table>
</body>
</html>

在android中加载这个html，就可以实现html布局在android应用上的实现。利用WebView控件，可以很方便的加载html文件。

复制代码

1
2
String url="file:///android_asset/index.html";
webView_list.loadUrl(url);

注意对于url的实现。index.html存在于assets文件夹下。

但对于上面的应用，只能加载简单的静态页面。如何动态的传递数据。

这就用到了js。在页面加载的时候，首先来看一下，最后的应用：

实现了列表数据的动态加载。对于用户信息是在java代源中进行处理之后。

修改index.htm,

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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 language="JavaScript">
function contactList(jsons)
{
var table=document.getElementById("contactTable");
var arr=eval(jsons);
for(var i=0;i<arr.length;i++)
{
var jsonObj=arr[i];
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);
td1.innerHTML=jsonObj.id;
td2.innerHTML=jsonObj.name;
td3.innerHTML=jsonObj.phone;	}
}
</script>
</head>
<body οnlοad="javascript:MyDataOper.show()">
<table width="100%" border="0" id="contactTable" >
<tr bgcolor="#EEF7FF" style="font-size:16px;font-weight: bold;">
<td width="%20">id</td>
<td align="center">Name</td>
<td width="%30">Phone</td>
</tr>
</table>
</body>
</html>

可以看到在body的onload方法中调用了javascript:MyDataOper.show()方法。但html怎么去哪里调用这个方法的呢？

由于html是放在WebView中的。在WebView中有一个方法：

webView_list.getSettings().setJavaScriptEnabled(true);//设置启用js

webView_list.addJavascriptInterface(new MyDataOper(this,handler), "MyDataOper");

addJavascriptInterface这个方法即是为相应的html提供一个js的对象。这样WebView中的html就可以访问这个类中的方法了。而这个方法也可以访问html中的js。

复制代码

1
2
3
4
5
6
7
8
9
public void show()
{
handler.post(new Runnable() {
@Override
public void run() {
webview.loadUrl("javascript:contactList('"+query()+"')");
}
});
}

同样通过javascript:contactList()可以访问到html中的js。是否在任何一个类，都可以通过这个方法访问到html中的js呢？答案是否定的。

只有在WebView中设置的javaScriptInterface中的类，才可以与html进行数据的双向交流。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public static String query()
{
JSONObject obj1=new JSONObject();
JSONObject obj2=new JSONObject();
JSONObject obj3=new JSONObject();
try {
obj1.put("id", 1);
   
obj1.put("name", "张三");
   
obj1.put("phone", "12345678901");
   
obj2.put("id", 2);
   
obj2.put("name", "王五");
   
obj2.put("phone", "12345678901");
   
obj3.put("id", 3);
   
obj3.put("name", "李四");
  
obj3.put("phone", "12345678901");

复制代码

1
2
3
4
5
6
7
8
9
10

} catch (JSONException e) {
e.printStackTrace();
}
JSONArray array=new JSONArray();
array.put(obj1);
array.put(obj2);
array.put(obj3);
return array.toString();
}

以上为数据处理。

这样java数据处理data-------------------->html中的js--------------->改变布局