android.webkit.WebView 体验1: 使用html作为UI

因为android软件开发分工目前还没有细化,程序员往往需要负责软件界面的开发,尽管软件的界面图片已经由美工设计好了,但如果使用layout技术把软件做成如图片所示的界面确实很困难,而且也比较耗时。Android通过WebView实现了JS代码与Java代码互相通信的功能,使的android软件的界面开发也可以采用HTML网页技术,这样,广大网页美工可以参与进android软件的界面开发工作,从而把程序员从中解脱出来。

 

 

需求:

如上,显示用户信息列表,然后到点击用户电话进行拨号,或者点击姓名,进入详细信息。

 

目前的问题是:点击名字 ,如何交给android呢?如果进行交互?

(js到java再到js之间这样的交互)

也就是js里面调用java代码,java代码还可以调用js

 

在项目的assets目录放入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=UTF-8">
<title>联系人列表</title>
<script type="text/javascript">
//我们传入的jsondata是一个数组如:
//[{id:20,name:"王昌龙",phone:"18701445755"},......] 这样
 function show(jsondata){
  var jsonobjs = eval(jsondata);
  var table = document.getElementById("personTable");
  for(var y=0; y<jsonobjs.length; y++){
         var tr = table.insertRow(table.rows.length); //添加一行
         tr.onmouseover = function (){
          this.style.backgroundColor= "red";
         }
         tr.onmouseout = function (){
          this.style.backgroundColor= "#000000";
         }
         //添加三列
         var td1 = tr.insertCell(0);
         var td2 = tr.insertCell(1);
         td2.align = "center";
         var td3 = tr.insertCell(2);
         //设置列内容和属性
         td1.innerHTML = jsonobjs[y].id;
         //转义
         td2.innerHTML = "<a href='javascript:partner4java.call(/"5554/")'>"+ jsonobjs[y].name + "</a>";
         td3.innerHTML = jsonobjs[y].phone;
  }
 }

 function init(){
  var jsondata  = "[{id:20,name:/"王昌龙/",phone:/"18701445755/"},{id:21,name:/"小妾/",phone:/"18701445755/"}]";
  show(jsondata); 
 }
</script>
</head>
<body bgcolor="#000000" text="#FFFFFF" style="margin:0 0 0 0" οnlοad="javascript:init()">
//partner4java.personlist()">
 <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>

如上,是我们html里面的基本用法,但是我们需要改变这里面的数据提供方式

 

修改main.xml:

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 <WebView
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:id="@+id/webView"/>
</LinearLayout>

你可以把webView看做嵌入你程序的浏览器:

package cn.partner4java.html;

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

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

import cn.partner4java.html.bean.Contact;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.WebView;

public class MainActivity extends Activity {
 private WebView webView;
 //我们用它来完成我们的异步调用 ,当我new这个对象出来,它会绑定到当前
 //activity消息队列里去,如果发现它里面新建了Runnable,它就会新建一个线程去。。。
 private Handler handler = new Handler();
 @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        webView = (WebView) this.findViewById(R.id.webView);
        //支持javaScript
        webView.getSettings().setJavaScriptEnabled(true);
        //不保存表单数据
        webView.getSettings().setSaveFormData(false);
        //不保存密码
        webView.getSettings().setSavePassword(false);
        //不支持页面放大功能
        webView.getSettings().setSupportZoom(false);
      //addJavascriptInterface方法中要绑定的Java对象及方法要运行在另外的线程中,不能运行在构造他的线程中
        //也就是说不能运行在当前的activity线程中
        //就是把这个方法绑定到页面中,js也可以调用
        //docment:xxx()
        //partner4java:xxx()
        webView.addJavascriptInterface(new Partner4javaJavaScript(), "partner4java");
        //把我们的页面显示出来
        webView.loadUrl("file:///android_asset/index.html");
       
    }
 
 private final class Partner4javaJavaScript{
  /**
   * 获取所有联系人
   */
  public void getContacts(){
   handler.post(new Runnable() {
    @Override
    public void run() {
     //可以通过访问SQLite访问数据库获取
     List<Contact> contacts = new ArrayList<Contact>();
     contacts.add(new Contact(12, "王昌龙", "18701445755"));
     contacts.add(new Contact(13, "小妾", "18701445755"));
     webView.loadUrl("javascript:show('"+ buildJson(contacts) +"')");
    }
   });
   
  }
  
  /**
   * 生成Json格式的数据
   * @param contacts
   * @return
   */
  private String buildJson(List<Contact> contacts){
   try {
    JSONArray jsonArray = 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());
     jsonArray.put(jsonObject);
    }
    return jsonArray.toString();
   } catch (JSONException e) {
    e.printStackTrace();
   }
   return null;
  }
  
 }
}

 

 

修改:

οnlοad="javascript:partner4java.getContacts()">

 

然后加入回调方法:

/**
   * 回调方法
   * @param phone
   */
  public void call(final String phone){
   handler.post(new Runnable() {
    @Override
    public void run() {
     startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:"+ phone)));
    }
   });
  }

 

加入拨号权限:

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

 

还可以:

 

webView.setWebChromeClient(new Partner4javaWebClient());

 

 

 

 

 

    private final class Partner4javaWebClient extends WebChromeClient{

      @Override

  public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

      new AlertDialog.Builder(HtmlActivity.this)

  .setTitle("提示信息")      

  .setMessage(message)          

  .setPositiveButton("确定", new DialogInterface.OnClickListener(){

        public void onClick(DialogInterface dialoginterface, int i){}

  }).show();

  return true;

  }

    }

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值