欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android Webview滑进出屏幕闪烁的解决方法

程序员文章站 2023-09-03 23:04:05
前言 在使用webview进行滑动操作时,从屏幕可见区域外向内滑动时,会出现webview区域闪烁的问题(反之也是),本文将提供一种解决方案。 问题图示 xm...

前言

在使用webview进行滑动操作时,从屏幕可见区域外向内滑动时,会出现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初始未在一屏内时,滑进出屏幕时会有短暂的白色块。

解决问题

方案对比

方案 考虑点
android:hardwareaccelerated="false" 5.0 开始android系统为了充分利用gpu的特性,使得界面渲染更加平滑而默认开启的,如果关掉的话,那么整个网页不流畅了,岂不是得不偿失——>放弃
setbackgroundcolor(color.parsecolor(“#00000000”)); setbackgroundresource(r.drawable.white); 设置底色背景,但是webview本身是加载的h5页面,使用的是h5页面的底色背景,而且通过上面的gif可以看出,没有效果——>放弃
==通过样式布局,让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://*.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");
  }
  }
 });
 }
 });

看下猜想运行的结果:

Android Webview滑进出屏幕闪烁的解决方法

h5的显示缺少了顶部,这样看来padding是没有效果的。但是,为什么会没有效果呢,难道设置padding有问题?
之后查看了上面嵌入的网页的源码查看了下(网页是网络上随便找的一个url):

https://36kr.com/

打开网页编辑模式,查看body这块的样式:

Android Webview滑进出屏幕闪烁的解决方法

可以看到要注入的js控制的样式这块是没有设置的。因此可以将padding-top的参数通过这里设置进去。

Android Webview滑进出屏幕闪烁的解决方法

但是发现设置的该参数无效,是什么原因呢?接着往下翻:

Android Webview滑进出屏幕闪烁的解决方法

原来是body中控制了padding-top的*样式显示,所以element-style中设置无效。所以要么把这段注释掉,重新写入至element-style中,要么尝试设置margin-top的方法。这里采用后者的做法:

Android Webview滑进出屏幕闪烁的解决方法

可以看到,网页顶部出现了设置好的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滑进出屏幕闪烁的解决方法

可以看到已经没有闪烁了。

总结

整个方案的实现其实就两块:

1.布局,让webview在一屏内初始;

2.设置h5网页的margin-top或者padding-top;

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。