android使用html开发软件界面

最新推荐文章于 2024-04-03 17:49:18 发布

kakukemeit

最新推荐文章于 2024-04-03 17:49:18 发布

阅读量4k

点赞数

分类专栏： Android学习记录文章标签： android html json string mobile javascript

本文链接：https://blog.csdn.net/kakukemeit/article/details/7435570

版权

Android学习记录专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用html开发软件界面

因为android软件开发分工目前还没有细化，程序员往往需要负责软件界面的开发，
虽然软件的界面图片已经由美工设计好了，但如果使用layout技术把软件做成如图片所示的界面确实很困难，
而且也比较耗时。Android通过WebView实现了JS代码与Java代码互相通信的功能，
使得android软件的界面开发也可以采用HTML网页技术，这样，广大网页美工可以参
与进android软件的界面开发工作，从而让程序员从中解脱出来。

<WebView> 代码中使用浏览器Webkit，就要使用到WebView控件；使用<WebView> 显示网页内容；

采用布局layout完成软件界面很累人，很痛苦；

将网页文件及图片放到assets目录下

json数组[{id:20,name:"xxx",mobile:"1332"},{}]

json字符串转成json对象

java对象作为插件安装到webkit，js代码就能访问到数据了；

OO的方法将对象的数据转成json字符串；

配置单元测试：
<uses-library android:name="android.test.runner"/>

隐式意图Intent调用电话拨号器；

Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + mobile));
startActivity(intent);

拨打电话权限：
<uses-permission android:name="android.permission.CALL_PHONE"/>

软件界面更新立刻被用户看到：将index.html放到服务器中；
webView.loadUrl("http://192.168.1.100:8080/web/index.html");

允许网络访问权限：
<uses-permission android:name="android.permission.INTERNET"/>

index.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){
	        var jsonobjs = eval(jsondata);//json字符串转换为json对象
	        var table = document.getElementById("personTable");
	        for(var y=0; y<jsonobjs.length; y++){
		        var tr = table.insertRow(table.rows.length); //添加一行
		        //添加三列
		        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].id; 
		        td2.innerHTML = jsonobjs[y].name; 
		        td3.innerHTML = "<a href='javascript:contact.call(\""+ jsonobjs[y].mobile+ "\")'>"+ jsonobjs[y].mobile+ "</a>"; 
			}
	}
</script>

</head>
<!-- js代码通过webView调用其插件中的java代码 -->
<body οnlοad="javascript:contact.getContacts()">
   <table border="0" width="100%" id="personTable" cellspacing="0">
		<tr>
			<td width="20%">编号</td><td width="40%" align="center">姓名</td><td align="center">电话</td>
		</tr>
	</table>
	<a href="javascript:window.location.reload()">刷新</a>
</body>

</html>

Contact.java

package cn.itcast.domain;

public class Contact {
	private Integer id;
	private String name;
	private String mobile;
	
	public Contact(Integer id, String name, String mobile) {
		this.id = id;
		this.name = name;
		this.mobile = mobile;
	}
	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 getMobile() {
		return mobile;
	}
	public void setMobile(String mobile) {
		this.mobile = mobile;
	}
}

ContactService.java

package cn.itcast.service;

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

import cn.itcast.domain.Contact;

public class ContactService {
	
	public List<Contact> getContacts(){
		List<Contact> contacts = new ArrayList<Contact>();
		contacts.add(new Contact(2, "shenlu", "5201314"));
		contacts.add(new Contact(12, "shenlu", "5201314"));
		contacts.add(new Contact(22, "shenlu", "5201314"));
		return contacts;
	}
}

MainActivity.java

package cn.itcast.html;

import java.util.List;

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

import cn.itcast.domain.Contact;
import cn.itcast.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 ContactService service;
	private WebView webView;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        service = new ContactService();
        webView = (WebView) this.findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);//允许webkit执行js代码；
        //对象，插件名称
        //window.open()
        //document.write()
        //contact.xxx
        webView.addJavascriptInterface(new ContactPlugin(), "contact");//为webkit添加插件，即java类
        webView.loadUrl("file:///android_asset/index.html");//加载html文件
        //webView.loadUrl("http://192.168.1.100:8080/web/index.html");
    }
    
    private final class ContactPlugin{
    	public void getContacts(){
    		List<Contact> contacts = service.getContacts();
    		//OO的方法将对象的数据转成json字符串；
    		try {
				JSONArray jsonArray = new JSONArray();//新建json数组
				for(Contact contact : contacts){
					JSONObject item = new JSONObject();//新建json对象
					item.put("id", contact.getId());
					item.put("name", contact.getName());
					item.put("mobile", contact.getMobile());
					jsonArray.put(item);
				}
				String json = jsonArray.toString();//得到json字符串；
//				webView.loadUrl("javascript:show('[{""},{}]')");
				webView.loadUrl("javascript:show('"+ json +"')"); //调用js的show方法；
				
			} catch (JSONException e) {
				e.printStackTrace();
			}
    	}
    	
    	public void call(String mobile){
    		Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + mobile));
    		startActivity(intent);
    	}
    }
}

ContactTest.java-----单元测试

package cn.itcast.html;

import java.util.List;

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

import cn.itcast.domain.Contact;
import cn.itcast.service.ContactService;
import android.test.AndroidTestCase;
import android.util.Log;

public class ContactTest extends AndroidTestCase {
	private static final String TAG = "MainActivity";

	public void testContact() throws Exception{
		List<Contact> contacts = new ContactService().getContacts();
			
		//OO的方法将对象的数据转成json字符串；
			JSONArray jsonArray = new JSONArray();//新建json数组
			for(Contact contact : contacts){
				JSONObject item = new JSONObject();//新建json对象
				item.put("id", contact.getId());
				item.put("name", contact.getName());
				item.put("mobile", contact.getMobile());
				jsonArray.put(item);
			}
			String json = jsonArray.toString();//得到json字符串；
			Log.i(TAG, json);
	}
}

AndroidManifest.xml

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

    <uses-sdk android:minSdkVersion="8" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <uses-library android:name="android.test.runner"/>
        <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>
    </application>
    
    <uses-permission android:name="android.permission.CALL_PHONE"/>
    <uses-permission android:name="android.permission.INTERNET"/>
    
    <instrumentation android:name="android.test.InstrumentationTestRunner" 
	    android:targetPackage="cn.itcast.html" android:label="My File Test" />

</manifest>

/layout/main.xml

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

    <WebView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/webView"
        />

</LinearLayout>

kakukemeit

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
android使用html开发软件界面

使用html开发软件界面因为android软件开发分工目前还没有细化，程序员往往需要负责软件界面的开发，虽然软件的界面图片已经由美工设计好了，但如果使用layout技术把软件做成如图片所示的界面确实很困难，而且也比较耗时。Android通过WebView实现了JS代码与Java代码互相通信的功能，使得android软件的界面开发也可以采用HTML网页技术，这样，广大网页美工可以参
复制链接

扫一扫

专栏目录