您好,登錄后才能下訂單哦!
這篇文章主要介紹了Android中Webview與ScrollView的滾動兼容及留白處理的示例分析,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
具體如下:
背景
開發(fā)中我們經(jīng)常會遇到使用網(wǎng)頁來顯示圖文內(nèi)容,而且往往我們會遇到webview嵌套在scrollview的這種情況,這就開始讓人蛋疼了!“為嘛,我的webview加載出來的網(wǎng)頁只顯示很小一點(diǎn),其他都不顯示了?” ”當(dāng)我重新刷新頁面后,為什么webview會出現(xiàn)留白的情況?“ ----------------- 天啊,難道就不能好好的嗎?!
為了解決項(xiàng)目中這些蛋疼的問題,試過不少方法,網(wǎng)上有說是網(wǎng)頁中使用了不合理的overflow,的確,經(jīng)證實(shí)使用不合理的overflow的確會造成網(wǎng)頁加載后在嵌套在scrollview的webview只會顯示很小的高度,那體驗(yàn)是相當(dāng)?shù)膶擂?。合理使用overflow即可處理這個問題,但是webview留白又如何處理呢?問題先放這兒,我們先說說如何在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第一個子容器的這個屬性:
android:descendantFocusability="blocksDescendants"
發(fā)現(xiàn)問題,問題是如何造成的
我們使用webview加載網(wǎng)頁,網(wǎng)頁可能在我們需要的時候會要求我們刷新網(wǎng)頁或者加載新的鏈接,這時候問題就顯現(xiàn)了。由于網(wǎng)頁頁面加載內(nèi)容的長度,或者ajax請求延遲,造成webview只能不斷的增加高度,而當(dāng)網(wǎng)頁高度變小時,webview高度卻不能自適應(yīng)了,那么只能由我們手動的搞些事情了!
解決問題,解決留白,刻不容緩
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)用了一個注入的js方法用來重載webview高度,可解決初始加載網(wǎng)頁的問題,① } }
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)頁端也需要在數(shù)據(jù)加載完成后調(diào)用這個js注入方法
if(window.myapp.resize){ window.myapp.resize(document.body.getBoundingClientRect().bottom); }
備注、解釋:
①. document.body.getBoundingClientRect().bottom: 網(wǎng)頁下邊距離頁面上邊的距離
②. ViewUtil.setViewLayoutParams....方法的實(shí)現(xiàn)
/** * 配置控件的布局屬性 * @param view * @param func 處理布局屬性的回調(diào)方法 */ @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 }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Android中Webview與ScrollView的滾動兼容及留白處理的示例分析”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。