使用html设计界面

这是一个使用html作为UI的电话拨号器实例

1.新建工程(PhoneUIByHtmlDemo)

2.在assets目录下编写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=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function show(jsondata) {
        //将传递过来的JSON数据转化为对象
        var jsonobjs = eval(jsondata);
        //获取下面定义的表格
        var table = document.getElementById("personTable");
        //每行添加三个单元格
        for ( var i = 0; i < jsonobjs.length; i++) {
            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);
            //innerHtml表示获取对象起始和结束标签内的HTML
            td1.innerHTML = jsonobjs[i].id;
            td2.innerHTML = jsonobjs[i].name;
            td3.innerHTML = "<a href='javascript:avd.call(\""
                    + jsonobjs[i].phone + "\")'>" + jsonobjs[i].phone + "</a>";
        }
    }
</script>

</head>
<body bgcolor="#000000" text="#FF2D2D" style="margin:0000"
    onload="javascript:avd.contactlist()">
    <!--    onload指定了当页面被加载时调用的方法contactlist -->
    <table border="0" width="100%" id="personTable" cellspacing="0">
        <tr>
            <td width="15%">编号</td>
            <td align="center">姓名</td>
            <td width="15%">电话</td>
        </tr>
    </table>
</body>
</html>

3.编写布局文件main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.phoneuibyhtmldemo.MainActivity" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

4.编写实体类Contact.java

package com.example.phoneuibyhtmldemo;

public class Contact {
    private int id;
    private String name;
    private String phone;

    public Contact(int id, String name, String phone) {
        this.id = id;
        this.name = name;
        this.phone = phone;
    }

    public int getId() {
        return id;
    }

    public void setId(int 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;
    }
}

5.最重要的MainActivity.java

package com.example.phoneuibyhtmldemo;

import java.util.ArrayList;
import java.util.List;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;

public class MainActivity extends Activity {
    private WebView webView;
    private Handler handler = new Handler();

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        webView = (WebView) findViewById(R.id.webView1);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setSaveFormData(false);// 不保存表单
        webView.getSettings().setSupportZoom(false);// 不支持放大
        webView.addJavascriptInterface(new SharpJavaScript(), "avd");
        //avd是给这个interface取得名字。当要用到里面的函数的时候,格式必须如下:
        //javascript:avd.(函数名)
        //如果是内部调用,那么avd可以省略
        webView.loadUrl("file:///android_asset/phoneui.html");
    }

    class SharpJavaScript {
        //要被外部html文件调用的方法必须加上@JavascriptInterface
        //而且每一个调用的方法都必须有handler.post(new Runnable()使它们运行在同一个线程中
        @JavascriptInterface
        public void contactlist() {
            handler.post(new Runnable() {
                @Override
                public void run() {
                    // TODO Auto-generated method stub

                    try {
                        String json = buildJson(getContacts());
                        // 调用js的show方法。json数据格式有误
                        webView.loadUrl("javascript:show(" + json + ")");
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }

                }
            });
        }

        public List<Contact> getContacts() {
            List<Contact> contacts = new ArrayList<Contact>();
            contacts.add(new Contact(1, "张三", "5554"));
            contacts.add(new Contact(2, "李四", "5556"));
            contacts.add(new Contact(3, "王五", "5557"));
            return contacts;
        }

        public String buildJson(List<Contact> contacts) throws JSONException {
            JSONArray array = new JSONArray();
            for (Contact contact : contacts) {
                JSONObject jsonObject = new JSONObject();
                jsonObject.put("id", contact.getId());
                jsonObject.put("name", contact.getName());
                jsonObject.put("phone", contact.getPhone());
                array.put(jsonObject);
            }
            return array.toString();
        }

        @JavascriptInterface
        public void call(final String phone) {
            handler.post(new Runnable() {
                @Override
                public void run() {
                    // TODO Auto-generated method stub

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

                }
            });
        }
    }
}

6.最后加上权限

<uses-permission android:name="android.permission.CALL_PHONE"/>

界面效果:

打电话效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有脑子的搬砖工

用户登陆后的显示权限列表

14150
来自专栏acoolgiser_zhuanlan

JavaScript 鼠标拖拽div 改变其大小

转自: http://www.cnblogs.com/yushang/archive/2013/03/19/2968782.html

27230
来自专栏acoolgiser_zhuanlan

canvas中的getContext()方法 以及 webgl中的getContext()方法

翻译自:https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContex...

41630
来自专栏acoolgiser_zhuanlan

leaflet自定义popup弹框,给popup弹框显示内容添加按钮button或者超链接等html标签

这里在弹框的文字下面添加了一个button按钮和超链接。这种效果在web应用中很常见。所以下面总结一下如何用leaflet实现。

35130
来自专栏有脑子的搬砖工

解决thymeleaf模板严格要求格式

13720
来自专栏acoolgiser_zhuanlan

JavaScript中的 innerHTML 字符与变量拼接赋值

 注意这样写只会显示字符串,整型变量无法显示,要改成 parseInt(dis) ,才能达到如图的效果。

21520
来自专栏流川疯编写程序的艺术

leetcode 3 Longest Substring Without Repeating Characters最长无重复子串

Given a string, find the length of the longest substring without repeating chara...

13020
来自专栏流川疯编写程序的艺术

大数据ETL实践探索(3)---- 大数据ETL利器之pyspark

本系列文章主要针对ETL大数据处理这一典型场景,基于python语言使用Oracle、aws、Elastic search 、Spark 相关组件进行一些基本的...

37920
来自专栏流川疯编写程序的艺术

基于OpenCV 的美颜相机推送直播流

先从opencv(2.4.10版本)采集回来摄像头的图像,是一帧一帧的 每一帧图像是一个矩阵,opencv中的mat 数据结构。

28720
来自专栏流川疯编写程序的艺术

win7 64位下自行编译OpenCV2.4.10+CUDA toolkit 5.5的整个过程以及需要注意的问题(opencv+cuda并行计算元素的使用)

首先说明的是,这个帖子是成功的编译了dll,但是这个dll使用的时候还是很容易出现各种问题的。

14140

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励