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

最新推荐文章于 2021-05-26 01:43:28 发布
最新推荐文章于 2021-05-26 01:43:28 发布
阅读量882 收藏
点赞数 1
文章标签： android javascript html string layout integer

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>

  26. </head>
  27. <!-- js代码通过webView调用其插件中的java代码 -->
  28. <body οnlοad="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.         }

  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 {

  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. }

  32. }
复制代码


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

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 元

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

Rafael520
关注
我的Android进阶之旅------>Android中使用HTML作布局文件以及调用Javascript
字节卷动
04-11 4649
在android开发中，通常使用xml格式来描述布局文件，采用Android的layout布局有时候根本满足不了我们对于界面的要求，有时候没有web页面那样炫。就目前而言，熟悉android布局及美化的人员少之又少，出现了严重的断层。大部分企业，其实还是程序员自己动手布局。这样既浪费时间和精力，也未必能达到理想的效果。但是，在企业级的android开发中，使用html页面进行布局，也有很多的优势（
如何在android中使用html作布局文件
09-04
在企业级的android开发中，使用html页面进行布局，也有很多的优势（例如：简单，大部分开发人员及美工都熟悉，方便统一进行更新，管理）
android中使用html作布局文件
javababy1
10-11 117
在android开发中，通常使用xml格式来描述布局文件。就目前而言，熟悉android布局及美化的人员少之又少，出现了严重的断层。大部分企业，其实还是程序员自己动手布局。这样既浪费时间和精力，也未必能达到理想的效果。但是，在企业级的android开发中，使用html页面进行布局，也有很多的优势（例如：简单，大部分开发人员及美工都熟悉，方便统一进行更新，管理）。据笔者了解，已经有不少的公司在使用这...
Android 中使用 html 作布局文件
weixin_34315665的博客
10-18 108
在Android开发中，通常使用xml格式来描述布局文件。就目前而言，熟悉android布局及美化的人员少之又少，出现了严重的断层。大部分企业，其实还是程序员自己动手布局。这样既浪费时间和精力，也未必能达到理想的效果。但是，在企业级的android开发中，使用html页面进行布局，也有很多的优势（例如：简单，大部分开发人员及美工都熟悉，方便统一进行更新，管理）。据笔者了解，已经有不少的公司在使用这...
Android 使用HTML布局页面
weixin_33742618的博客
05-08 336
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;script type="text/javascript&quo
Android与HTML JavaScript交互
小傲傲的博客
06-25 941
HTML(JavaScript)与Android的webView控件相互通信，今天仔细研究才发现，这两者相互调用是非常简单的，只需要在Android里面调用JavaScript的方法，以及在JavaScript里面调用Android里面的方法即可完成，思路很简单，具体执行起来其实也并不复杂，下面是具体的代码，以及代码注释： HTML代码 <!DOCTYPE html> <html...
Android UI使用HTML布局方法实例
09-03
这些方法可以在HTML中的JavaScript代码中被调用，实现Java与JavaScript之间的通信。例如，以下是在HTML中调用这些方法的JavaScript代码： ```javascript <script type="text/javascript"> function test() { Web...
android中Webview与javascript的交互（互相调用）
08-28
#### Android调用JavaScript 通过`WebView.loadUrl()`方法，我们可以执行JavaScript代码： ```java webView.loadUrl("javascript:myJsFunction()"); ``` 或者使用`WebView.evaluateJavascript()`方法，获取...
android之Java+html+javascript混合开发
weixin_30443747的博客
05-14 156
android开发，除了使用原生态的开发方式之外，还可以使用java+html+javascript混合开发的方式来开发，这样可以节省大量的开发时间，同时还可以使不同设备的用户获得相同的用户体验。好了，废话不多说，先来看看今天要做什么。 主要是实现一个简单的注册功能，先用jquery mobile的方式写一个简单的注册页面，点击提交按钮之后跳转到一个新的activity中，同...
Android中使用HTML作布局文件以及调用Javascript
weixin_34362875的博客
05-06 180
2019独角兽企业重金招聘Python工程师标准>>> ...
layout.js布局插件
03-17
可实现网页快速布局
android与javascript相互调用
caozuiba
12-01 127
下面这一节来介绍android和javascript是怎么相互调用的，这样我们的UI界面设计起来就简单多了，而且UI设计起来也可以跨平台。现在有好多web app前台框架了，比如sencha和jquery mobile等。相信未来随着web app的发展我们同样可以使用html设计出和本地应用一样漂亮的界面。这些虽然很美好，但是现在还有很多弊端，比如比本地框架调用慢的多，因为手机是受限的设备，所...
Android采用HTML布局,如何在android中使用html作布局文件
weixin_30499557的博客
05-26 197
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;imp...
Android使用HTML和JavaScript制作页面
k_t_feng的专栏
08-03 389
今天在学习Android的过程中突然发现Android界面可以使用HTML和JavaScript来制作，立马看了这个教程，顺便记录一下(代码也是教程里面的代码)。 1.首先来看一下这个HTML页面 Insert title here function show(jsondata){// [{name:"xxx",amount:600,phone:"13988888"},{name
android html布局界面
weixin_30342827的博客
01-13 127
转载于:https://www.cnblogs.com/heml/p/3517451.html
Android采用HTML布局,入门Android布局之html
weixin_26907223的博客
05-26 1241
新建一个能顺利运行的Android工程后，会发现程序入口AndroidManifest.xml和布局文件activity_layout.xml都是xml文件。xml是Extensible Markup Language的简称，即可扩展标记语言。使用xml能方便的实现数据的跨平台传输和使用。随着万维网(www)的兴起，在其基础上衍生了更适合页面展示的html。使用html能够轻易做出非常酷炫的效果，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值