由于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. Linux下离线安装MySQL

    Linux下安装mysql 1 检查并卸载已安装mysql 命令:rpm -qa|grep -i mysql 命令:rpm -e --nodeps ‘上个命令后显示的本机已安装mysql依赖’ 如果存 ...

  2. Android框架-Volley(一)

    1. Volley简介 我们平时在开发Android应用的时候不可避免地都需要用到网络技术,而多数情况下应用程序都会使用HTTP协议来发送和接收网络数据.Android系统中主要提供了两种方式来进行H ...

  3. springMVC接受前台传值

    今天,用ajax向springMVC的控制器传参数,是一个json对象.({"test":"test","test1":"test ...

  4. python常用函数库收集。

    学习过Python都知道python中有很多库.python本身就是万能胶水,众多强大的库/模块正是它的优势. 收集一些Python常用的函数库,方便大家选择要学习的库,也方便自己学习收集,熟悉运用好 ...

  5. Linux 部署项目经验总结

    [通用命令]  1.创建文件夹 mkdir -p xxx 2.解压包 tar -zxvf xxxx.tar.gz  3.缩文件 tar zcvf 压缩包名称.tar.gz 要压缩的文件  4.动命令  ...

  6. C语言调试小技巧

    经常看到有人介绍一些IDE或者像gdb这样的调试器的很高级的调试功能,也听人说过有些牛人做工程的时候就用printf来调试,不用特殊的调试器.特别是在代码经过编译器一些比较复杂的优化后,会变得“难以辨 ...

  7. Nginx 性能调优

    原文地址:http://nginx.com/blog/tuning-nginx/ Tuning NGINX for Performance Nginx 性能调优 NGINX is well known ...

  8. Android带索引联系人列表

    网上Android联系人列表的样例也非常多,都和微信的联系人差点儿相同,因为项目用到了联系人列表索引功能(产品把字母item给去掉了),只是也还是好实现.这里我也来分享分享我的实现,免得以后忘了.那先 ...

  9. Fragment的实际开发中总结（二）

    在实际项目的开发过程Fragment的情况越来越多.大家肯定须要遇到过Fragment被销毁重建的情况. 结合自己在项目开发的一点总结和学习开源项目的代码.继续分享自己对Fragment的一点总结. ...

  10. ZOJ 2588 Burning Bridges（无向连通图求割边）

    题目地址:ZOJ 2588 由于数组开小了而TLE了..这题就是一个求无向连通图最小割边.仅仅要推断dfn[u]是否<low[v],由于low指的当前所能回到的祖先的最小标号,增加low[v]大 ...