Android中Webview滑進出屏幕閃爍怎么解決

本篇內容介紹了“Android中Webview滑進出屏幕閃爍怎么解決”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

問題圖示

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:fillViewport="true"
 android:overScrollMode="never"
 android:scrollbars="none">

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
 <View
 android:id="@+id/contentView"
 android:layout_width="match_parent"
 android:layout_height="600dp"
 android:background="@color/colorPrimary" />
 <WebView
 android:id="@+id/webView"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="@color/contract_font"></WebView>
 </LinearLayout>
</android.support.v4.widget.NestedScrollView>

可以看到，NestedScrollView嵌套webview，且webview初始未在一屏內時，滑進出屏幕時會有短暫的白色塊。

解決問題

方案對比

方案探索

1.xml布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:fillViewport="true"
 android:overScrollMode="never"
 android:scrollbars="none">

 <FrameLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <WebView
 android:id="@+id/webView"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="@color/contract_font"></WebView>

 <View
 android:id="@+id/contentView"
 android:layout_width="match_parent"
 android:layout_height="600dp"
 android:background="@color/colorPrimary" />
 </FrameLayout>
</android.support.v4.widget.NestedScrollView>

通過FrameLayout來疊加使得webview保持在第一屏內初始化，然后設置webview的padding，這樣使得完整的H5內容是在ContentView下方顯示。

但是——>webview設置padding根本無效！！！

怎么辦呢？無論怎樣也想不到為什么會如此，畢竟本身api的實現上是有些缺陷的（https://stackoverflow.com/questions/9170042/how-to-add-padding-around-a-webview ）

2.解決問題

最終的解決方案則是通過注入js代碼來控制H5的padding來解決。

 webView.setWebViewClient(new WebViewClient() {
 @Override
 public void onPageFinished(WebView view, String url) {
 contentView.post(new Runnable() {
  @Override
  public void run() {
  contentViewHeight = px2dp(getApplicationContext(), contentView.getMeasuredHeight());
  if (contentViewHeight > 0) {
  webView.loadUrl("javascript:document.body.style.marginTop=\"" + contentViewHeight + "px\"; void 0");
  }
  }
 });
 }
 });

看下猜想運行的結果：

H5的顯示缺少了頂部，這樣看來padding是沒有效果的。但是，為什么會沒有效果呢，難道設置padding有問題？
之后查看了上面嵌入的網頁的源碼查看了下（網頁是網絡上隨便找的一個url）：

https://36kr.com/

打開網頁編輯模式，查看body這塊的樣式：

可以看到要注入的js控制的樣式這塊是沒有設置的。因此可以將padding-top的參數通過這里設置進去。

但是發現設置的該參數無效，是什么原因呢？接著往下翻：

原來是body中控制了padding-top的最高級樣式顯示，所以element-style中設置無效。所以要么把這段注釋掉，重新寫入至element-style中，要么嘗試設置margin-top的方法。這里采用后者的做法：

可以看到，網頁頂部出現了設置好的marin-top空白的高度。

只需要將這部分操作轉換為對應的代碼即可：

將上面的

webView.loadUrl("javascript:document.body.style.paddingTop="" + contentViewHeight + "px"; void 0");

替換為：

webView.loadUrl("javascript:document.body.style.marginTop=\"" + contentViewHeight + "px\"; void 0");

3.運行效果

可以看到已經沒有閃爍了。

“Android中Webview滑進出屏幕閃爍怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！