Android中的webview控件支持缩放并隐藏右下角缩放控制条

阳光穿透心脏的1/2处 2022-07-25 15:35 347阅读 0赞

今天在工作中用到了android中的webview控件显示一个网页，因为webview只显示不到屏幕三分之一的大小，所以当需要缩放时右下角的控制条显得极为碍事，自己先试了一会

WebSettings的一些属性，发现实现不了，其中settings.setBuiltInZoomControls(true)，如果设置成false的话，就直接不能缩放了，后来在平台上找到了这篇文章，顺利解决了我的需求！

[http://blog.csdn.net/hanhailong726188/article/details/46717621][http_blog.csdn.net_hanhailong726188_article_details_46717621]   
本文出自[【海龙的博客】][Link 1]

=============================================================

要支持缩放，肯定要先支持Javascript，加如下代码：

重点来了，要想支持缩放，要加如下代码支持

其中settings.setBuiltInZoomControls(true)必须要加，不然缩放不起作用，笔者就曾在这掉过坑

--------------------

经过上述代码，就可以实现webview缩放了，代码很简单，但是又有一个蛋疼的问题，那就是在你缩放的时候webview右下角会出现一个讨厌的缩放控制条，如下图所示：   
![这里写图片描述][20150702000649311]

--------------------

我们怎样去掉它呢，在Android3.0之后实现非常简单，加一句代码就可以了，如下代码：

其实到这里本文就应该到此为止了，但有的同学问，你这个只兼容到3.0以上版本，我要是兼容到2.x版本呢？我想说的是，其实没有必须再兼容到2.x版本了，2.x的用户量很少了，4.x以上的用户已经占到94%以上了，下面看AndroidStudio统计的各个平台版本的用户使用比率：

![这里写图片描述][20150702001201689]

所以说，我们没有必要兼容2.x了，就像IOS开发只兼容到IOS7版本就OK了，但是有的同学又说，我有强迫症，我就想兼容到2.x版本，其实解决方案网上都有了，这里用到了java反射的知识，通过反射来获取私有的属性控件mZoomButtonsController，然后就其setVisibility(View.GONE)隐藏就可以了，下面贴出代码实现：

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">public void setZoomControlGone(View view){
 Class classType;
 Field field;
 try {
 classType = WebView.class;
 field = classType.getDeclaredField("mZoomButtonsController");
 field.setAccessible(true);
 ZoomButtonsController mZoomButtonsController = new ZoomButtonsController(view);
 mZoomButtonsController.getZoomControls().setVisibility(View.GONE);
 try {
 field.set(view, mZoomButtonsController);
 } catch (IllegalArgumentException e) {
 e.printStackTrace();
 } catch (IllegalAccessException e) {
 e.printStackTrace();
 }
 } catch (SecurityException e) {
 e.printStackTrace();
 } catch (NoSuchFieldException e) {
 e.printStackTrace();
 } 
 }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li></ul>

--------------------

经过上面的反射代码，就可以达到兼容2.x版本来隐藏缩放控制条了，谢谢大家！

=============================================================

再次感谢原作者！

[http_blog.csdn.net_hanhailong726188_article_details_46717621]: http://blog.csdn.net/hanhailong726188/article/details/46717621
[Link 1]: http://blog.csdn.net/hanhailong726188?viewmode=contents
[20150702000649311]: /images/20220724/7760f14b74384bc6ae5795547d9b19cf.png
[20150702001201689]: /images/20220724/5b4ac92908044c07a858e72814c8fca0.png