CoordinatorLayout+WebView高度问题

image

产品需要的设计图如上，简单来说是个很常见的文章详情样式。

特别在于：

1. 文章内容是h5
2. 下面紧跟着评论列表
3. 滚动之后，文章的标题需要置顶

根据需求很容易就会想到用CoordinatorLayout+AppBarLayout+TabLayout来实现,然后主体部分用RecycleView，那么H5就放在RecycleView的头部了。

想法很美好，现实很残酷！

很想当然的将WebView的高度设置成了WrapContent，结果就出问题了。H5部分的高度要么是加载不全，要么是太高了，以至于都看不到下面的评论列表了。

这是因为WebView本身也是能滑动的，有点类似ScrollView，不能用WrapContent来设置高度。这就导致WebView也不知道自己要显示多高了。

Coordinator layout 和 WebView这篇文章中有说明

建议：不要将webview放在NestedScrollView中。 不要在wrap_contents模式下使用webview。 让webview滚动网页本身。

如果结论是这样，岂不是无法实现这个效果了。
结果就遍找应用市场上的各大app，结果发现大多文章详情页，评论列表确实不紧跟着。都是用一个按钮去做跳转。除了。。。

对，除了今日头条！

那就好说了，二话不说，直接研究今日头条，并找到了个模仿今日头条的github地址。中间其实还有很多曲折就不多说了，大致发现问题在于WebView需要先指定高度，然后才能知道真实高度，这时再去重新设置成真实高度即可。

  //此处是重点
    rootWebView.viewTreeObserver.addOnPreDrawListener(object : ViewTreeObserver.OnPreDrawListener {
      override fun onPreDraw(): Boolean {
        //往大了拉伸
        var newWebHeight = mWebView?.contentHeight!!
        if (newWebHeight < resizeHeight){
          newWebHeight = resizeHeight
        }

        if (oldWebHeight >= newWebHeight){
          return true
        }
        val param = mWebView?.layoutParams
        param?.height = newWebHeight
        mWebView?.layoutParams = param
        Log.i("NewsWebView","newWebHeight:$newWebHeight,oldWebHeight:$oldWebHeight")
        oldWebHeight = newWebHeight
        return true
      }

    })

最后问题是解决了，但还有个疑问就是为什么只有OnPreDraw回调时才能去设置高度，而不是在任意时候？
代码如下：
github

1552459062337.gif