由于Android软件开发分工眼下还没有细化，程序猿往往须要负责软件界面的开发，尽管软件的界面图片已经由美工设计好了。可是假设使用layout技术把软件做成美丽的界面确实非常困难，而是也比較耗时。Android通过WebView实现了JS代码与Java代码互相通信的功能，使的Android软件的界面开发也能够採用HTML网页技术，这样，广大网页美工能够參与进Android软件的界面开发工作，从而让程序猿从中解脱出来。　　

project文件夹

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:id="@+id/webView"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent" />

</LinearLayout>

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=gb2312"/>

<title>Wty htmlUI</title>

<script type="text/javascript">

    function show(jsondata){//  [{name:"xxx",amount:600,phone:"13988888"},{name:"bb",amount:200,phone:"1398788"}]

            var jsonobjs = eval(jsondata);

            var table = document.getElementById("personTable");//找到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].name;

                td2.innerHTML = jsonobjs[y].amount;

                td3.innerHTML = "<a href='javascript:contact.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";

            }

    }

</script>

</head>

<!-- 页面载入的时候触发onload方法：js代码通过webView调用其插件中的java代码 -->

<!-- 自己定义js对象contact，调用里面的showcontacts()方法 -->

<body onload="javascript:contact.showcontacts()">

   <table border="0" 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>

</body>

</html>

Contact.java

package cn.itcast.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;

        }

}

ContactService.java

package cn.itcast.service;

import java.util.ArrayList;

import java.util.List;

import cn.itcast.domain.Contact;

public class ContactService {

    /**

     * 获取联系人

     * @return

     */

    public List<Contact> getContacts(){

        List<Contact> contacts = new ArrayList<Contact>();

        contacts.add(new Contact(12, "张明", "13766666666", 13003));

        contacts.add(new Contact(23, "小小", "130066006", 122003));

        contacts.add(new Contact(98, "李小楷", "186768768", 10988787));

        contacts.add(new Contact(76, "赵得", "1565622566", 1666));

        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 WebView webView;

    private ContactService contactService;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        webView = (WebView) this.findViewById(R.id.webView);

        webView.loadUrl("file:///android_asset/index.html");

        webView.getSettings().setJavaScriptEnabled(true);

        webView.addJavascriptInterface(new JSObject(), "contact");//js对象是 JSObject()，名称为contact

        contactService = new ContactService();

    }

    private final class JSObject{

        public void call(String phone){

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

            startActivity(intent);

        }

        public void showcontacts(){

            //  [{name:"xxx",amount:600,phone:"13988888"},{name:"bb",amount:200,phone:"1398788"}]

            try {

                List<Contact> contacts = contactService.getContacts();

                JSONArray jsonArray = new JSONArray();

                for(Contact c : contacts){

                    JSONObject jsonObject = new JSONObject();

                    jsonObject.put("name", c.getName());

                    jsonObject.put("amount", c.getAmount());

                    jsonObject.put("phone", c.getPhone());

                    jsonArray.put(jsonObject);

                }

                String json = jsonArray.toString();

                webView.loadUrl("javascript:show('"+ json+ "')");

            } catch (JSONException e) {

                e.printStackTrace();

            }

        }

    }

}

測试结果

Android 採用HTML设计界面的更多相关文章

  1. Mono For Android如何在VS2012 中打开设计界面

      刚接触 Mono For Android 没几天,不知不觉把设计界面弄丢了.辛辛苦苦才把设计界面弄出来,如果你在 Layout 下打开 *.xaml 的文件打开的却是 xml 文档,那么你可以按照 ...

  2. Android App的架构设计：从VM、MVC、MVP到MVVM

    随着Android应用开发规模的扩大,客户端业务逻辑也越来越复杂,已然不是简单的数据展示了.如同后端开发遇到瓶颈时采用的组件拆分思想,客户端也需要进行架构设计,拆分视图和数据,解除模块之间的耦合,提高 ...

  3. Android基础之——startActivityForResult启动界面并返回数据，上传头像

    在android应用的开发过程中,常常会出现启动一个界面后填写部分内容后带着数据返回启动前的界面,最典型的应用就是登录过程.在非常多应用程序的模块中,都有"我的"这个模块,在未登录 ...

  4. 【Android实验】UI设计-Android计算器

    目录 实验目的 实验要求 实验过程 1. 界面设计 2. 功能设计 3. 运算处理 实验目的 自主完成一个简单APP的设计工作,综合应用已经学到的Android UI设计技巧,重点注意合理使用布局 实 ...

  5. [转]Android App整体架构设计的思考

    1. 架构设计的目的 对程序进行架构设计的原因,归根到底是为了提高生产力.通过设计使程序模块化,做到模块内部的高聚合和模块之间的低耦合.这样做的好处是使得程序在开发的过程中,开发人员只需要专注于一点, ...

  6. eclipseMARS2.0使用可视化设计界面——配置window builder

    1.查看eclipse版本 不同版本的eclipse对应不同的版本window builder,如果不知道版本的话可以通过,点击HELP——>about eclipse来查看自己eclipse的 ...

  7. 在Eclipse中用SWT设计界面

    摘自http://www.tulaoshi.com/n/20160129/1488574.html 在Eclipse中用SWT设计界面 1. 为什么要使用SWT?  SWT是一个IBM开发的跨平台GU ...

  8. 实现了在android实现左右滑动切换界面的效果

    这是实现了在android实现左右滑动切换界面的效果,该效果的源码下载,请到源码天堂下载吧,喜欢的朋友可以研究一下. 布局文件 <?xml version="1.0" enc ...

  9. 使用Android studio作按键切换界面

    一.新建工程 二.新建一个按键             android:layout_width="wrap_content"         android:layout_hei ...

随机推荐

  1. 43.$http

    转自:https://www.cnblogs.com/best/tag/Angular/ $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. 使用格式: // 简单的 G ...

  2. 图论之堆优化的Prim

    本题模板,最小生成树,洛谷P3366 题目描述 如题,给出一个无向图,求出最小生成树,如果该图不连通,则输出orz 输入输出格式 输入格式: 第一行包含两个整数N.M,表示该图共有N个结点和M条无向边 ...

  3. 4.STL六大组件

    代码示例 #include <vector> #include <list> #include <iostream> #include <algorithm& ...

  4. 空值（NULL）和非空（NOT NULL）（十二）

    不多说,直接上干货! NULL:表示字段可以为空 NOT NULL:表示字段不允许为空 注意:NULL和NOT NULL不可以同时用于一个字段上. create table tb2( username ...

  5. Gson解析List的一点小问题

    这阵子在使用gson解析时遇到了点小麻烦,因为一直用的fastjson,最近一个项目里使用的gson,需要解析list集合,查资料都是使用TypeToken解决,相对比较麻烦,下面为大伙推荐一种简便的 ...

  6. 二、Fast-R-CNN

    一.概括 Fast R-cnn的主要亮点有:Fast R-CNN将借助多任务损失函数,将物体识别和位置修正合成到一个网络中,不再对网络进行分步训练,不需要大量内存来存储训练过程中特征的数据:用RoI层 ...

  7. 关于 nginx 的配置的 location

    精准匹配和普通匹配:    server{            location =/index.htm{                                       ////精准匹 ...

  8. php实现自动加载类

    PHP 实现自动加载类:

  9. PostgreSQL指定用户可访问的数据库pg_hba.conf

    进入指定目录: # cd /var/lib/pgsql/9.3/data/ 使用vi编辑pg_hba.conf文件 # vi pg_hba.conf 以上配置为所有IP及网关都允许访问,使用MD5认证 ...

  10. rsync---远程数据同步工具

    rsync命令是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.rsync使用所谓的“rsync算法”来使本地和远程两个主机之间的文件达到同步,这个算法只传送两个文件的不同部分,而 ...