关闭

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

标签: androidjavascripthtmlstringlayoutinteger
415人阅读 评论(0) 收藏 举报

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 元

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:982次
    • 积分:15
    • 等级:
    • 排名:千里之外
    • 原创:0篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档