Webview与ScrollView的滚动兼容及留白处理

背景

开发中我们经常会遇到使用网页来显示图文内容，而且往往我们会遇到webview嵌套在scrollview的这种情况，这就开始让人蛋疼了！“为嘛，我的webview加载出来的网页只显示很小一点，其他都不显示了？” ”当我重新刷新页面后，为什么webview会出现留白的情况？“ ----------------- 天啊，难道就不能好好的吗？！

为了解决项目中这些蛋疼的问题，试过不少方法，网上有说是网页中使用了不合理的overflow,的确，经证实使用不合理的overflow的确会造成网页加载后在嵌套在scrollview的webview只会显示很小的高度，那体验是相当的尴尬。合理使用overflow即可处理这个问题，但是webview留白又如何处理呢？问题先放这儿，我们先说说如何在xml布局中放置webview并设置他的属性。

层层递进，先练基本功

xml中webview嵌套在scrollview中：

<ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

  <LinearLayout
                android:descendantFocusability="blocksDescendants"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

    <com.xxxx.NoWrapListView
                             android:layout_width="match_parent"
                             android:layout_height="wrap_content"
                             android:orientation="vertical"/>

    <WebView
             android:layout_width="match_parent"
             android:layout_height="wrap_content" />
  </LinearLayout>
</ScrollView>

其中webview要的高度要设置为：wrap_content, 如有必要可设置scrollview第一个子容器的这个属性：

android:descendantFocusability="blocksDescendants"

发现问题，问题是如何造成的

我们使用webview加载网页，网页可能在我们需要的时候会要求我们刷新网页或者加载新的链接，这时候问题就显现了。由于网页页面加载内容的长度，或者ajax请求延迟，造成webview只能不断的增加高度，而当网页高度变小时，webview高度却不能自适应了，那么只能由我们手动的搞些事情了！

解决问题，解决留白，刻不容缓

1. 重载WebViewClient，重写onPageFinished方法。

   inner class XWalkWebClient : WebViewClient() {
   
     override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
       super.onPageStarted(view, url, favicon)
       isPageLoadSuccess = true
     }
   
     override fun onPageFinished(view: WebView?, url: String?) {
       super.onPageFinished(view, url)
       view?.loadUrl("javascript:window.myapp.resize(document.body.getBoundingClientRect().bottom);")  //此处调用了一个注入的js方法用来重载webview高度，可解决初始加载网页的问题，①
     }
   }
   

2. js注入，初始化注入方法

     webBrowser?.addJavascriptInterface(MyAppJavascriptHandler(), "myapp")
   

   inner class MyAppJavascriptHandler {
     @JavascriptInterface
           fun resize(documentBodyHeight: Int) {
               if (isAllowReLayoutBrowser) {
                   (context as? Activity?)?.runOnUiThread {
                       ViewUtil.setViewLayoutParams<FrameLayout.LayoutParams>(webBrowser!!, {
                           it.width = context.resources.displayMetrics.widthPixels
                           it.height = (documentBodyHeight * context.resources.displayMetrics.density).toInt()
                       }) //重写webview的高度, ②
                   }
               }
           }
   }
   

3. 网页端也需要在数据加载完成后调用这个js注入方法

   if(window.myapp.resize){
    window.myapp.resize(document.body.getBoundingClientRect().bottom);
   }
   

4. 备注、解释：

   ①. document.body.getBoundingClientRect().bottom: 网页下边距离页面上边的距离

   ②. ViewUtil.setViewLayoutParams....方法的实现

   /**
    * 配置控件的布局属性
    * @param view
    * @param func 处理布局属性的回调方法
    */
   @Suppress("unchecked_cast")
   @JvmStatic
   fun <T : ViewGroup.LayoutParams> setViewLayoutParams(view: View, func: (T) -> Unit) = with(this) {
     val lp: T = view.layoutParams as T
     func.invoke(lp)
     view.layoutParams = lp
   }
   

祝君好运！ Good Luck!