分享：android原生，搭配js配置webview的一些笔记

最近两次应运eclipse + genymotion +sdk Manager开发android应用都很大程度的运用了Webview，一次是利用webview显示google离线地图并用google map api提供的一些接口控制地图缩放，定位。最近一次是模拟制作宽带测试的app，类似下面图中显示的效果。

用过webview的同学应该都知道，直接把一个html页面通过webview载入的话会发现，页面内元素的大小无法和webview容器完美兼容，webview出现左右、上下滚动条影响页面美观和功能。

下面，我拿最近利用echarts制作的，类似宽带测试的app简单的分享一下如何在js端和android共同配置，让自己的页面载入webview后达到自己想要的效果。

首先，我们建立一个android项目，在AndroidManifest.xml中定义一个主页，并配置相应的权限。

"http://schemas.android.com/apk/res/android"

      package="com.zjtelecom.kdcs"

      android:versionCode="1"

      android:versionName="1.0">

    "@drawable/telecom" android:label="@string/app_name">

    "com.zjtelecom.kdcs.index" android:label="@string/app_name"> "android.intent.action.MAIN" />  "android.intent.category.LAUNCHER" />

其次，建立一个activity,我的项目中是index.java,对应的建立一个xml文件用来编写webview控件和页面布局。

 

文件：index.java 代码片段

 

文件：main_xx.xml 代码片段

这里主要讲一下index.java中关于webview的一些配置。

WebSettings mWebSettings = webV.getSettings();

         mWebSettings.set;

         mWebSettings.set;

         mWebSettings.setUseWideViewPort(false);

         mWebSettings.setLoadWithOverviewMode(false);

         mWebSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);

         webV.setOverScrollMode(1);

         webV.setWebChromeClient(new MyWebChromeClient());

         webV.addJavascriptInterface(new Demo;

设置支持js，去滚动条等基本属性。

webV.setWebViewClient(new WebViewClient(){

                //监听webview加载状态，加载完成后，调用html页面的js函数设置外部DIV的宽和高度。

                public void onPageFinished(WebView view,String url){

                    DisplayMetrics dm = new DisplayMetrics();

                    getWindowManager().getDefaultDisplay().getMetrics(dm);

                    int devWidth = dm.widthPixels;

                    int devHeight = dm.heightPixels;

                    float denisty = dm.density;

                    int denistyDpi = dm.densityDpi;

                    int divWidth = (int) (devWidth/denisty);

                    int divHeight = (int) (devHeight/denisty);

                    if(denistyDpi == 120)

                        divHeight = divHeight - 38;

                    if(denistyDpi == 160)

                        divHeight = divHeight - 50;

                    if(denistyDpi > 240)

                        divHeight = divHeight - 76;            

    //设置地图显示DIV尺寸 适应手机大小                webV.loadUrl("; } });

//最后载入你想要载入的页面

webV.loadUrl("载入的html页面的url地址，可以放在本地资源文件也可以是http://形式的url");

//接着加入这两个接口的的实现

 

 

这里是根据设备的dpi计算html文件中最外围的DIV或者空间的最大宽度和高度，因为每个设备的分辨率不同，屏幕尺寸不同，为了使用webview加载的页面兼容所以做了个简单的计算，因为笔者身边没有做android的人，本身对于android开发的应用需求也不是很多，一直没有找到其他更好的解决方案，所以就通过自己计算屏幕分辨率和宽、高的方式来应用webview，如果你有更好的解决方案，麻烦告知。

 

到这里，android的部分就差不多了，下面来看看html部分的主要代码。

 

图中有一个setDivWidthHeight的函数，就是上面android页面中发起的调用    webV.loadUrl(""将android计算出的屏幕宽度和高度发送给js，再用js控制页面ID=main的DIV的宽度和高度，这样就把页面大小定下来了，至于图中仪表盘的功能实现和echarts的应用，可以查看我上次分享的 学习分享，echarts模拟宽带测速效果 附Demo演示地址！！ 链接地址。

最后，整个html页面的功能都在div id=main 这个div元素内完成，就能确保无论是什么样的设备打开我的app应用，都能通过webview完美的把整个html5的内容呈现出来，代码有点杂乱，守环境配置影响不能把所有的代码贴出来，有需要的可以私信我。

附:自己做了个公众号，凑凑微商的热闹。喜欢的朋友可以关注，购买！买到不满意的东西可以加我微信：Zjgfcwang 要求退款。

转载于:https://my.oschina.net/u/3675762/blog/1537308