android ScollView 嵌套 WebView 底部空白，高度无法自适应解决

Posted 2022-12-08 Shawn_Dut

对技术感兴趣的同鞋加群 544645972 一起交流。
最近要做一个页面，需要 ScrollView 嵌套 WebView，怎么嵌套，怎么解决焦点和 touch 事件冲突，网上一大堆，这里就不赘述了，但是发现 WebView 从一个高度很高的网页加载一个高度很低的网页的时候，高度无法自适应了，造成底部会有一大片的空白，解决方案找到了挺多，描述一下：

Google 官方建议

　　Google 建议不要在 ScrollView 中使用 WebView，但是毕竟无法避免，产品的需求；

移除重新添加新的 WebView

　　每次加载新的 url 的时候 remove 掉旧的 WebView，重新加入一个新的 WebView 去加载这个新的 url，这种方案是可行的，但是毕竟不太好，效率不高，而且会造成体验上不太好；

JS 注入，获取页面内容高度，设置成 WebView 高度

　　JS 注入，通过前端 JS 调用 native 方法，把高度值传递过来，然后通过 layoutparams 去设置 webview 的高度：

mWebView.setWebViewClient(new WebViewClient() 
    @Override
    public void onPageFinished(WebView view, String url) 
        mWebView.loadUrl("javascript:App.resize(document.body.getBoundingClientRect().height)");
        super.onPageFinished(view, url);
    
);
mWebView.addJavascriptInterface(this, "App");

@JavascriptInterface
public void resize(final float height) 
    getActivity().runOnUiThread(new Runnable() 
        @Override
        public void run() 
            //Toast.makeText(getActivity(), height + "", Toast.LENGTH_LONG).show();
            //此处的 layoutParmas 需要根据父控件类型进行区分，这里为了简单就不这么做了
            mWebView.setLayoutParams(new LinearLayout.LayoutParams(getResources().getDisplayMetrics().widthPixels, (int) (height * getResources().getDisplayMetrics().density)));
        
    );

需要注意的是上面的 resize 方法一定要上面那么写，写成：

mWebView.getLayoutParams().height = (int) (height * getResources().getDisplayMetrics().density);

这样是无法成功的，看来宽度也是有影响的

感谢 @imesong 同学，这段代码有亮点可以完善的地方：

1. mWebVew.setLayoutParam() 时，应该根据 WebView 父控件的类型，创建 LayoutParam，或者直接用 mWebView.getLayoutParams() 获取 LayoutParams；
2. 调用 JAVA 方法的 JS ，可以在网页加载完成时自己加载下面这段 JS 代码（区别在于一个是终端处理，一个是前段处理），比如：

(function(w)
    window.App.resize(document.body.getBoundingClientRect().height);
)(window); 

加载这段 JS 就可以了，“APP” 和上面一样是自己注册是自己注册的接口名字；
思路是一样的，处理方式有差异。

试验不太成功的方式

　　网上也找到了一些其他的方式，试了一下，不太成功，不知道是不是使用姿势的问题，感兴趣的也可以试试，反馈结果给我。

先加载一个空网页

　　在从高网页加载低网页的时候，先加载一个空内容，接着立马做相关的处理操作（比如加载新的网页，更改字体等），

// load empty data to shrink the WebView instance
mArticleWebView.loadUrl(Constants.ASSETS_EMPTY);
// load real data
mArticleWebView.loadDataWithBaseURL(null,data,"text/html","utf-8",null);

Constants.ASSETS_EMPTY 仅仅只是一个 String 子串，标识该空网页的位置，所以该变量可以为 “file:///android_asset/Empty.html”.
试了一下，也是不好用的，不知道是不是我的操作问题，
原文链接 http://vision-apps.blogspot.hk/2012/08/android-webview-tips-tricks.html

修改 Setting 属性

wv.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
wv.setVerticalScrollBarEnabled(false);
wv.setVerticalScrollbarOverlay(false);
wv.setHorizontalScrollBarEnabled(false);
wv.setHorizontalScrollbarOverlay(false);

一样不好用，原文链接http://blog.csdn.net/wht3xr/article/details/21004053

另外一些人的讨论

　　一些人的讨论，比较有参考价值：http://stackoverflow.com/questions/15546416/how-to-shrink-webview-size-dynamically-according-to-its-content

总结

　　综合考虑来看，第三种方式是比较合适的，我当时也是使用的第三种方式解决的这个问题。