由于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. pyspark import 可以通过 --py-files

    公用函数的放到了 common.py 文件中. 通过 --py-files 可以在pyspark中可以顺利导入: pyspark --py-files lib/common.py > impor ...

  2. Laravel-自定全局函数

    Laravel-自定全局函数 标签(空格分隔): php 习惯了 使用 ThinkPHP 框架,有一个公共方法类在代码编写上会快捷很多,所以有必要在此进行配置一番. 实现 在 app 创建文件夹 He ...

  3. 16.允许重复的multimap

    #include <iostream> #include <map> #include <cstring> using namespace std; void ma ...

  4. java9新特性-8-语法改进:钻石操作符(Diamond Operator)使用升级

    1.使用说明 我们将能够与匿名实现类共同使用钻石操作符(diamond operator) 在java8中如下的操作是会报错的:   编译报错信息:'<>' cannot be used ...

  5. kindeditor 不能编辑 问题

    /*显示上传窗体*/ function ShowUplodToDaily() { var _sdata = grid.getSelecteds(); if (_sdata) { /*创建编辑器*/ v ...

  6. Future模式 总结

    future模式解决异步代码的组织(混入)问题: 类似的解决方案: 1.网络响应的block: 2.SDImageview的自组织.代理模式: 3.顶层响应机制的协议机制:

  7. opencv数据结构与基本绘图

    #include <opencv2\core\core.hpp>//核心组件 #include <opencv2\opencv.hpp>//GUI,包含媒体输入输出,视频捕捉. ...

  8. php修改限制上传文件大小

    win下:     1.编辑 php.ini:修改在 php5 下文件大小的限制     找到:file_uploads=On  允许 HTTP 文件上传     找到:max_execution_t ...

  9. Ubuntu(kali)开启mysql远程连接

    Linux 默认关闭mysql的远程连接,编辑 /etc/mysql/my.cnf 文件, 把里面的 bind-address = 127.0.0.1 改成 bind-address = 0.0.0. ...

  10. lhgDialog使用--loading提示(不自动关闭)

    使用lhgDialog时,发现有一个$.dialog.tips()方法可以实现loading样式的提示,但是存在默认关闭时间.方法如下图所示, 为了实现不自动关闭的方法,查看了相应的源码后,实现不关闭 ...