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

最新推荐文章于 2021-06-29 00:09:53 发布

加权不平权

最新推荐文章于 2021-06-29 00:09:53 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/sunquan291/article/details/8869712

版权

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

如AbsouluteLayout、FrameLayout、LinearLayout、RelativeLayout、TableLayout。

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

首先新建一个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>用户列表</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文件。

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

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

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

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

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

修改index.htm,

<!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。

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进行数据的双向交流。

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");

		} 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--------------->改变布局