2011/06/13 android使用html做UI的方法---js与java的相互调用
2014-03-20 16:17
1011 查看
今天以下更新了两篇学习日记,所以会有两个日期一样的标题。不过不要紧,内容才是关键。
刚刚写完上一篇文章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文件,也是我贴的那个链接里写的有点乱的
好了,这样基本上就成功了,最后运行下就能出现如图的效果:
刚刚写完上一篇文章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 onload="javascript:window.javatojs.Callfunction()"> <div id = "datalist"> this is a demo </div> </body> </html>
好了,这样基本上就成功了,最后运行下就能出现如图的效果:
相关文章推荐
- 2011/06/13 android使用html做UI的方法---js与java的相互调用
- 2011/06/13 android使用html做UI的方法---js与java的相互调用
- Android 使用html做UI的方法---js与java的相互调用
- Android之Webview使用Java代码和JS相互调用
- 【cocos2d-js官方文档】二十四、如何在android平台上使用js直接调用Java方法
- 【cocos2d-js官方文档】二十四、如何在android平台上使用js直接调用Java方法
- 如何在Android平台上使用JS直接调用Java方法
- Android中WebView使用3,html掉android中的方法webView调用js中的方法
- android学习笔记---53_采用网页设计软件界面,以及使用android系统内置的浏览器,利用js调用java方法
- cocos2d-js如何在android平台上使用js直接调用Java方法
- 如何在Android平台上使用JS直接调用Java方法
- 【cocos2d-js官方文档】二十四、如何在android平台上使用js直接调用Java方法
- 如何在Android平台上使用JS直接调用Java方法
- Android WebView的使用方法及与JS 相互调用
- cocos2d-js如何在android平台上使用js直接调用Java方法
- 在本地UI使用webview,在html页面用js与android通信方法。
- 【cocos2d-js官方文档】二十四、如何在android平台上使用js直接调用Java方法
- android学习笔记---53_采用网页设计软件界面,以及使用android系统内置的浏览器,利用js调用java方法
- android和JS交互,相互调用方法传值。不使用第三方实现原生加载word、ppt、pdf文档
- Android webview中JavaScript与Java方法的相互调用Demo