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

概述本文介绍了Webview与ScrollView的滚动兼容及留白处理，分享给大家，具体如下：

本文介绍了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的高度,②        }      }    }}

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

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

备注、解释：

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

②. VIEwUtil.setVIEwLayoutParams....方法的实现

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android Webview与ScrollView的滚动兼容及留白处理的方法全部内容，希望文章能够帮你解决Android Webview与ScrollView的滚动兼容及留白处理的方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。