Android 中使用 html 作布局文件_移动开发_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > 移动开发 > Android 中使用 html 作布局文件

Android 中使用 html 作布局文件

 2013/10/18 20:47:22  郑文亮  博客园  我要评论(0)
  • 摘要:在Android开发中,通常使用xml格式来描述布局文件。就目前而言,熟悉android布局及美化的人员少之又少,出现了严重的断层。大部分企业,其实还是程序员自己动手布局。这样既浪费时间和精力,也未必能达到理想的效果。但是,在企业级的android开发中,使用html页面进行布局,也有很多的优势(例如:简单,大部分开发人员及美工都熟悉,方便统一进行更新,管理)。据笔者了解,已经有不少的公司在使用这种方式进行布局开发。这也可能是一种趋势。下面,我将给出一个实例代码
  • 标签:android 使用 文件

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>
发表评论
用户名: 匿名