由于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. nyoj--1233--差值(贪心模拟+大数)

    差值 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 输入一个整数数组,将它们连接起来排成一个数,找出能排出的所有数字中最大,最小的两个,输出两个数的差值.例如输入数组{ ...

  2. 86.express里面的app.configure作用

    以下摘自 express 3.0 的 文档 app.configure([env], callback) Conditionally invoke callback when env matches ...

  3. 2.IntelliJ IDEA 2017创建JavaEE项目

    转自:https://blog.csdn.net/qq_31628285/article/details/75139909?utm_source=blogxgwz0 IntelliJ IDEA 201 ...

  4. leetcode 新题型----SQL，shell，system design

    leetcode 主要是一个针对北美的coder人群找工作的代码练习网站,我在2015年初次接触这个网站的时候,总共只有200多道题目,是一个类似acm 的a题网站.这些年变化越来越大,主要是因为找工 ...

  5. animation和transition做动画的区别

    animation做动画,是不需要去触发的,可以定义一开始就执行 transition做动画,是需要人为触发,才能执行的

  6. Servlet设置Cookie无效

    项目中保存用户信息用到了Cookie,之前没有太注意,今天怎么设置Cookie都无效,断点跟了无数遍,都没有找出问题所在,明明发送Cookie的代码都有执行,可是愣是找不到Cookie发送到哪里去了, ...

  7. 基于JS的身份证验证（完整版）

    var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ]; // 加权因子 var ValideCode = [ 1, 0 ...

  8. 提高realm存储速率

    我的数据量大约有2.5M,但是完全存储到数据库差不多用了11秒,有没有比较好的方法提高存储效率 提高realm存储速率 >> android这个答案描述的挺清楚的:http://www.g ...

  9. C#自定义事件监视变量变化

    首先监视定义类 class Event { public delegate void tempChange(object sender, EventArgs e); public event temp ...

  10. JavaScript,ES5和ES6的区别

    什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能.(好吧,概念什么最讨厌了) 动态: 在运行时确定数据类型.变量使用之前不 ...