在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. EventBus 事件总线 案例

    简介 地址:https://github.com/greenrobot/EventBus EventBus是一个[发布 / 订阅]的事件总线.简单点说,就是两人[约定]好怎么通信,一人发布消息,另外一 ...

  2. HTML基础总结<标题>

      HTML: 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的. <h1> 定义最大的标题.<h6> 定义最小的标题. & ...

  3. Svg操作

    SVG文件的JavaScript操作 获取SVG DOM 如果使用img标签插入SVG文件,则无法获取SVG DOM.使用object.iframe.embed标签,可以获取SVG DOM. var ...

  4. mockServer学习

    mockServer学习 很喜欢mockserver官方主页的背景颜色和格式 官方主页如下: http://www.mock-server.com/

  5. [转]SGI STL 红黑树(Red-Black Tree)源代码分析

    STL提供了许多好用的数据结构与算法,使我们不必为做许许多多的重复劳动.STL里实现了一个树结构-Red-Black Tree,它也是STL里唯一实现的一个树状数据结构,并且它是map, multim ...

  6. 详解boost库中的Message Queue .

    Message Queue(后文简写成MQ或消息队列)是boost库中用来封装进程间通信的一种实现,同一台机器上的进程或线程可以通过消息队列来进行通迅.消息队列中的消息由优先级.消息长度.消息数据三部 ...

  7. MyEclipse导入Maven项目报错 Plugin execution not covered by lifecycle configuration:

    web项目使用到mybatis,需要使用mybatis的自动生成代码插件,配置build部分如下: <build> <pluginManagement></pluginM ...

  8. Linux 挂载iso,并设置为源

    ubuntu在安装lsb-core时需要从 /media/cdrom中查找源,无奈我机器的光驱被我换为硬盘了,无法安装光盘,只有在网上下载的iso文件在硬盘中,所以把iso挂载到它要查找位置 执行: ...

  9. 了解JVM

    ---恢复内容开始--- Java对象在运行环境中,对于内存而言,存在三种状态:年轻代.年老代.永生代: 下图是JVM内存模型 1. 年轻代被分为3个部分:Enden区和两个Survivor区,垃圾回 ...

  10. JQUERY1.9学习笔记 之基本过滤器(七) 语言选择器

    语言选择器 jQuery( ":lang(language)" ) 描述:选择所有用特定语言指定的标签. 根据标签指定语言的不同给标签上色. <!DOCTYPE html&g ...