资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Android中Webview滑进出屏幕闪烁怎么解决-创新互联

本篇内容介绍了“Android中Webview滑进出屏幕闪烁怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联长期为近1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为济宁企业提供专业的成都网站建设、成都做网站济宁网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

问题图示

Android中Webview滑进出屏幕闪烁怎么解决

xml布局:





 
 
 
 

可以看到,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布局





 

 

 
 

通过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滑进出屏幕闪烁怎么解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


网页名称:Android中Webview滑进出屏幕闪烁怎么解决-创新互联
标题链接:http://cdkjz.cn/article/cecphd.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220