Android 中使用 html 作布局文件

来源：互联网发布：什么网络硬盘最好用编辑：程序博客网时间：2024/06/05 05:35

在Android开发中，通常使用xml格式来描述布局文件。就目前而言，熟悉android布局及美化的人员少之又少，出现了严重的断层。大部分企业，其实还是程序员自己动手布局。这样既浪费时间和精力，也未必能达到理想的效果。但是，在企业级的android开发中，使用html页面进行布局，也有很多的优势（例如：简单，大部分开发人员及美工都熟悉，方便统一进行更新，管理）。据笔者了解，已经有不少的公司在使用这种方式进行布局开发。这也可能是一种趋势。

下面，我将给出一个实例代码，供大家学习使用html页面给Android应用布局。

MainActivity.java

01package com.dazhuo.ui; 
02   
03import java.util.List; 
04   
05import org.json.JSONArray; 
06import org.json.JSONObject; 
07   
08import com.dazhuo.domain.Person; 
09import com.dazhuo.service.PersonService; 
10   
11import Android.app.Activity; 
12import Android.content.Intent; 
13import Android.net.Uri; 
14import Android.os.Bundle; 
15import Android.util.Log; 
16import Android.webkit.WebView; 
17   
18   
19public 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

01package com.dazhuo.domain; 
02   
03public 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

01package com.dazhuo.service; 
02   
03import java.util.ArrayList; 
04import java.util.List; 
05   
06import com.dazhuo.domain.Person; 
07   
08public 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><tdalign="center">电话</td> 
32        </tr> 
33    </table> 
34    <a href="javascript:window.location.reload()">刷新</a> 
35</body> 
36   
37</html>

0 0