Android中采用html页面布局以及调用JavaScript

转载 2012年03月27日 11:59:53

Android中采用html页面布局以及调用JavaScript

在我们开发项目的有些时候,采用Android的layout布局有时候根本满足不了我们对于界面的要求,有时候没有web页面那样炫。其实android也可以采用最原始的html
页面来进行布局,这样我们可以修改html页面来满足我们的需求,达到一个很炫的效果。android中我们也可以利用javascript来帮我们实现一些很简单的应用。其他的话不多说啦,直接开始项目的介绍吧。。。
1.我们需要将我们的html页面放入andorid中的assets文件夹下,然后新建一个images文件夹,放入一张图片。

QQ截图20120326150600.jpg

昨天 15:06 上传
下载附件 (15.02 KB)

这个是我们放好页面后的工程目录。index.html的代码如下:
  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:contact.call(\""+ jsonobjs[y].mobile+ "\")'>"+ jsonobjs[y].mobile+ "</a>";
  22.                         }
  23.         }
  24. </script>

  25. </head>
  26. <!-- js代码通过webView调用其插件中的java代码 -->
  27. <body onload="javascript:contact.getContacts()">
  28.    <table border="0" width="100%" id="personTable" cellspacing="0">
  29.                 <tr  bgcolor="#00FFCC">
  30.                         <td width="20%">编号</td><td width="40%" align="center">姓名</td><td align="center">电话</td>
  31.                 </tr>
  32.         </table>
  33.         <img src="images/img.png" >
  34.         <a href="javascript:window.location.reload()">刷新</a>
  35.         <a href="javascript:contact.startAcivity()">跳转</a>
  36. </body>
  37. </html>
复制代码

2. 我们需要一个类来加载html页面以及javascript的调用

MainActivity的代码如下:

  1. package com.chinasofti.html;import java.util.List;import org.json.JSONArray;
  2. import org.json.JSONException;
  3. import org.json.JSONObject;
  4. import com.chinasofti.domain.Contact;
  5. import com.chinasofti.service.ContactService;import android.app.Activity;
  6. import android.content.Intent;
  7. import android.net.Uri;
  8. import android.os.Bundle;
  9. import android.util.Log;
  10. import android.webkit.WebView;public class MainActivity extends Activity {
  11. private static final String TAG = "MainActivity";
  12.     private ContactService contactService;
  13.     private WebView webView;
  14.     @Override
  15.     public void onCreate(Bundle savedInstanceState) {
  16.         super.onCreate(savedInstanceState);
  17.         setContentView(R.layout.main);
  18.         
  19.         contactService = new ContactService();
  20.         webView = (WebView)this.findViewById(R.id.webView);
  21.         webView.getSettings().setJavaScriptEnabled(true);
  22.         //设置javaScript可用
  23.         //window.open()
  24.         webView.addJavascriptInterface(new ContactPlugin(), "contact");
  25.         webView.loadUrl("file:///android_asset/index.html");
  26.       // webView.loadUrl("http://192.168.1.100:8080/videoweb/index.html");
  27.     }
  28.    
  29.     private final class ContactPlugin{
  30.      public void getContacts(){
  31.       List<Contact> contacts = contactService.getContacts();
  32.       try {
  33.     JSONArray array = new JSONArray();
  34.     for(Contact contact : contacts){
  35.      
  36.      JSONObject item = new JSONObject();
  37.      item.put("id", contact.getId());
  38.      item.put("name", contact.getName());
  39.      item.put("mobile", contact.getMobile());
  40.      array.put(item);
  41.     }
  42.     String json = array.toString();
  43.     Log.i(TAG, json);
  44.     webView.loadUrl("javascript:show('"+ json +"')");
  45.    } catch (JSONException e) {
  46.     e.printStackTrace();
  47.    }
  48.      }
  49.      
  50.      public void call(String mobile){
  51.       Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:"+ mobile));
  52.       startActivity(intent);
  53.      }
  54.      public void startAcivity(){
  55.       Intent intent =new Intent(MainActivity.this,NewActivity.class);
  56.       startActivity(intent);
  57.      }
  58.     }
  59. }
复制代码


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

NewActivity代码如下:

  1. package com.chinasofti.html;

  2. import android.app.Activity;
  3. import android.os.Bundle;

  4. public class NewActivity extends Activity{
  5.         @Override
  6.         protected void onCreate(Bundle savedInstanceState) {
  7.                 // TODO Auto-generated method stub
  8.                 super.onCreate(savedInstanceState);
  9.                 setContentView(R.layout.msg);
  10.         }

  11. }
复制代码

布局文件中

main.xml的代码如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent"
  6.     >
  7. <WebView
  8.     android:layout_width="fill_parent"
  9.     android:layout_height="fill_parent"
  10.     android:id="@+id/webView"
  11.     />
  12. </LinearLayout>
复制代码


msg.xml代码如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical" >

  6.     <EditText
  7.         android:id="@+id/editText1"
  8.         android:hint="@string/input"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content" >
  11.         
  12.     </EditText>

  13. </LinearLayout>
复制代码


业务逻辑类 ContactService的代码如下:

  1. package com.chinasofti.service;

  2. import java.util.ArrayList;
  3. import java.util.List;

  4. import com.chinasofti.domain.Contact;


  5. public class ContactService {

  6.         public List<Contact> getContacts(){
  7.                 List<Contact> contacts = new ArrayList<Contact>();
  8.                 contacts.add(new Contact(34, "张三", "1398320333"));
  9.                 contacts.add(new Contact(39, "李四", "1332432444"));
  10.                 contacts.add(new Contact(67, "王五", "1300320333"));
  11.                 return contacts;
  12.         }
  13. }
复制代码

用户实体类的代码如下:

  1. package com.chinasofti.domain;

  2. public class Contact {
  3. private Integer id;
  4. private String name;
  5. private String mobile;
  6. public Integer getId() {
  7.   return id;
  8. }
  9. public void setId(Integer id) {
  10.   this.id = id;
  11. }
  12. public String getName() {
  13.   return name;
  14. }
  15. public void setName(String name) {
  16.   this.name = name;
  17. }
  18. public String getMobile() {
  19.   return mobile;
  20. }
  21. public void setMobile(String mobile) {
  22.   this.mobile = mobile;
  23. }
  24. public Contact(Integer id, String name, String mobile) {
  25.   super();
  26.   this.id = id;
  27.   this.name = name;
  28.   this.mobile = mobile;
  29. }

  30. }
复制代码


整个项目的布局如下图所示:

QQ截图20120326151540.jpg

昨天 15:16 上传
下载附件 (19.38 KB)

项目的运行效果:

QQ截图20120326151711.jpg

昨天 15:17 上传
下载附件 (26.43 KB)

这是不是很好看呢,我们点击跳转的话,会跳转到新的Activity里去..代码就是这么多,又不明白的加QQ群:38878612,讨论!请备注eoeandroid....

工程文件:

本帖隐藏的内容

HTMLUI.zip (392.64 KB, 下载次数: 21)
昨天 15:21 上传
下载次数: 21
项目代码
下载积分: e币 -1 元

希望大家能支持一下帖子哈,以后有新的技术一定第一时间给大家分享....

相关文章推荐

Android中采用html页面布局以及调用JavaScript

Android中采用html页面布局以及调用JavaScript 在我们开发项目的有些时候,采用Android的layout布局有时候根本满足不了我们对于界面的要求,有时候没有web页面那样炫。其实...

HTML页面布局

  • 2013年12月14日 16:19
  • 2KB
  • 下载

HTML页面布局方式

页面布局设计方式: 1.框架布局[+CSS]  应用范围:小型的商业网站,论坛,后台管理,学习教程网站,例如:chinaRen社区  优点:支持滚动条,便于导航,节省页面下载时间  缺点:页面...

关于html页面布局

之前做的一个网站,结果今天这几天测试发现在19寸屏幕和手机屏幕上页面布局全乱了,今天刚刚改好,发现还是自己经验不足,做个小总结。 一、div布局要固定宽高          当div不设计长宽高而...

简单HTML5+CSS3页面布局

  • 2016年01月22日 17:30
  • 68KB
  • 下载

实习期间初次使用javascript调用webserver,将html页面提交

所用到的js文件来源于网络:http://pan.baidu.com/s/1qW5SrSw     新建web服务   新建web服务后出现两种文件:.cs和.asmx .asm...
  • lchaxwy
  • lchaxwy
  • 2015年10月02日 18:26
  • 141

html5+css3页面布局

  • 2016年08月23日 11:55
  • 2KB
  • 下载

移动设备HTML5页面布局

  • 2016年04月11日 09:06
  • 4.94MB
  • 下载

Android实现js及webview交互之在html页面中调用系统摄像头

直接上代码,代码里面有注释:1、首先在Manifest.xml中添加如下权限: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android中采用html页面布局以及调用JavaScript
举报原因:
原因补充:

(最多只允许输入30个字)