Android Webview與ScrollView的滾動兼容及留白處理的方法

更新時間：2017年11月18日 09:43:46 作者：Cosecant

本篇文章主要介紹了Android Webview與ScrollView的滾動兼容及留白處理的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文介紹了Webview與ScrollView的滾動兼容及留白處理，分享給大家，具體如下：

背景

開發(fā)中我們經(jīng)常會遇到使用網(wǎng)頁來顯示圖文內(nèi)容，而且往往我們會遇到webview嵌套在scrollview的這種情況，這就開始讓人蛋疼了！“為嘛，我的webview加載出來的網(wǎng)頁只顯示很小一點，其他都不顯示了？” ”當我重新刷新頁面后，為什么webview會出現(xiàn)留白的情況？“ ----------------- 天啊，難道就不能好好的嗎？！

為了解決項目中這些蛋疼的問題，試過不少方法，網(wǎng)上有說是網(wǎng)頁中使用了不合理的overflow,的確，經(jīng)證實使用不合理的overflow的確會造成網(wǎng)頁加載后在嵌套在scrollview的webview只會顯示很小的高度，那體驗是相當?shù)膶擂巍：侠硎褂胦verflow即可處理這個問題，但是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"

發(fā)現(xiàn)問題，問題是如何造成的

我們使用webview加載網(wǎng)頁，網(wǎng)頁可能在我們需要的時候會要求我們刷新網(wǎng)頁或者加載新的鏈接，這時候問題就顯現(xiàn)了。由于網(wǎng)頁頁面加載內(nèi)容的長度，或者ajax請求延遲，造成webview只能不斷的增加高度，而當網(wǎng)頁高度變小時，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);") //此處調(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....方法的實現(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
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

基于Retrofit2+RxJava2實現(xiàn)Android App自動更新
這篇文章主要為大家詳細介紹了基于Retrofit2+RxJava2實現(xiàn)Android App自動更新，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-05-05
Android中解決頁簽手指按下從左到右滑動的bug
有一種方法可以阻止父層的View截獲touch事件，就是調(diào)用 getParent().requestDisallowInterceptTouchEvent(true);方法。這篇文章給大家介紹了Android中解決頁簽手指按下從左到右滑動的bug，一起看看吧
2016-10-10
android nfc常用標簽讀取總結
NFC（Near Field Communication，近場通信）是一種數(shù)據(jù)傳輸技術這篇文章主要介紹了android nfc常用標簽讀取總結，有興趣的可以了解一下。
2016-12-12
Android 關機彈出選擇菜單的深入解析
本篇文章是對Android 關機彈出選擇菜單進行了詳細的分析介紹，需要的朋友參考下
2013-06-06
Android觸摸事件如何實現(xiàn)筆觸畫布詳解
這篇文章主要給大家介紹了關于Android觸摸事件如何實現(xiàn)筆觸畫布的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-10-10
Android 啟動 Service(startservice和bindservice) 兩種方式的區(qū)別
andrid service 兩種啟動方式：第一種startservice，第二種bindservice，大家對這兩種啟動方式的區(qū)別了解嗎，下面跟著小編一起學習吧
2015-11-11
Android實現(xiàn)指定時間定時觸發(fā)方法
這篇文章主要為大家詳細介紹了Android實現(xiàn)指定時間定時觸發(fā)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
Android NDK開發(fā)之:配置環(huán)境的詳解
本篇文章是對Android中的配置環(huán)境進行了詳細的分析介紹，需要的朋友參考下
2013-05-05
Android列表實現(xiàn)(1)_數(shù)組列表實例介紹
最近開始學習android的ui，先上幾個相關的例子，后續(xù)還會有更新,感興趣的朋友可以研究下
2012-12-12
Android中的LeakCanary的原理詳解
大家好，本篇文章主要講的是Android中的LeakCanary的原理詳解，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下
2022-02-02