先放上bug
演示:
可以看到,在
iPhoneX
上,网页加载中会在白底的webView
底部出现一块黑边,这个就很影响用户体验和美观了,如果加载时间长一点,这个效果就会更加明显。经过测试,发现这个问题不只出现在
iPhone X
及以上机型,其他机型同样有,只是平时我们网络很快的话,不去拉就看不到底部的黑边,实际是存在超过屏幕外的地方那么怎么解决这个问题呢?
解决方案(网上查阅资料得到) :
self.webView.backgroundColor = [UIColor whiteColor];
self.webView.opaque = NO;
好了,如果只是想看这个问题如何解决的话,到这里就可以点左上角或者右上角叉叉关闭了,以下是我对这两行代码如何起作用的一些个人分析(扯淡😂)。
分析:
为什么这两行代码就解决了这个问题呢?是的,一开始我也以为只是iPhone X
类机型才会出现的问题,会想用这样的代码去解决:
//非完美解决方案
self.webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
这样是很方便,只一行代码,iPhone X
以上机型不会再出现问题,但同时却也没有了底部自动缩进的效果,x类型设备滑到最底部的时候,网页最底部会紧贴着设备最底部,效果不太好,如果想要自动缩进的话就不方便了。
前者是相当于放弃safeArea
自动缩进的功能来实现去黑边的效果,但是其他非X类机型
上任然存在问题,而后面这个才是真正解决了问题,且不影响contentInsetAdjustmentBehavior
属性的使用。
那么这两行代码是如何解决这个问题的呢?
我们先来看一下剖析图
从图中我们发现
UIWebView
的结构是UIWebView
的子视图是一个UIWebViewScrollView
,然后UIWebViewScrollView
上又有一个UIWebBrowserView
,就是图中我选中的View
,很明显黑边也就是这个东西导致的。
然后我们从opaque
入手,从官方文档上,我们得到这样的介绍
This property provides a hint to the drawing system as to how it should treat the view. If set to YES, the drawing system treats the view as fully opaque, which allows the drawing system to optimize some drawing operations and improve performance. If set to NO, the drawing system composites the view normally with other content. The default value of this property is YES.
也就是说,如果这个属性为YES
,这个视图就表现出这个属性的字面意思,不透明,并且绘图系统会进行一些优化来提升性能;如果设置为NO
,绘图系统将会把它和其他视图结合在一起,肯定也不会进行性能优化,所以,这里我们把它关闭,实际上需要它透明,然后不用优化性能。emmm...
所以这跟我们实现的效果有什么关联呢?
好吧,试着去理解一下,是我们这里的webBrowserView
导致的问题,那么就从它下手,这里提到透明,难道是把webBrowserView
变透明了?嗯?但是我们这里设置opaque
为NO
的不是webView
吗?说着我尝试了一下。
因为我是用storyboard
做的,webView
默认opaque
为YES
。
总结一下,正好webView
和webBrowserView
的opaque
属性都为YES
,好,那我们按照解决方案中说的改为NO
试试。
运行起来:
将webView
的opaque
属性改成NO
后webBrowserView
的opaque
也变成NO
了,是不是父视图的opaque
属性改变会导致相应的子视图的opaque
属性跟着变化呢?我也去做了一个实验,结果证明并没有绝对的关系,大家有兴趣可以试试在一个View
上add
另一个view
,然后两个view
的opaque
设置不同,打断点,啵出他们的opaque
属性,会发现没有丝毫影响。
那这里因为webView
是系统封装的一个独特的视图,它内部可能有什么不为人知的秘密我这里就只能做个猜测了,如果有懂其中原理的大神还望评论区留言,谢谢啦🙏!
这里至少证明了webBrowserView
的opaque
会随着webView
的opaque
属性相应改变。
好,我们执行了第一句webView
的opaque
设置为NO
的代码,看下效果
整个
webView
加载后变成了网页默认的背景颜色,看下剖析图:
webBrowserView
和webView
的背景颜色变成一样了,我们改变一下webView
的颜色来证明这个结论:可以看到,将webView
背景颜色设为绿色后,webBrowserView
的背景也变为绿色了。
OK,那么第二句webView.backgroundColor = [UIColor whiteColor]
也可以解释了,webView
的opaque
设置为NO
后,webBrowser
就没有了黑边,并且颜色跟webView
的背景颜色一样,之所以要写成白色,可能大多数需求都是白色吧,所以这里又获得一个技能,想要设置成啥颜色直接改变webView
的背景颜色就可以了,不一定是白色,按照需求来就可以了。
总结:
当webView
的opaque
属性为YES
时,webBrowserView
的opaque
属性也为YES
,这个时候,webBrowserView
不透明,且绘画系统会对它进行优化,可能认为是直接渲染成白色比较省性能吧,也就是性能优化的结果,而底部的黑边就是加载网页的内部控件所留下的效果了(关于webBrowserView
内部控件,就触及到我的盲区了,如果有懂这其中原理的请不吝赐教),总之也是跟性能优化相关;
而将webView
的opaque
属性设置为NO
时,webBrowserView
也会相应的设置opaque
为NO
(没有为什么,系统封装的控件),这个时候绘画系统就认为webBrowserView
是透明的,却是直接将webBrowserView
的颜色设置为webView
的颜色,可能是因为webBrowserView
要加载并显示网页的内容,不能设置成透明的原因吧,所以并没有让它透明,而是做了一个类似透明的效果,也就是将背后视图的颜色设置为自己的颜色(哈哈,你懂得,猜测)。