Android Webview滑进出屏幕闪烁的解决方法
作者:ganshenml 发布时间:2021-11-30 11:57:33
前言
在使用Webview进行滑动操作时,从屏幕可见区域外向内滑动时,会出现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");
}
}
});
}
});
看下猜想运行的结果:
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;
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。
来源:https://juejin.im/post/5c85debdf265da2de450adf8
猜你喜欢
- using System.Drawing;using System.Drawing.Imaging;using System.IO;usin
- 最近,阿里开源的nacos比较火,可以和springcloud和dubbo共用,对dubbo升级到springcloud非常的方便。这里学习
- 使用foreach循环的坑我们首先看一段MyBatis中使用foreach循环的sql:SELECT * FROM table where
- 本文实例讲述了C#实现日期格式转换的公共方法类。分享给大家供大家参考,具体如下:这里演示了C#中一些日期格式的转换。创建公共方法类(Util
- 本文实例讲述了Android编程实现将压缩数据库文件拷贝到安装目录的方法。分享给大家供大家参考,具体如下:public void copyZ
- 背景我在准备使用 JVM 的命令时候观察程序的动态,但是发现 Main 函数启动就退出了,所以也没办法直接观察,于是想到了如何让 Main
- 根据列表的适配器类型,列表分为三种,ArrayAdapter,SimpleAdapter和SimpleCursorAdapter,这三种适配
- 建造者模式概述建造者模式(Builder Pattern)属于创建型模式。它是将一个复杂的构建与其表示相分离,使得同样的构建过程可以创建不同
- 数字可以标志货币、百分比、积分和电话号码等,就货币而言,在不同的国家会以不同的格式来定义,本实例将接收用户输入的数字,然后在控制台中输出其货
- 这篇文章主要介绍了简单了解Java多态向上转型相关原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋
- 一、前言 做过系统参数设置的同学们,肯定遇到过要提供一系列具有相同特点的选项供用户选择。
- C语言代码由上到下依次执行,原则上函数定义要出现在函数调用之前,否则就会报错。但在实际开发中,经常会在函数定义之前使用它们,这个时候就需要提
- 什么是 terms set 查询?Terms set 查询根据匹配给定字段的精确术语的最少数量返回文档。terms set 查询与 term
- 先看代码public class TestDemo1 { public static void main(String[] ar
- 1. Spring ProfileSpring可使用Profile绝对程序在不同环境下执行情况,包含配置、加载Bean、依赖等。 Sprin
- 本篇主要介绍C#的Excel导入、导出,供大家参考,具体内容如下一. 介绍1.1 第三方类库:NPOI说明:NPOI是POI项目的.NET
- PostgreSQL是一种特性非常齐全的自由软件的对象-关系型数据库管理系统(ORDBMS),是以加州大学计算机系开发的POSTGRES,4
- springboot开启一个监听线程执行任务public class StartApplicationListener implements
- 一、引言我们都知道,数据库连接是很珍贵的资源,频繁的开关数据库连接是非常浪费服务器的CPU资源以及内存的,所以我们一般都是使用数据库连接池来
- 一、项目创建创建一个控制台应用程序,项目右键->管理 NuGet 程序包->Topshelft及Topshelf.Log4Net