时间:2021-05-21
本文介绍了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}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
思路要求ScrollView嵌套地址栏和WebView手指滑屏向下滚动(网页向上),如果网页有滚动条,首先把地址栏滚动到消失,然后WebView才开始滚动;手指
Android中ScrollView嵌套GridView显示不全解决方法由于ScrollView和GridView这两款控件都自带滚动条,一起使用GridVie
AndroidListView与ScrollView冲突的解决方法总结众所周知ListView与ScrollView都具有滚动能力,对于这样的View控件,当S
本文实例讲述了Android编程使用WebView实现与Javascript交互的方法。分享给大家供大家参考,具体如下:Android中可以使用WebView加
很多开发者在做AndroidUI时不知道如何设置ScrollView滚动条控件的滑块颜色,其实通过ScrollView的xml布局属性android:scrol