(1)Android调用JavaScript方法
(2)JavaScript调用Android方法
一、HighCharts介绍
折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势。本文将结合Highcharts,在Android中由获取的数据生成一个气温变化折线图。
二、Android导入HighCharts
首先,新建Android项目,在assets文件夹下新建web文件夹,在web里再放上js,目录如下(先忽略那些js文件):
三、Android端配置
使用webview作为容器来加载html页面:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="@+id/threeday_view"
android:layout_height="match_parent"
android:layout_width="match_parent" />
</RelativeLayout>
Java关键代码
Android调用JavaScript方法:
private void findView(View view){
mWebView = (WebView) view.findViewById(R.id.threeday_view);
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setUseWideViewPort(true);//设置此属性,可任意比例缩放
settings.setLoadWithOverviewMode(true);
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
settings.setRenderPriority(WebSettings.RenderPriority.HIGH);
settings.setDisplayZoomControls(true);
settings.setLoadWithOverviewMode(true);
settings.setSupportMultipleWindows(true);
settings.setLoadsImagesAutomatically(true);
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
getParms();
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
}
});
mWebView.loadUrl("file:///android_asset/threeday.html");
}
/调用JS,传递参数给JS
public void getParms() {
String[] array = new String[]{"2016-10-10","2016-10-11","2016-10-12","2016-10- 13","2016-10-14","2016-10-15","2016-10-16"};
List<String> weeks = new ArrayList<String>();
List<String> states = new ArrayList<String>();
List<Integer> lowTemps = new ArrayList<Integer>();
List<Integer> highTemps = new ArrayList<Integer>();
List<String> windDirects = new ArrayList<String>();
List<String> windPowers = new ArrayList<String>();
for(int i = 0;i < 7;i++){
states.add("晴天");
lowTemps.add(17+i);
highTemps.add(22+i);
windDirects.add("东风");
windPowers.add("二级");
}
Gson mGson = new Gson();
weeks.addAll(Arrays.asList(array));
Parms parms = new Parms(weeks,states,lowTemps,highTemps,windDirects,windDirects);
//这里调用JS方法并传递参数
mWebView.loadUrl("javascript:showData('" + mGson.toJson(parms) + "')");
}
四、Html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
${demo.css}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<script src="js/no-data-to-display.js"></script>
<script type="text/javascript">
var container;
var options1 = {
chart: {
type: 'line', //默认图表类型line, spline, area, areaspline, column, bar, pie , scatter
marginRight:5,
renderTo:'container'
},
title: {
text: '最近15天气温',
x: -20 //center
},
subtitle: {
text: '来源: 极速数据',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: '最高气温',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2]
}, {
name: '最低气温',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
}]
};
function showData(value) {
var data = JSON.parse(value);
//alert(data.seriesdata);
options1.xAxis.categories = data.weeks;
options1.series[0].data = data.lowTemps;
options1.series[1].data = data.highTemps;
container = new Highcharts.Chart(options1);
};
</script>
</head>
<body>
<div id="container" style="min-width: 280px; height: 500px; margin: 0 auto"></div>
</body>
</html>
五、效果图
下面是JavaScript调用Android方法
//.....同上
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- Calls into the javascript interface for the activity -->
<!-- 从HTML文件中调用activity中的函数 demo对应addJavascriptInterface(new DemoJavaScriptInterface(), "demo");-->
<!-- 也就是从HTML到android程序 留意window.demo.clickOnAndroid()这句话 -->
<a onClick="window.demo.clickOnAndroid()">确定</a>
</body>
private void findView(View view){
//....同上
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
}
final class DemoJavaScriptInterface {
DemoJavaScriptInterface() {
}
/**
* This is not called on the UI thread. Post a runnable to invoke
* <p/>
* loadUrl on the UI thread.
*/
@JavascriptInterface
// 注意这里的名称。它为clickOnAndroid(),注意,注意,严重注意
public void clickOnAndroid() {
/*
handler.post这个函数的作用是把Runnable里面的run方法里面的这段代码发送到消息队列中,等待运行。
如果handler是以UI线程消息队列为参数构造的,那么是把run里面的代码发送到UI线程中,等待UI线程运行这段代码。
如果handler是以子线程线程消息队列为参数构造的,那么是把run里面的代码发送到子线程中,等待子线程运行这段代码。
*/
mHandler.post(new Runnable() {
public void run() {
Toast.makeText(getContext(), "后面8天是模拟数据", Toast.LENGTH_SHORT).show();
}
});
}
}