本文介紹了Webview與ScrollView的滾動(dòng)兼容及留白處理，分享給大家，具體如下：
背景
開(kāi)發(fā)中我們經(jīng)常會(huì)遇到使用網(wǎng)頁(yè)來(lái)顯示圖文內(nèi)容，而且往往我們會(huì)遇到webview嵌套在scrollview的這種情況，這就開(kāi)始讓人蛋疼了！“為嘛，我的webview加載出來(lái)的網(wǎng)頁(yè)只顯示很小一點(diǎn)，其他都不顯示了？” ”當(dāng)我重新刷新頁(yè)面后，為什么webview會(huì)出現(xiàn)留白的情況？“ ----------------- 天啊，難道就不能好好的嗎？！
為了解決項(xiàng)目中這些蛋疼的問(wèn)題，試過(guò)不少方法，網(wǎng)上有說(shuō)是網(wǎng)頁(yè)中使用了不合理的overflow,的確，經(jīng)證實(shí)使用不合理的overflow的確會(huì)造成網(wǎng)頁(yè)加載后在嵌套在scrollview的webview只會(huì)顯示很小的高度，那體驗(yàn)是相當(dāng)?shù)膶擂?。合理使用overflow即可處理這個(gè)問(wèn)題，但是webview留白又如何處理呢？問(wèn)題先放這兒，我們先說(shuō)說(shuō)如何在xml布局中放置webview并設(shè)置他的屬性。
層層遞進(jìn)，先練基本功
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要的高度要設(shè)置為：wrap_content, 如有必要可設(shè)置scrollview第一個(gè)子容器的這個(gè)屬性：
android:descendantFocusability="blocksDescendants"
發(fā)現(xiàn)問(wèn)題，問(wèn)題是如何造成的
我們使用webview加載網(wǎng)頁(yè)，網(wǎng)頁(yè)可能在我們需要的時(shí)候會(huì)要求我們刷新網(wǎng)頁(yè)或者加載新的鏈接，這時(shí)候問(wèn)題就顯現(xiàn)了。由于網(wǎng)頁(yè)頁(yè)面加載內(nèi)容的長(zhǎng)度，或者ajax請(qǐng)求延遲，造成webview只能不斷的增加高度，而當(dāng)網(wǎng)頁(yè)高度變小時(shí)，webview高度卻不能自適應(yīng)了，那么只能由我們手動(dòng)的搞些事情了！
解決問(wèn)題，解決留白，刻不容緩
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);") //此處調(diào)用了一個(gè)注入的js方法用來(lái)重載webview高度，可解決初始加載網(wǎng)頁(yè)的問(wèn)題，① }}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的高度, ② } } }}網(wǎng)頁(yè)端也需要在數(shù)據(jù)加載完成后調(diào)用這個(gè)js注入方法
if(window.myapp.resize){ window.myapp.resize(document.body.getBoundingClientRect().bottom);}備注、解釋：
①. document.body.getBoundingClientRect().bottom: 網(wǎng)頁(yè)下邊距離頁(yè)面上邊的距離
②. ViewUtil.setViewLayoutParams....方法的實(shí)現(xiàn)
/** * 配置控件的布局屬性 * @param view * @param func 處理布局屬性的回調(diào)方法 */@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}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
