本篇內(nèi)容介紹了“Android中Webview滑進出屏幕閃爍怎么解決”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
創(chuàng)新互聯(lián)長期為近1000家客戶提供的網(wǎng)站建設服務,團隊從業(yè)經(jīng)驗10年,關注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務;打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為濟寧企業(yè)提供專業(yè)的成都網(wǎng)站建設、成都做網(wǎng)站,濟寧網(wǎng)站改版等技術(shù)服務。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。問題圖示
xml布局:
可以看到,NestedScrollView嵌套webview,且webview初始未在一屏內(nèi)時,滑進出屏幕時會有短暫的白色塊。
解決問題
方案對比
方案 | 考慮點 |
---|---|
android:hardwareAccelerated="false" | 5.0 開始Android系統(tǒng)為了充分利用GPU的特性,使得界面渲染更加平滑而默認開啟的,如果關掉的話,那么整個網(wǎng)頁不流暢了,豈不是得不償失——>放棄 |
setBackgroundColor(Color.parseColor(“#00000000”)); setBackgroundResource(R.drawable.white); | 設置底色背景,但是webview本身是加載的H5頁面,使用的是H5頁面的底色背景,而且通過上面的gif可以看出,沒有效果——>放棄 |
==通過樣式布局,讓webview保持在第一屏內(nèi)初始化== | 本文嘗試的方案 |
方案探索
1.xml布局
通過FrameLayout來疊加使得webview保持在第一屏內(nèi)初始化,然后設置webview的padding,這樣使得完整的H5內(nèi)容是在ContentView下方顯示。
但是——>webview設置padding根本無效?。?!
怎么辦呢?無論怎樣也想不到為什么會如此,畢竟本身api的實現(xiàn)上是有些缺陷的(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"); } } }); } });
看下猜想運行的結(jié)果:
H5的顯示缺少了頂部,這樣看來padding是沒有效果的。但是,為什么會沒有效果呢,難道設置padding有問題?
之后查看了上面嵌入的網(wǎng)頁的源碼查看了下(網(wǎng)頁是網(wǎng)絡上隨便找的一個url):
https://36kr.com/
打開網(wǎng)頁編輯模式,查看body這塊的樣式:
可以看到要注入的js控制的樣式這塊是沒有設置的。因此可以將padding-top的參數(shù)通過這里設置進去。
但是發(fā)現(xiàn)設置的該參數(shù)無效,是什么原因呢?接著往下翻:
原來是body中控制了padding-top的高級樣式顯示,所以element-style中設置無效。所以要么把這段注釋掉,重新寫入至element-style中,要么嘗試設置margin-top的方法。這里采用后者的做法:
可以看到,網(wǎng)頁頂部出現(xiàn)了設置好的marin-top空白的高度。
只需要將這部分操作轉(zhuǎn)換為對應的代碼即可:
將上面的
webView.loadUrl("javascript:document.body.style.paddingTop="" + contentViewHeight + "px"; void 0");
替換為:
webView.loadUrl("javascript:document.body.style.marginTop=\"" + contentViewHeight + "px\"; void 0");
3.運行效果
可以看到已經(jīng)沒有閃爍了。
“Android中Webview滑進出屏幕閃爍怎么解決”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!