zoukankan      html  css  js  c++  java

  • android中使用html作布局文件

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

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

    [java] view plaincopy
    1. package com.dazhuo.ui;  
    2.   
    3. import java.util.List;  
    4.   
    5. import org.json.JSONArray;  
    6. import org.json.JSONObject;  
    7.   
    8. import com.dazhuo.domain.Person;  
    9. 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. }  
    [java] view plaincopy
    1. package com.dazhuo.domain;  
    2.   
    3. public class Person {  
    4.     private Integer id;  
    5.     public Integer getId() {  
    6.         return id;  
    7.     }  
    8.     public Person(Integer id, String name, String mobile) {  
    9.         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. }  

    [java] view plaincopy
    1. package com.dazhuo.service;  
    2.   
    3. import java.util.ArrayList;  
    4. import java.util.List;  
    5.   
    6. import com.dazhuo.domain.Person;  
    7.   
    8. public class PersonService {  
    9.    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. }  

    [html] view plaincopy
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    2. <html>  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    5. <title>Insert title here</title>  
    6. <script type="text/javascript">  
    7.     function show(jsondata){  
    8.             var jsonobjs = eval(jsondata);  
    9.             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>  



    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>

    版权声明：本文为博主原创文章，未经博主允许不得转载。


     
  • 相关阅读:
    高并发系统设计（十九）【注册中心】：微服务架构结合RPC框架如何做到分布式系统寻址？
    高并发系统设计（十八)：【RPC框架】10万QPS下如何实现毫秒级的服务调用？
    you-get 库的使用方法
    vue 全局注册signalr
    将Minio.exe注册成windows服务
    NPOI 常用方法封装
    利用NPOI给excel文件中添加图片
    Oss 对象服务存储前端方法封装
    C# 常用方法扩展及封装记录
    PostgreSQL配置密码复杂度策略
  • 原文地址：https://www.cnblogs.com/yilongm/p/4742781.html
Copyright © 2011-2022 走看看