由于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. spark scala word2vec 和多层分类感知器在情感分析中的实际应用

    转自:http://www.cnblogs.com/canyangfeixue/p/7227998.html 对于威胁检测算法使用神经网络训练有用!!!TODO待实验 /** * Created by ...

  2. 【DNN 系列】 添加模块后不显示

    添加模块后不显示分为几个原因 1.检查.dnn文件是否填写正确,要和对应的页面文件对应上 我有一步是这这个名称地方我填上了 就不显示了.这里需要注意,VIEW 的名城是不需要写的 2.重写文件 实体操 ...

  3. manacherO(n)求最长回文子串 hihocoder1032

    原文地址:https://segmentfault.com/a/1190000003914228   http://blog.csdn.net/synapse7/article/details/189 ...

  4. 976 B. Lara Croft and the New Game

    You might have heard about the next game in Lara Croft series coming out this year. You also might h ...

  5. bzoj3252: 攻略 优先队列 并查集 贪心

    考场上自己yy出来的做法..... Code: #include<cstdio> #include<algorithm> #include<queue> #incl ...

  6. vue的鼠标移入和移出

    vue的鼠标移入和移出 需求(鼠标到预约二维码显示,预约添加背景色) 实现 <!--html部分--> <ul class="person_list"> / ...

  7. NYOJ_77 开灯问题

    题目地址 分析: 用一个数组来保存每盏灯的操作的次数.推断奇偶就可以推断灯的状态. 最后的输出格式须要注意一下空格的位置,思路就是现输出一个.剩下来的输出在前面加一个空格. 空格用_表示: 1_3_5 ...

  8. C++模板中重要的术语

  9. Hadoop HDFS (4) Hadoop Archives

    用HDFS存储小文件是不经济的,由于每一个文件都存在一个block里,每一个block的metadata又在namenode的内存里存着,所以,大量的小文件.会吃掉大量的namenode的内存.(注意 ...

  10. iOS xib View宽高不能改变

    IOS - xib(Interface Builder,view) - can't change view size(view不能改变大小问题) 今天在试着swift语言写个demo,,当中遇到了这个 ...