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

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

MainActivity.java

01 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

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

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

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>

Android 中使用 html 作布局文件的更多相关文章

  1. android中使用html作布局文件

    在android开发中,通常使用xml格式来描述布局文件.就目前而言,熟悉android布局及美化的人员少之又少,出现了严重的断层.大部分企业,其实还是程序员自己动手布局.这样既浪费时间和精力,也未必 ...

  2. Android 自定义View及其在布局文件中的使用示例(三):结合Android 4.4.2_r1源码分析onMeasure过程

    转载请注明出处 http://www.cnblogs.com/crashmaker/p/3549365.html From crash_coder linguowu linguowu0622@gami ...

  3. Android 自定义View及其在布局文件中的使用示例(二)

    转载请注明出处 http://www.cnblogs.com/crashmaker/p/3530213.html From crash_coder linguowu linguowu0622@gami ...

  4. Android 自定义View及其在布局文件中的使用示例

    前言: 尽管Android已经为我们提供了一套丰富的控件,如:Button,ImageView,TextView,EditText等众多控件,但是,有时候在项目开发过程中,还是需要开发者自定义一些需要 ...

  5. android 非activity如何得到布局文件 (java文件中获取布局文件)

    Android中得到布局文件对象有两种方式第一种,在Activity所在类中this.getLayoutInflater().inflater(R.layout.布局文件名,null);第二种,在非A ...

  6. Android笔记——在布局文件中插入另一个布局文件

    假如有一个布局文件A.xml想把另外一个布局文件B.xml引进其布局,则可以通过下面的代码 <include layout="@layout/B" />

  7. android学习——Android Studio下创建menu布局文件

    一.问题: android studio项目中没有看到menu文件夹: 在android studio项目中想要添加menu布局文件,一开始我的做法是:直接在res文件夹右键选择xml文件来添加,如下 ...

  8. Android Studio下创建menu布局文件

    一.问题: android studio项目中没有看到menu文件夹: 在android studio项目中想要添加menu布局文件,一开始我的做法是:直接在res文件夹右键选择xml文件来添加,如下 ...

  9. 源代码解析Android中View的layout布局过程

    Android中的Veiw从内存中到呈如今UI界面上须要依次经历三个阶段:量算 -> 布局 -> 画图,关于View的量算.布局.画图的整体机制可參见博文 < Android中Vie ...

随机推荐

  1. 关于IIS部署成功后,局域网其他用户无法访问的问题解决方法

    关于win7部署iis后,局域网的其他用户不能访问的问题.   在win7系统中,部署好iis后,自己本地可以发布和预览.但在局域网中的其他用户不可以访问.下面说一下这个原因. 这是因为win7自带的 ...

  2. 第2章 来点C#的感觉

    创建控制台项目 using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...

  3. 从JPG中获取缩略图

    using System; using System.Drawing; using System.Collections; using System.ComponentModel; using Sys ...

  4. 如何使用CSS Sprites技术进行图片合并

    http://jingyan.baidu.com/article/066074d6757654c3c21cb02d.html

  5. jq事件绑定

    有些时候我们在页面中会动态的添加一下dom结构,当我们想要给这些结点添加事件时需要在此节点绑定一系列的操作. <a href="#" onclick="addBtn ...

  6. css background-position:x% y%

    规则1: background-position:xpx ypx; 为正值时:背景图片的左上顶点朝右下移动直至距离div的左上顶点为xpx ypx: 规则2: background-position: ...

  7. iphone微信长按二维码识别不了

    在安卓版的微信长按二维码可以识别(前提是你的微信版本到支持此功能),但是到了苹果版的微信就识别不了,经个人测试发现是缩放的问题: 1.设置了初始缩放设置为1,最大缩放值要>=1,不支持缩放.-- ...

  8. phpcms v9二次开发之数据模型类

    系统模型类:model.class.php数据模型类的位置:/phpcms/libs/classes phpcms v9二次开发中,我们要经常需要对模块的数据表进行查询.添加.修改和删除数据等操作,所 ...

  9. AMH4.2 Ftp账号路径修改设置

    AMH4.2的ftp控制有点不尽如人意,每个ftp账号只能对应一个站点:如果按照面板所提供的权限,有多少个站就得设置多少个ftp账号,这一操作就会非常麻烦,造成效率低下:不过AMH5.0已经能够通过面 ...

  10. R for installing package 'omg'

    The time i have tried to install the package named 'PODBC'  and it worked. But now i meet a problem ...