Android中使用HTML做佈局文件以及調用Javascript

時間 2019-11-15

標籤 android 使用 html 佈局文件以及調用 javascript 欄目 Android 简体版

原文原文鏈接

在Android開發中，一般使用xml格式來描述佈局文件，採用Android的layout佈局有時候根本知足不了咱們對於界面的要求，有時候沒有web頁面那樣炫。就目前而言，熟悉android佈局及美化的人員少之又少，出現了嚴重的斷層。大部分企業，其實仍是程序員本身動手佈局。這樣既浪費時間和精力，也未必能達到理想的效果。可是，在企業級的android開發中，使用html頁面進行佈局，也有不少的優點（例如：簡單，大部分開發人員及美工都熟悉，方便統一進行更新，管理）。據筆者瞭解，已經有很多的公司在使用這種方式進行佈局開發。這也多是一種趨勢。
下面，我將給出一個實例代碼，供你們學習使用html頁面給android應用佈局。javascript

Step 1 :新建一個Android工程,命名爲HtmlForUIhtml

Step 2:在assets目錄下寫一個android.html文件，代碼以下：java

[html] view plain copyandroid

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 程序員
<html> web
<head> 數據庫
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> json
<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>
<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

[java] view plain copy

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

[java] view plain copy

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

[java] view plain copy

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);
}
}
}