在Android開發中,通常使用xml格式來描述布局文件。就目前而言,熟悉android布局及美化的人員少之又少,出現了嚴重的斷層。大部分企業,其實還是程序員自己動手布局。這樣既浪費時間和精力,也未必能達到理想的效果。但是,在企業級的android開發中,使用html頁面進行布局,也有很多的優勢(例如:簡單,大部分開發人員及美工都熟悉,方便統一進行更新,管理)。據筆者了解,已經有不少的公司在使用這種方式進行布局開發。這也可能是一種趨勢。
下面,我將給出一個實例代碼,供大家學習使用html頁面給android應用布局。
- package com.dazhuo.ui;
-
- import java.util.List;
-
- import org.json.JSONArray;
- import org.json.JSONObject;
-
- import com.dazhuo.domain.Person;
- import com.dazhuo.service.PersonService;
-
- import android.app.Activity;
- import android.content.Intent;
- import android.net.Uri;
- import android.os.Bundle;
- import android.util.Log;
- import android.webkit.WebView;
-
-
- public class MainActivity extends Activity {
- private PersonService service;
- private WebView webview;
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);
- service =new PersonService();
- webview = (WebView) this.findViewById(R.id.webView);//android內置浏覽器對象
- webview.getSettings().setJavaScriptEnabled(true);//啟用javascript支持
- //添加一個js交互接口,方便html布局文件中的javascript代碼能與後台java代碼直接交互訪問
- webview.addJavascriptInterface(new PersonPlugin() , "Person");//new類名,交互訪問時使用的別名
- // <body onload="javascript:Person.getPersonList()">
- webview.loadUrl("file:///android_asset/index.html");//加載本地的html布局文件
- //其實可以把這個html布局文件放在公網中,這樣方便隨時更新維護 例如 webview.loadUrl("www.xxxx.com/index.html");
- }
- //定義一個內部類,從java後台(可能是從網絡,文件或者sqllite數據庫) 獲取List集合數據,並轉換成json字符串,調用前台js代碼
- private final class PersonPlugin{
- public void getPersonList(){
- List<Person> list = service.getPersonList();//獲得List數據集合
- //將List泛型集合的數據轉換為JSON數據格式
- try {
- JSONArray arr =new JSONArray();
- for(Person person :list)
- {
- JSONObject json =new JSONObject();
- json.put("id", person.getId());
- json.put("name", person.getName());
- json.put("mobile",person.getMobile());
- arr.put(json);
-
- }
- String JSONStr =arr.toString();//轉換成json字符串
- webview.loadUrl("javascript:show('"+ JSONStr +"')");//執行html布局文件中的javascript函數代碼--
- Log.i("MainActivity", JSONStr);
- } catch (Exception e) {
- // TODO: handle exception
- }
-
- }
- //打電話的方法
- public void call(String mobile){
- Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:"+ mobile));
- startActivity(intent);
- }
- }
- }
- package com.dazhuo.domain;
-
- public class Person {
- private Integer id;
- public Integer getId() {
- return id;
- }
- public Person(Integer id, String name, String mobile) {
- super();
- this.id = id;
- this.name = name;
- this.mobile = mobile;
- }
- public void setId(Integer id) {
- this.id = id;
- }
- public String getName() {
- return name;
- }
- public void setName(String name) {
- this.name = name;
- }
- public String getMobile() {
- return mobile;
- }
- public void setMobile(String mobile) {
- this.mobile = mobile;
- }
- private String name;
- private String mobile;
- }
- package com.dazhuo.service;
-
- import java.util.ArrayList;
- import java.util.List;
-
- import com.dazhuo.domain.Person;
-
- public class PersonService {
- public List<Person> getPersonList()
- {
-
- List<Person> list =new ArrayList<Person>();
- list.add(new Person(32, "aa", "13675574545"));
- list.add(new Person(32, "bb", "13698874545"));
- list.add(new Person(32, "cc", "13644464545"));
- list.add(new Person(32, "dd", "13908978877"));
- list.add(new Person(32, "ee", "15908989898"));
- return list;
- }
- }
- <!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>Insert title here</title>
- <script type="text/javascript">
- function show(jsondata){
- var jsonobjs = eval(jsondata);
- var table = document.getElementById("personTable");
- for(var y=0; y<jsonobjs.length; y++){
- 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);
- td3.align = "center";
- //設置列內容和屬性
- td1.innerHTML = jsonobjs[y].id;
- td2.innerHTML = jsonobjs[y].name;
- td3.innerHTML = "<a href='javascript:Person.call(\""+ jsonobjs[y].mobile+ "\")'>"+ jsonobjs[y].mobile+ "</a>";
- }
- }
- </script>
-
- </head>
- <!-- js代碼通過webView調用其插件中的java代碼 -->
- <body onload="javascript:Person.getPersonList()">
- <table border="0" width="100%" id="personTable" cellspacing="0">
- <tr>
- <td width="20%">編號</td><td width="40%" align="center">姓名</td><td align="center">電話</td>
- </tr>
- </table>
- <a href="javascript:window.location.reload()">刷新</a>
- </body>
-
- </html>