前言
在使用Webview進行滑動操作時,從螢幕可見區域外向内滑動時,會出現webview區域閃爍的問題(反之也是),本文将提供一種解決方案。
問題圖示
xml布局:
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:overScrollMode="never"
android:scrollbars="none">
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:id="@+id/contentView"
android:layout_width="match_parent"
android:layout_height="600dp"
android:background="@color/colorPrimary" />
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/contract_font">
可以看到,NestedScrollView嵌套webview,且webview初始未在一屏内時,滑進出螢幕時會有短暫的白色塊。
解決問題
方案對比
方案
考慮點
android:hardwareAccelerated="false"
5.0 開始Android系統為了充分利用GPU的特性,使得界面渲染更加平滑而預設開啟的,如果關掉的話,那麼整個網頁不流暢了,豈不是得不償失——>放棄
setBackgroundColor(Color.parseColor(“#00000000”)); setBackgroundResource(R.drawable.white);
設定底色背景,但是webview本身是加載的H5頁面,使用的是H5頁面的底色背景,而且通過上面的gif可以看出,沒有效果——>放棄
==通過樣式布局,讓webview保持在第一屏内初始化==
本文嘗試的方案
方案探索
1.xml布局
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:overScrollMode="never"
android:scrollbars="none">
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/contract_font">
android:id="@+id/contentView"
android:layout_width="match_parent"
android:layout_height="600dp"
android:background="@color/colorPrimary" />
通過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.運作效果
可以看到已經沒有閃爍了。
總結
整個方案的實作其實就兩塊:
1.布局,讓webview在一屏内初始;
2.設定H5網頁的margin-top或者padding-top;
好了,以上就是這篇文章的全部内容了,希望本文的内容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對腳本之家的支援。