如何解决Android中Webview滑进出屏幕闪烁的问题

发布时间:2021-07-01 10:38:58 作者:小新
来源:亿速云 阅读:442

这篇文章将为大家详细讲解有关如何解决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初始未在一屏内时,滑进出屏幕时会有短暂的白色块。

解决问题

方案对比

方案考虑点
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://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");
  }
  }
 });
 }
 });

看下猜想运行的结果:

如何解决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滑进出屏幕闪烁的问题

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

关于“如何解决Android中Webview滑进出屏幕闪烁的问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. Android中Webview自适应屏幕
  2. 解决WinForm界面闪烁问题

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

android webview

上一篇:php源码安装没有php.ini怎么解决

下一篇:php如何执行shell不等待响应

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》