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

来源：互联网发布：js中的while死循环编辑：程序博客网时间：2024/06/08 06:18

众所周知，在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 onload="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() {@Overridepublic 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--------------->改变布局

以上为调用过程。