2011/06/13 android使用html做UI的方法---js与java的相互调用

最新推荐文章于 2021-06-29 00:09:53 发布

a771948524

最新推荐文章于 2021-06-29 00:09:53 发布

阅读量965

点赞数

分类专栏： android

android 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

今天以下更新了两篇学习日记，所以会有两个日期一样的标题。不过不要紧，内容才是关键。

刚刚写完上一篇文章android捕获js的alert等消息后就学了下文章最后提到的android使用html做UI的方法，于是我在网上找了下这方面的东西，有一篇文章被广为转载，其中有一个地址是http://ysongren.blog.163.com/blog/static/6154220720109211020410/

文章里面排版很乱，我试了很多次都没有成功。最后终于搞定了，于是把它记录下来。

首先是.java的文件：

     package com.android.phonetest;


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

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

public class PhoneTest extends Activity {   
	 /** Called when the activity is first created. */  
    private WebView web;   
    public List<String> list;   
    @Override  
    public void onCreate(Bundle savedInstanceState) {   
    	super.onCreate(savedInstanceState);
    	initData();
    	setContentView(R.layout.main);
    	web = (WebView)this.findViewById(R.id.webview);
    	//开启javascript设置
    	web.getSettings().setJavaScriptEnabled(true);
    	//把RIAExample的一个实例添加到js的全局对象window中
    	//这样就可以使用window.javatojs来调用它的方法
    	web.addJavascriptInterface(this, "javatojs");
    	//加载网页
    	web.loadUrl("file:///android_asset/index.html");
    	}
    	void initData(){
    	list=new ArrayList<String>();
    	for(int i=0;i<5;i++){
    	list.add("我是List中的第"+(i+1)+"行");
    	}
    	}
    	/**
    	* 该方法将在js脚本中，通过window.javatojs.....()进行调用
    	* @return
    	*/
    	 //下面的两个函数都供index.html文件调用
    	public Object getObject(int index){
    	return list.get(index);
    	}
    	public int getSize(){
    	return list.size();
    	}
    	//这个跟index.html里的GetList()方法相联系的
    	public void Callfunction(){
    	web.loadUrl("javascript: GetList()");
    	}
    }

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"/>
  <TextView
   android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:id="@+id/resultText"/>
</LinearLayout>

main.xml里只加了一个WebView的控件

其他的文件好像都不用改了。

最后是index.html文件，也是我贴的那个链接里写的有点乱的

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>demo</title>
<script type="text/javascript">
   
  function GetList(){      
  var i=window.javatojs.getSize(); 
       for(var n=0;n<i;n++)
{       
 var jsdata= window.javatojs.getObject(n);//拿到activity里面的属性javadata     
   var datalistdiv = document.getElementById("datalist"); //得到页面的div     
   pnode = document.createElement("p");//创建一个p标签，再建个textnode      
  tnode = document.createTextNode(jsdata);     
   pnode.appendChild(tnode);//p中加入数据     
   datalistdiv.appendChild(pnode);//div中键入新的p     
 }}
</script>
</head>
<body οnlοad="javascript:window.javatojs.Callfunction()"> 
<div id = "datalist">
this is a demo
</div>
</body>
</html>

好了，这样基本上就成功了，最后运行下就能出现如图的效果：