图片展示时,偶尔出现混乱的问题

今天遇到了一个这样的问题,就是在用UICollectionView 展示图片的时候,其中一个Cell的图片或多个图片混乱啦,如下图展示

混乱的情况
正常的情况

下一图实际上也是我切的层次图的展示,所以说明此时ImageView 设置是木有问题的,然而问题出现在哪里呢?第一反应难道是图片缓存的原因吗(ps:此处用的是YYWebIamgeView 处理的),而且这个问题还是偶尔出现的。

经过尝试。直接把app删除掉,然后重新启动,很长一段时间内是不会出现这个问题, 然而又是治标不治本啊。

一番尝试后,发现了这个问题的出现是和之前的这个设置有关。

contentImageView.contentMode = UIViewContentModeCenter;

但是UIViewContentModeCenter 就是让图片居中啊,跟混乱有什么关系呢?仔细了解我们可以知道这样设置图片不会拉伸或者压缩,就是按照imageView的frame和图片的大小来居中显示的

这里有两种情况:

  • 图片比view的区域更大。这个时候会截取图片的中间部位显示在frame区域里面。
  • 图片比view的区域更小。这个时候图片会完整的显示在frame的中间位置。

如果在默认情况,图片的多出来的部分还是会显示屏幕上。如果不希望超过frame的区域显示在屏幕上要设置。clipsToBounds属性。

imageView.clipsToBounds  = YES;

看了这个关于UIImageView的显示问题——居中显示或者截取图片的中间部分显示,就是说用UIViewContentModeCenter的时候,假设在图片不规则的时候,而且图片的宽或者高比frame的宽高更小的时候,会出现空白的情况

所以又有着,对contentMode 属性对图片进行等比例缩放,它将图片缩放到正好铺满整个UIImageView视图显示,且图片的宽度或者高度(至少一个)恰好与视图的宽度或者高度相等。

  • 如果高度相等,则图片左右会被裁剪掉等宽的内容;
  • 如果宽度相等,则图片的上下会被裁剪掉等高的内容;
  • 如果宽高都相等,则图片不会被裁剪。
imageView.contentMode =  UIViewContentModeScaleAspectFill;
imageView.clipsToBounds  = YES;

用上述这个方法图片会更好的达成居中显示效果。

然而此处我们的目的并不是要达成居中显示的效果,我们在用contentImageView.contentMode = UIViewContentModeCenter是为了让占位图,更好显示的目的。

所以上述方法并不合适我们,我们依然用下面方法就好了

contentImageView.contentMode = UIViewContentModeCenter;
contentImageView.clipsToBounds = YES;

因为YYImage 处我们已经对图片size进行了一个处理,让image的大小是我们所需要的,所以不会出现当图片的宽或者高比frame的宽高更小的时候,出现空白的情况。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容