Android采用HTML设计软件界面
16lz
2021-01-23
采用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
更多相关文章
- pandaboard ES学习之旅——5 Android Linux内核源代码下载与编译
- 没事抽空学——常用界面组件属性
- Android Studio开发-day3 UI界面设计
- windows下载android源代码
- android 开发中中,经常用到的代码
- android panellistview 圆角实现代码
- Android Content Provider详解及示例代码