您的位置：首页 > 移动开发 > Android开发

Android采用HTML设计软件界面

2015-09-16 15:48 393 查看

采用HTML设计软件界面

一般的android界面使用的是XML。但是XML如果要制作很高级的UI，会很复杂。如果使用HTML老进行UI设计就会简单很多。

Android通过WebView实现了JS代码与Java代码互相通信的功能，使得android软件的界面开发也可以采用HTML网页技术，这样，广大网页美工可以参
与进android软件的界面开发工作，从而让程序员从中解脱出来。

android中有个浏览器叫做webkit，如果在代码中要使用到这个浏览器，那么就要使用WebView控件，使用<WebView>来显示这个网页。

WebView.addJavascriptInterface(Object obj, String interfaceName)

其中obj是我们自己用来实现功能的一个类，interfaceName是一个对象的名称，就是obj这个对象的名称。

既然是html,那肯定就要有一个HTML文件，文件名为index.html，放置在android工程的assets文件夹下，如果没有这个文件夹，可以在根目录创建一个。如果是网页中
使用到图片，则可以在assets文件夹下新建一个images文件夹，用以下语句进行引用：<img src="images/XXX.jpg">

<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);<span style="font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px;">//json字符串转换为json对象  </span>
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 onload="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>

<pre name="code" class="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.util.Log;
import android.webkit.WebView;

public class MainActivity extends Activity {
private static final String TAG = "MainActivity";
private ContactService contactService;
private WebView webView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

contactService = new ContactService();
webView = (WebView)this.findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new ContactPlugin(), "contact");
webView.loadUrl("file:///android_asset/index.html");
//        webView.loadUrl("http://192.168.1.100:8080/videoweb/index.html");
}

private final class ContactPlugin{
public void getContacts(){
List<Contact> contacts = contactService.getContacts();
try {
JSONArray array = new JSONArray();
for(Contact contact : contacts){
JSONObject item = new JSONObject();
item.put("id", contact.getId());
item.put("name", contact.getName());
item.put("mobile", contact.getMobile());
array.put(item);
}
String json = array.toString();
Log.i(TAG, json);
webView.loadUrl("javascript:show('"+ json +"')");
} catch (JSONException e) {
e.printStackTrace();
}
}

public void call(String mobile){
Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:"+ mobile));
startActivity(intent);
}
}
}

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

配置单元测试：

<uses-library android:name="android.test.runner"/>

<instrumentation android:name="android.test.InstrumentationTestRunner"

android:targetPackage="cn.itcast.html" android:label="My File Test" />

可运行程序下载地址http://download.csdn.net/detail/baidu_28479651/9113145

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： android html webview

相关文章推荐

新的分享

章节导航