[转帖]Android中采用html页面布局以及调用JavaScript_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方技术论坛-国内领先的Weblogic、Tuxedo中间件技术论坛
联动北方-国内领先的云技术服务提供商
»  游客             当前位置：  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 3210 | 回复: 0   主题： [转帖]Android中采用html页面布局以及调用JavaScript        下一篇 
huizai
注册用户
等级：少校
经验：933
发帖：83
精华：0
注册：2013-6-18
状态：离线
发送短消息息给huizai 加好友    发送短消息息给huizai 发消息
发表于： IP：您无权察看 2013-6-25 16:40:54 | [全部帖] [楼主帖] 楼主

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

这个是我们放好页面后的工程目录。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>
  26. </head>
  27. <!-- js代码通过webView调用其插件中的java代码 -->
  28. <body onload="javascript:contact.getContacts()">
  29.  <table border="0" width="100%" id="personTable" cellspacing="0">
  30.  <tr bgcolor="#00FFCC">
  31.  <td width="20%">编号</td><td width="40%" align="center">姓名</td><td align="center">电话</td>
  32.  </tr>
  33.  </table>
  34.  <img src="images/img.png" >
  35.  <a href="javascript:window.location.reload()">刷新</a>
  36.  <a href="javascript:contact.startAcivity()">跳转</a>
  37. </body>
  38. </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;
  3. import android.app.Activity;
  4. import android.os.Bundle;
  6. public class NewActivity extends Activity{
  7.        @Override
  8.        protected void onCreate(Bundle savedInstanceState) {
  9.              // TODO Auto-generated method stub
  10.              super.onCreate(savedInstanceState);
  11.              setContentView(R.layout.msg);
  12.        }
  13.       
  14. }


复制代码

布局文件中

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" >
  7.     <EditText
  8.         android:id="@+id/editText1"
  9.         android:hint="@string/input"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content" >
  12.         
  13.     </EditText>
  15. </LinearLayout>


复制代码

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

  1. package com.chinasofti.service;
  3. import java.util.ArrayList;
  4. import java.util.List;
  6. import com.chinasofti.domain.Contact;
  9. public class ContactService {
  10.       
  11.        public List<Contact> getContacts(){
  12.              List<Contact> contacts = new ArrayList<Contact>();
  13.              contacts.add(new Contact(34, "张三", "1398320333"));
  14.              contacts.add(new Contact(39, "李四", "1332432444"));
  15.              contacts.add(new Contact(67, "王五", "1300320333"));
  16.              return contacts;
  17.        }
  18. }


复制代码

用户实体类的代码如下：

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


赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码： 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论

Weblogic中间件技术论坛

 |

Tuxedo中间件技术论坛

 |

数据库论坛

 |

Java论坛

 |

Linux/unix论坛

 |

网站地图


Powered by LandingBJ     @ 2008-2018     联动北方   
京ICP证号090597    京ICP备案09017624号    京公网安备110112000093号    
400-810-2327     Email：service@landingbj.com   

Powered by landingbj @ 2008-2015 联动北方
京ICP证号090597 京ICP备案09017624号 京公网安备110112000093号
86-27-87056338 Email：service@landingbj.com