我的Android进阶之旅------>Android中使用HTML作布局文件以及调用Javascript

简介:     在android开发中,通常使用xml格式来描述布局文件,采用Android的layout布局有时候根本满足不了我们对于界面的要求,有时候没有web页面那样炫。

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function show(jsondata){//  [{name:"xxx",amount:600,phone:"13988888"},{name:"bb",amount:200,phone:"1398788"}]
	        var jsonobjs = eval(jsondata); //   将字符串string转换成json
	        var table = document.getElementById("personTable");
	        for(var y=0; y<jsonobjs.length; y++){
		        var tr = table.insertRow(table.rows.length); //添加一行
		        //添加3列
		        var td1 = tr.insertCell(0);
		        var td2 = tr.insertCell(1);
		        td2.align = "center";
		        var td3 = tr.insertCell(2);
		        td3.align = "center";
		        //设置列的内容和数学
		        td1.innerHTML = jsonobjs[y].name; 
		        td2.innerHTML = jsonobjs[y].amount; 
		       
		        td3.innerHTML = "<a href='javascript:contact.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>"; 
			}
	}
</script>
</head>
<!-- 调用WebView设置的	webView.addJavascriptInterface(new JSObject(), "contact");   插件contact中的java代码 -->
<body onload="javascript:contact.showcontacts()">
   <table border="1" width="100%" id="personTable" cellspacing="0">
		<tr>
			<td width="35%">姓名</td><td width="30%" align="center">存款</td><td align="center">电话</td>
		</tr>
	</table>
	<a href="javascript:window.location.reload()">刷新</a>
	<a href="javascript:contact.startNewActivity()">跳转</a>
</body>

</html>


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

Contact.java

package cn.roco.domain;

public class Contact {
	private Integer id;
	private String name;
	private String phone;
	private Integer amount;

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPhone() {
		return phone;
	}

	public void setPhone(String phone) {
		this.phone = phone;
	}

	public Integer getAmount() {
		return amount;
	}

	public void setAmount(Integer amount) {
		this.amount = amount;
	}

	public Contact(Integer id, String name, String phone, Integer amount) {
		this.id = id;
		this.name = name;
		this.phone = phone;
		this.amount = amount;
	}

}


ContactServiceContactService.java

 

package cn.roco.service;

import java.util.ArrayList;
import java.util.List;

import cn.roco.domain.Contact;

public class ContactService {
	/**
	 * 具体业务可以取本地数据库中的数据 也可以从远程服务器获取数据
	 */
	public List<Contact> getContacts(){
		List<Contact> contacts=new ArrayList<Contact>();
		for (int i = 1; i <= 15; i++) {
			contacts.add(new Contact(i, "Roco_"+i, "09408400"+i, 1000+i));
		}
		return contacts;
	}
}


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

MainActivity.java

package cn.roco.view.html;

import java.util.List;

import org.json.JSONArray;
import org.json.JSONObject;

import cn.roco.domain.Contact;
import cn.roco.service.ContactService;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends Activity {

	private WebView webView;

	private ContactService contactService;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		/** android内置浏览器对象 */
		webView = (WebView) this.findViewById(R.id.webView);

		/**
		 * 加载放在assets目录下的android.html文件 注意url的地址前缀为: file:///android_asset/
		 * 
		 * 其实可以把这个html布局文件放在公网中,这样方便随时更新维护 例如
		 * webview.loadUrl("http://192.168.1.100:8080/Hello/index.html");
		 */
		webView.loadUrl("file:///android_asset/android.html");

		/** 允许javascript的运行 */
		webView.getSettings().setJavaScriptEnabled(true);

		/**
		 * 添加一个js交互接口,方便html布局文件中的javascript代码能与后台java代码直接交互访问
		 * "contact"为给该对象取得别名 对应android.html中的contact
		 */
		webView.addJavascriptInterface(new ContactPlugin(), "contact");// new类名,交互访问时使用的别名

		contactService = new ContactService();

	}

	/**
	 * 自定义的javascript对象
	 */
	private final class ContactPlugin {
		/**
		 * 对应: <body onload="javascript:contact.showcontacts()">
		 */
		public void showcontacts() {
			try {
				// 获得List数据集合
				List<Contact> contacts = contactService.getContacts();
				// 将List泛型集合的数据转换为JSON数据格式
				JSONArray jsonArray = new JSONArray();
				for (Contact contact : contacts) {
					JSONObject jsonObject = new JSONObject();
					jsonObject.put("name", contact.getName());
					jsonObject.put("amount", contact.getAmount());
					jsonObject.put("phone", contact.getPhone());
					jsonArray.put(jsonObject);
				}
				// 转换成json字符串
				String json = jsonArray.toString();
				/** 调用android.html中的show()方法 */
				webView.loadUrl("javascript:show('" + json + "')");
			} catch (Exception e) {
				e.printStackTrace();
			}
		}

		/**
		 * 对应: td3.innerHTML = "<a href='javascript:contact.call(\""+
		 * jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";
		 */
		public void call(String phone) {
			/**
			 * 调用拨号程序
			 */
			Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:"
					+ phone));
			startActivity(intent);
		}

		public void startNewActivity() {
			Intent intent = new Intent(MainActivity.this, NewActivity.class);
			startActivity(intent);
		}

	}

}

 

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

 

package cn.roco.view.html;

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

public class NewActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		setContentView(R.layout.msg);

	}
}


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

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	
	<WebView android:layout_width="fill_parent"
		android:layout_height="fill_parent" android:id="@+id/webView" />
</LinearLayout>


 

msg.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<TextView android:text="这是一个新的Activity"
		android:layout_width="match_parent" android:layout_height="wrap_content"/>
</LinearLayout>


step6:部署文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="cn.roco.view.html" android:versionCode="1"
	android:versionName="1.0">
	<uses-sdk android:minSdkVersion="8" />

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

	<application android:icon="@drawable/icon" android:label="@string/app_name">
		<activity android:name=".MainActivity" android:label="@string/app_name">
			<intent-filter>
				<action android:name="android.intent.action.MAIN" />
				<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>
		<activity android:name=".NewActivity" />
	</application>
</manifest>


 

step7:运行效果如下图所示

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

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

 


==================================================================================================

  作者:欧阳鹏  欢迎转载,与人分享是进步的源泉!

  转载请保留原文地址http://blog.csdn.net/ouyang_peng

==================================================================================================


相关文章
|
7天前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
32 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
7天前
|
XML 存储 Java
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
32 3
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
|
1月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
627 0
|
4月前
|
Android开发 开发者
Android自定义View之不得不知道的文件attrs.xml(自定义属性)
本文详细介绍了如何通过自定义 `attrs.xml` 文件实现 Android 自定义 View 的属性配置。以一个包含 TextView 和 ImageView 的 DemoView 为例,讲解了如何使用自定义属性动态改变文字内容和控制图片显示隐藏。同时,通过设置布尔值和点击事件,实现了图片状态的切换功能。代码中展示了如何在构造函数中解析自定义属性,并通过方法 `setSetting0n` 和 `setbackeguang` 实现功能逻辑的优化与封装。此示例帮助开发者更好地理解自定义 View 的开发流程与 attrs.xml 的实际应用。
Android自定义View之不得不知道的文件attrs.xml(自定义属性)
|
4月前
|
Java Android开发
Android studio中build.gradle文件简单介绍
本文解析了Android项目中build.gradle文件的作用,包括jcenter仓库配置、模块类型定义、包名设置及依赖管理,涵盖本地、库和远程依赖的区别。
420 19
|
4月前
|
存储 XML Java
Android 文件数据储存之内部储存 + 外部储存
简介:本文详细介绍了Android内部存储与外部存储的使用方法及核心原理。内部存储位于手机内存中,默认私有,适合存储SharedPreferences、SQLite数据库等重要数据,应用卸载后数据会被清除。外部存储包括公共文件和私有文件,支持SD卡或内部不可移除存储,需申请权限访问。文章通过代码示例展示了如何保存、读取、追加、删除文件以及将图片保存到系统相册的操作,帮助开发者理解存储机制并实现相关功能。
1108 2
|
7月前
|
移动开发 安全 Java
Android历史版本与APK文件结构
通过以上内容,您可以全面了解Android的历史版本及其主要特性,同时掌握APK文件的结构和各部分的作用。这些知识对于理解Android应用的开发和发布过程非常重要,也有助于在实际开发中进行高效的应用管理和优化。希望这些内容对您的学习和工作有所帮助。
707 83
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
218 0
Next.js 实战 (六):如何实现文件本地上传
|
10月前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中,还可以用table元素来实现双行夹批效果,但比flex布局代码更复杂,效果也不见得更理想。
156 10

热门文章

最新文章