PS:大家都知道现在一个安卓项目里面有一些比较悬的画面,比如说一个炫酷的导航页,或者抽奖大转盘等,这些可以用安卓自身的知识来实现,也可以用JS来实现这些动画,然后安卓直接拿来用,这期间也是免不了有一些交互,今天这篇文章就是让大家知道,怎么使用安卓与html联动,并且实现交互,这就用到了webview,webview可以嵌入很多页面,比如说webview.loadUrl("http://www.baidu.com"),那么百度就被引进来了,而且你可以点击百度页面的任何按钮。而且webview还可以实现网页回退,但是问题来了,在引进来的网页我们怎么控制呢,你点击百度是百度页面所发生的变化,都是百度页面本身的功能,接下里,咱们就看看怎么在安卓Activity中写控制html变化的方法。这就是所谓的嵌套html。
下面写个简单的demo,引入html并点击切换图片。
步骤:
- 创建布局文件
- 实现webview一些自身配置
- html创建,
- webView加载html页面,添加点击事件
1:创建布局文件
<WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/id_webview"></WebView>
2:实现webview一些自身配置
这里webview添加html文件时有三种方式,总有一个适合你,大家具体注释
webview = (WebView) findViewById(R.id.id_webview); //方式1. 加载一个网页: // webView.loadUrl("http://www.google.com/"); //方式2:加载apk包中的html页面 // webview.loadUrl("file:///android_asset/test.html"); //方式3:加载手机本地的html页面 // webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html"); // webview.addJavascriptInterface(this,"android");//添加js监听 这样html就能调用客户端 WebSettings webSettings=webview.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);//不使用缓存,只从网络获取数据. //支持屏幕缩放 webSettings.setSupportZoom(true); webSettings.setBuiltInZoomControls(true); webview.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { webview.loadUrl(url); return true; } });
到了这里webView的配置基本上就做好了,因为例子比较简单,就配置这么多够用了
3:html创建
在Project模式,main目录下,和java文件同级创建assets目录,assets目录下创建test.html,图片你随便找两张也放在asset是目录下即可。下面有两个方法名,可以随便起,但是要webview调用时一致。
<html> <head> <title>这是测试版本js与android交互</title> <!--java通过调用a中onclick中方法,然后a中方法再调用script中方法--> <script language="javascript"> //myfun()为方法名 function myfun(){ document.getElementById("imgid").src="img2.png"; } </script> </head> <body> //clickOnAndroid()为方法名 <a onClick="window.test.clickOnAndroid()"> <img src="img1.png" id="imgid" width="400" height="300"> </a> </body> </html>
4:webView加载html页面,添加点击事件。
addJavascriptInterface调用html里的方法,记住要在异步中操作。clickOnAndroid,test是和html文件中方法名一致。
handle = new Handler(); webview.addJavascriptInterface(new MyObject(),"test"); webview.loadUrl("file:///android_asset/test.html"); } class MyObject extends Object{ @JavascriptInterface public void clickOnAndroid(){ handle.post(new Runnable() { @Override public void run() { webview.loadUrl("javascript:myfun()"); } }); }
点击屏幕就可以切换了,切换方法在html中写好了。上面代码其实没多少行,主要是这个思想,由于这个demo代码量少,就上传项目了。
完。