文档章节

Android中使用HTML作布局文件以及调用Javascript

Jamsm
 Jamsm
发布于 2016/05/06 13:57
字数 1343
阅读 64
收藏 5

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

Step 1 :新建一个Android工程,命名为HtmlForUI

Step 2:在assets目录下写一个android.html文件,代码如下:

[html] view plain copy

  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){//  [{name:"xxx",amount:600,phone:"13988888"},{name:"bb",amount:200,phone:"1398788"}]  

  8.             var jsonobjs = eval(jsondata); //   将字符串string转换成json  

  9.             var table = document.getElementById("personTable");  

  10.             for(var y=0; y<jsonobjs.length; y++){  

  11.                 var tr = table.insertRow(table.rows.length); //添加一行  

  12.                 //添加3列  

  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].name;   

  20.                 td2.innerHTML = jsonobjs[y].amount;   

  21.                  

  22.                 td3.innerHTML = "<a href='javascript:contact.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";   

  23.             }  

  24.     }  

  25. </script>  

  26. </head>  

  27. <!-- 调用WebView设置的    webView.addJavascriptInterface(new JSObject(), "contact");   插件contact中的java代码 -->  

  28. <body onload="javascript:contact.showcontacts()">  

  29.    <table border="1" width="100%" id="personTable" cellspacing="0">  

  30.         <tr>  

  31.             <td width="35%">姓名</td><td width="30%" align="center">存款</td><td align="center">电话</td>  

  32.         </tr>  

  33.     </table>  

  34.     <a href="javascript:window.location.reload()">刷新</a>  

  35.     <a href="javascript:contact.startNewActivity()">跳转</a>  

  36. </body>  

  37.   

  38. </html>  


Step 3:编写该应用用到的用户实体类Contact.Java和业务逻辑类 ContactService.java的代码如下:

Contact.java

[java] view plain copy

  1. package cn.roco.domain;  

  2.   

  3. public class Contact {  

  4.     private Integer id;  

  5.     private String name;  

  6.     private String phone;  

  7.     private Integer amount;  

  8.   

  9.     public Integer getId() {  

  10.         return id;  

  11.     }  

  12.   

  13.     public void setId(Integer id) {  

  14.         this.id = id;  

  15.     }  

  16.   

  17.     public String getName() {  

  18.         return name;  

  19.     }  

  20.   

  21.     public void setName(String name) {  

  22.         this.name = name;  

  23.     }  

  24.   

  25.     public String getPhone() {  

  26.         return phone;  

  27.     }  

  28.   

  29.     public void setPhone(String phone) {  

  30.         this.phone = phone;  

  31.     }  

  32.   

  33.     public Integer getAmount() {  

  34.         return amount;  

  35.     }  

  36.   

  37.     public void setAmount(Integer amount) {  

  38.         this.amount = amount;  

  39.     }  

  40.   

  41.     public Contact(Integer id, String name, String phone, Integer amount) {  

  42.         this.id = id;  

  43.         this.name = name;  

  44.         this.phone = phone;  

  45.         this.amount = amount;  

  46.     }  

  47.   

  48. }  


ContactServiceContactService.java

 

[java] view plain copy

  1. package cn.roco.service;  

  2.   

  3. import java.util.ArrayList;  

  4. import java.util.List;  

  5.   

  6. import cn.roco.domain.Contact;  

  7.   

  8. public class ContactService {  

  9.     /** 

  10.      * 具体业务可以取本地数据库中的数据 也可以从远程服务器获取数据 

  11.      */  

  12.     public List<Contact> getContacts(){  

  13.         List<Contact> contacts=new ArrayList<Contact>();  

  14.         for (int i = 1; i <= 15; i++) {  

  15.             contacts.add(new Contact(i, "Roco_"+i, "09408400"+i, 1000+i));  

  16.         }  

  17.         return contacts;  

  18.     }  

  19. }  


Step4: 我们需要一个类来加载html页面以及JavaScript的调用Step4: 我们需要一个类来加载html页面以及javascript的调用  

MainActivity.java

[java] view plain copy

  1. package cn.roco.view.html;  

  2.   

  3. import java.util.List;  

  4.   

  5. import org.json.JSONArray;  

  6. import org.json.JSONObject;  

  7.   

  8. import cn.roco.domain.Contact;  

  9. import cn.roco.service.ContactService;  

  10. import android.app.Activity;  

  11. import android.content.Intent;  

  12. import android.net.Uri;  

  13. import android.os.Bundle;  

  14. import android.webkit.WebView;  

  15.   

  16. public class MainActivity extends Activity {  

  17.   

  18.     private WebView webView;  

  19.   

  20.     private ContactService contactService;  

  21.   

  22.     /** Called when the activity is first created. */  

  23.     @Override  

  24.     public void onCreate(Bundle savedInstanceState) {  

  25.         super.onCreate(savedInstanceState);  

  26.         setContentView(R.layout.main);  

  27.         /** android内置浏览器对象 */  

  28.         webView = (WebView) this.findViewById(R.id.webView);  

  29.   

  30.         /** 

  31.          * 加载放在assets目录下的android.html文件 注意url的地址前缀为: file:///android_asset/ 

  32.          *  

  33.          * 其实可以把这个html布局文件放在公网中,这样方便随时更新维护 例如 

  34.          * webview.loadUrl("http://192.168.1.100:8080/Hello/index.html"); 

  35.          */  

  36.         webView.loadUrl("file:///android_asset/android.html");  

  37.   

  38.         /** 允许javascript的运行 */  

  39.         webView.getSettings().setJavaScriptEnabled(true);  

  40.   

  41.         /** 

  42.          * 添加一个js交互接口,方便html布局文件中的javascript代码能与后台java代码直接交互访问 

  43.          * "contact"为给该对象取得别名 对应android.html中的contact 

  44.          */  

  45.         webView.addJavascriptInterface(new ContactPlugin(), "contact");// new类名,交互访问时使用的别名  

  46.   

  47.         contactService = new ContactService();  

  48.   

  49.     }  

  50.   

  51.     /** 

  52.      * 自定义的javascript对象 

  53.      */  

  54.     private final class ContactPlugin {  

  55.         /** 

  56.          * 对应: <body onload="javascript:contact.showcontacts()"> 

  57.          */  

  58.         public void showcontacts() {  

  59.             try {  

  60.                 // 获得List数据集合  

  61.                 List<Contact> contacts = contactService.getContacts();  

  62.                 // 将List泛型集合的数据转换为JSON数据格式  

  63.                 JSONArray jsonArray = new JSONArray();  

  64.                 for (Contact contact : contacts) {  

  65.                     JSONObject jsonObject = new JSONObject();  

  66.                     jsonObject.put("name", contact.getName());  

  67.                     jsonObject.put("amount", contact.getAmount());  

  68.                     jsonObject.put("phone", contact.getPhone());  

  69.                     jsonArray.put(jsonObject);  

  70.                 }  

  71.                 // 转换成json字符串  

  72.                 String json = jsonArray.toString();  

  73.                 /** 调用android.html中的show()方法 */  

  74.                 webView.loadUrl("javascript:show('" + json + "')");  

  75.             } catch (Exception e) {  

  76.                 e.printStackTrace();  

  77.             }  

  78.         }  

  79.   

  80.         /** 

  81.          * 对应: td3.innerHTML = "<a href='javascript:contact.call(\""+ 

  82.          * jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>"; 

  83.          */  

  84.         public void call(String phone) {  

  85.             /** 

  86.              * 调用拨号程序 

  87.              */  

  88.             Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:"  

  89.                     + phone));  

  90.             startActivity(intent);  

  91.         }  

  92.   

  93.         public void startNewActivity() {  

  94.             Intent intent = new Intent(MainActivity.this, NewActivity.class);  

  95.             startActivity(intent);  

  96.         }  

  97.   

  98.     }  

  99.   

  100. }  

 

在html页面中,我们可以点击超链接跳转到android中的Activity去,我们新建一个NewActivity

 

[java] view plain copy

  1. package cn.roco.view.html;  

  2.   

  3. import android.app.Activity;  

  4. import android.os.Bundle;  

  5.   

  6. public class NewActivity extends Activity {  

  7.     @Override  

  8.     protected void onCreate(Bundle savedInstanceState) {  

  9.         super.onCreate(savedInstanceState);  

  10.   

  11.         setContentView(R.layout.msg);  

  12.   

  13.     }  

  14. }  


step5:将上面两个Activity的布局文件写好

main.xml

[html] view plain copy

  1. <?xml version="1.0" encoding="utf-8"?>  

  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

  3.     android:orientation="vertical" android:layout_width="fill_parent"  

  4.     android:layout_height="fill_parent">  

  5.       

  6.     <WebView android:layout_width="fill_parent"  

  7.         android:layout_height="fill_parent" android:id="@+id/webView" />  

  8. </LinearLayout>  


 

msg.xml

[html] view plain copy

  1. <?xml version="1.0" encoding="utf-8"?>  

  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

  3.     android:orientation="vertical" android:layout_width="fill_parent"  

  4.     android:layout_height="fill_parent">  

  5.     <TextView android:text="这是一个新的Activity"  

  6.         android:layout_width="match_parent" android:layout_height="wrap_content"/>  

  7. </LinearLayout>  


step6:部署文件

[html] view plain copy

  1. <?xml version="1.0" encoding="utf-8"?>  

  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  

  3.     package="cn.roco.view.html" android:versionCode="1"  

  4.     android:versionName="1.0">  

  5.     <uses-sdk android:minSdkVersion="8" />  

  6.   

  7.     <uses-permission android:name="android.permission.CALL_PHONE" />  

  8.   

  9.     <application android:icon="@drawable/icon" android:label="@string/app_name">  

  10.         <activity android:name=".MainActivity" android:label="@string/app_name">  

  11.             <intent-filter>  

  12.                 <action android:name="android.intent.action.MAIN" />  

  13.                 <category android:name="android.intent.category.LAUNCHER" />  

  14.             </intent-filter>  

  15.         </activity>  

  16.         <activity android:name=".NewActivity" />  

  17.     </application>  

  18. </manifest>  


 

step7:运行效果如下图所示

点击电话超链接可以激活拨号系统:

点击跳转按钮可以激活新的Activity

 


本文转载自:

Jamsm
粉丝 6
博文 75
码字总数 10707
作品 0
南京
私信 提问
WebView深度学习(一)之WebView的基本使用以及Android和js的交互

前言:随着市场需求的不断变化,原生安卓已经无法满足客户的需要了,现在很多app都在使用Android和h5的交互实现某些功能,比如商品详情页,文章详情页面,商品点评页面,还有某些复杂的展示页...

aweiloveandroid
2017/07/01
0
0
使用Kotlin:让Android与JS交互的详解

先来说说什么是JS交互: 说的俗一点就是通过我们项目中的控件来调用HTML里的JS代码,也可以通过JS来调用项目中的代码。 Android与JS之间的桥梁就是WebView了,我们是通过WebView来实现他们的...

富江___
2018/06/11
0
0
WebView与JavaScript交互

在WebView中使用JavaScript   如果你想要载入的页面中用了JavaScript,你必须为你的WebView使能JavaScript。   一旦使能之后,你也可以自己创建接口在你的应用和JavaScript代码间进行交互...

ljrapple
2014/07/29
440
0
Android中使用WebView

现在很多移动端的应用,大多数都采用混合开发,也就是安卓原生控件加上我们的html代码 当然,要使用html的东西,android提供了一个控件,也就是WebView 那我们一起来看看WebView的使用吧 首先...

月夜中徘徊
2018/05/15
34
0
ionic react-native和native开发移动app到底那个好

ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比。欢迎大家补充指正 一、 跨平台特性 ionic : ...

htzhanglong
2016/02/27
8.4K
7

没有更多内容

加载失败,请刷新页面

加载更多

可见性有序性,Happens-before来搞定

写在前面 上一篇文章并发 Bug 之源有三,请睁大眼睛看清它们 谈到了可见性/原子性/有序性三个问题,这些问题通常违背我们的直觉和思考模式,也就导致了很多并发 Bug 为了解决 CPU,内存,IO ...

tan日拱一兵
31分钟前
3
0
网络七层模型与TCP/UDP

为了使全球范围内不同的计算机厂家能够相互之间能够比较协调的进行通信,这个时候就有必要建立一种全球范围内的通用协议,以规范各个厂家之间的通信接口,这就是网络七层模型的由来。本文首先...

爱宝贝丶
34分钟前
4
0
Jenkins World 贡献者峰会及专家答疑展位

本文首发于:Jenkins 中文社区 原文链接 作者:Marky Jackson 译者:shunw Jenkins World 贡献者峰会及专家答疑展位 本文为 Jenkins World 贡献者峰会活动期间的记录 Jenkins 15周岁啦!Jen...

Jenkins中文社区
52分钟前
8
0
杂谈:面向微服务的体系结构评审中需要问的三个问题

面向微服务的体系结构如今风靡全球。这是因为更快的部署节奏和更低的成本是面向微服务的体系结构的基本承诺。 然而,对于大多数试水的公司来说,开发活动更多的是将现有的单块应用程序转换为...

liululee
今天
8
0
OSChina 周二乱弹 —— 我等饭呢,你是不是来错食堂了?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @ 自行车丢了:给主编推荐首歌 《クリスマスの夜》- 岡村孝子 手机党少年们想听歌,请使劲儿戳(这里) @烽火燎原 :国庆快来,我需要长假! ...

小小编辑
今天
915
12

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部