Android Webview滑進(jìn)出屏幕閃爍的解決方法
前言
在使用Webview進(jìn)行滑動(dòng)操作時(shí)，從屏幕可見(jiàn)區(qū)域外向內(nèi)滑動(dòng)時(shí)，會(huì)出現(xiàn)webview區(qū)域閃爍的問(wèn)題（反之也是），本文將提供一種解決方案。
問(wèn)題圖示
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初始未在一屏內(nèi)時(shí)，滑進(jìn)出屏幕時(shí)會(huì)有短暫的白色塊。
解決問(wèn)題
方案對(duì)比
| 方案 | 考慮點(diǎn) |
|---|---|
| android:hardwareAccelerated="false" | 5.0 開(kāi)始Android系統(tǒng)為了充分利用GPU的特性，使得界面渲染更加平滑而默認(rèn)開(kāi)啟的，如果關(guān)掉的話，那么整個(gè)網(wǎng)頁(yè)不流暢了，豈不是得不償失——>放棄 |
| setBackgroundColor(Color.parseColor(“#00000000”)); setBackgroundResource(R.drawable.white); | 設(shè)置底色背景，但是webview本身是加載的H5頁(yè)面，使用的是H5頁(yè)面的底色背景，而且通過(guò)上面的gif可以看出，沒(méi)有效果——>放棄 |
| ==通過(guò)樣式布局，讓webview保持在第一屏內(nèi)初始化== | 本文嘗試的方案 |
方案探索
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>
通過(guò)FrameLayout來(lái)疊加使得webview保持在第一屏內(nèi)初始化，然后設(shè)置webview的padding，這樣使得完整的H5內(nèi)容是在ContentView下方顯示。
但是——>webview設(shè)置padding根本無(wú)效?。?！
怎么辦呢？無(wú)論怎樣也想不到為什么會(huì)如此，畢竟本身api的實(shí)現(xiàn)上是有些缺陷的（https://stackoverflow.com/questions/9170042/how-to-add-padding-around-a-webview ）
2.解決問(wèn)題
最終的解決方案則是通過(guò)注入js代碼來(lái)控制H5的padding來(lái)解決。
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");
}
}
});
}
});
看下猜想運(yùn)行的結(jié)果：
H5的顯示缺少了頂部，這樣看來(lái)padding是沒(méi)有效果的。但是，為什么會(huì)沒(méi)有效果呢，難道設(shè)置padding有問(wèn)題？
之后查看了上面嵌入的網(wǎng)頁(yè)的源碼查看了下（網(wǎng)頁(yè)是網(wǎng)絡(luò)上隨便找的一個(gè)url）：
https://36kr.com/
打開(kāi)網(wǎng)頁(yè)編輯模式，查看body這塊的樣式：
可以看到要注入的js控制的樣式這塊是沒(méi)有設(shè)置的。因此可以將padding-top的參數(shù)通過(guò)這里設(shè)置進(jìn)去。
但是發(fā)現(xiàn)設(shè)置的該參數(shù)無(wú)效，是什么原因呢？接著往下翻：
原來(lái)是body中控制了padding-top的最高級(jí)樣式顯示，所以element-style中設(shè)置無(wú)效。所以要么把這段注釋掉，重新寫(xiě)入至element-style中，要么嘗試設(shè)置margin-top的方法。這里采用后者的做法：
可以看到，網(wǎng)頁(yè)頂部出現(xiàn)了設(shè)置好的marin-top空白的高度。
只需要將這部分操作轉(zhuǎn)換為對(duì)應(yīng)的代碼即可：
將上面的
webView.loadUrl("javascript:document.body.style.paddingTop="" + contentViewHeight + "px"; void 0");
替換為：
webView.loadUrl("javascript:document.body.style.marginTop=\"" + contentViewHeight + "px\"; void 0");
3.運(yùn)行效果
可以看到已經(jīng)沒(méi)有閃爍了。
總結(jié)
整個(gè)方案的實(shí)現(xiàn)其實(shí)就兩塊：
1.布局，讓webview在一屏內(nèi)初始；
2.設(shè)置H5網(wǎng)頁(yè)的margin-top或者padding-top；
好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。
- android WebView加載html5介紹
- Android中實(shí)現(xiàn)Webview頂部帶進(jìn)度條的方法
- Android WebView使用方法詳解 附j(luò)s交互調(diào)用方法
- android中webview控件和javascript交互實(shí)例
- android webview中使用Java調(diào)用JavaScript方法并獲取返回值
- 在Android系統(tǒng)中使用WebViewClient處理跳轉(zhuǎn)URL的方法
- Android中Webview打開(kāi)網(wǎng)頁(yè)的同時(shí)發(fā)送HTTP頭信息方法
- Android開(kāi)發(fā)之WebView組件的使用解析
- 解析Android中webview和js之間的交互
- Android中 webView調(diào)用JS出錯(cuò)的解決辦法
相關(guān)文章
本文主要介紹了AsyncTask的三個(gè)屬性值和四個(gè)步驟，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
Android StatusBar 透明化方法(不同的版本適配)
本篇文章主要介紹了Android StatusBar 透明化方法(不同的版本適配)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
詳解Android Scroller與computeScroll的調(diào)用機(jī)制關(guān)系
這篇文章主要介紹了詳解Android Scroller與computeScroll的調(diào)用機(jī)制關(guān)系的相關(guān)資料,需要的朋友可以參考下2016-01-01
Android調(diào)用手機(jī)攝像頭拍照和錄音功能
這篇文章主要為大家詳細(xì)介紹了Android調(diào)用手機(jī)攝像頭拍照和錄音功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Android學(xué)習(xí)筆記之AndroidManifest.xml文件解析(詳解)
這篇文章主要介紹了Android學(xué)習(xí)筆記之AndroidManifest.xml文件解析,需要的朋友可以參考下2015-10-10
android Web跳轉(zhuǎn)到app指定頁(yè)面并傳遞參數(shù)實(shí)例
這篇文章主要介紹了android Web跳轉(zhuǎn)到app指定頁(yè)面并傳遞參數(shù)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-03-03
這篇文章主要介紹了Android 中讀取Excel文件實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
Android采用File形式保存與讀取數(shù)據(jù)的方法
這篇文章主要介紹了Android采用File形式保存與讀取數(shù)據(jù)的方法,涉及Android文件流操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
解決Android 10/Android Q手機(jī)在后臺(tái)無(wú)法正常定位問(wèn)題
這篇文章主要介紹了解決Android 10/Android Q手機(jī)在后臺(tái)無(wú)法正常定位問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Android 通過(guò)當(dāng)前經(jīng)緯度獲得城市的實(shí)例代碼
Android 通過(guò)當(dāng)前經(jīng)緯度獲得城市的實(shí)例代碼，需要的朋友可以參考一下2013-06-06