专栏首页iOS开发随笔iOS UICollectionView等分有1px缝隙

iOS UICollectionView等分有1px缝隙

在使用UICollectionView开发无缝隙或者间隙为1px的页面的时候应该会遇到这样的问题(iPhone 5s 没有问题),明明是把屏幕四等分了,但为什么会有下图的空白间隙呢?

等分有缝隙

再检查一下代码:

   UICollectionViewFlowLayout * flowLayout = [[UICollectionViewFlowLayout alloc] init];
   flowLayout.itemSize = CGSizeMake(Wi/4.0, 60);//算出来的宽度是93.75
   flowLayout.minimumLineSpacing = 0;
   flowLayout.minimumInteritemSpacing = 0;
   _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, Wi, He) collectionViewLayout:flowLayout];

发现代码也是没有问题啊,可为什么会有这样呢?(之前开发遇过这个问题,但是被自己用"画线填充"的方式取巧搞定了,没想到这次有同事问我这个问题,为了能有一个通用的方法,还是要去找出原因)。果然还是从简书找到解决方法UICollectionView 缝隙修复,这里我结合我的理解做进一步解释。有哪位看官对此有更好的阐述希望不吝指导

  • 首先应该了解一下[[UIScreen mainScrenn] scale]
iPhone 4 之前的设备为1.0
iPhone 4 ~ iPhone 6s (除plus外) 的为2.0
iPhone 6 plus 和 iPhone 6s plus 的为3.0
对于iPhone 6 Plus之前的手机,pt和px的比例是1:2,而iPhone 6 Plus出来之后,这一比例达到了1:3,

还是不太明白的话可以谷歌一下,这里有篇扩展阅读: 「像素」「渲染像素」以及「物理像素」是什么东西?它们有什么联系?

造成缝隙的原因

iPhone6的屏幕像素(point,也叫逻辑像素)是375*667,物理像素为750*1334,等分4份的话每一个item的宽度是375/4=93.75,这里是没有问题的,问题是屏幕能分的最小物理像素是1,而iPhone6的[[UIScreen mainScrenn] scale]是2.0,也就是说1个屏幕像素(逻辑像素)对应有2个物理像素,即0.5个屏幕像素对应1个物理像素,而iPhone6四等分的宽度是93.75,根据前面的分析有0.25是不可再分的,这就是造成缝隙的原因。 同理iPhone6 Plus的[[UIScreen mainScrenn] scale]是3.0,也就是说1个屏幕像素(逻辑像素)对应有3个物理像素,即0.333333个屏幕像素对应1个物理像素,四等分之后是414/4=103.5,有0.16是不可再分的,也会有缝隙。

解决办法

思路:只要itemSize的width的小数点后的值等于1 / [UIScreen mainScreen].scale的值即可。

- (CGFloat)fixSlitWith:(CGRect)rect colCount:(CGFloat)colCount space:(CGFloat)space {
    CGFloat totalSpace = (colCount - 1) * space;//总共留出的距离
    CGFloat itemWidth = (rect.size.width - totalSpace) / colCount;// 按照真实屏幕算出的cell宽度 (iPhone6 375*667)93.75
    CGFloat fixValue = 1 / [UIScreen mainScreen].scale; //(1px=0.5pt,6Plus为3px=1pt)
    CGFloat realItemWidth = floor(itemWidth) + fixValue;//取整加fixValue  floor:如果参数是小数,则求最大的整数但不大于本身.
    if (realItemWidth < itemWidth) {// 有可能原cell宽度小数点后一位大于0.5
        realItemWidth += fixValue;
    }
    CGFloat realWidth = colCount * realItemWidth + totalSpace;//算出屏幕等分后满足1px=([UIScreen mainScreen].scale)pt实际的宽度,可能会超出屏幕,需要调整一下frame
    CGFloat pointX = (realWidth - rect.size.width) / 2; //偏移距离
    rect.origin.x = -pointX;//向左偏移
    rect.size.width = realWidth;
    _rect = rect;
    return realItemWidth; //每个cell的真实宽度
}

修复后的效果

修复后的效果

间隙为1的效果,不会出现有宽窄不一的情况了

OC版本demo下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Git 学习笔记

    傅_hc
  • ​SceneKit基本概念

    SCNView主要作用是显示SceneKit的3D内容,在iOS系统上是UIView的子类,所以它可以添加到我们的视图中去,如果我们做一个应用想要加点3D元素,...

    傅_hc
  • Unity项目嵌入现有iOS项目的方法

    傅_hc
  • 将 UWP 的有效像素(Effective Pixels)引入 WPF

    发布于 2017-11-14 03:26 更新于 2017-11...

    walterlv
  • 【响应式布局】理解设备像素、设备独立像素和css像素

    这篇文章是我在我的旧博客上发过的文章,最近又碰到这个问题,整理修改了一下发到这里。

    前端博客 : alili.tech
  • 【笔记】《计算机图形学》(3)——光栅图像

    这系列的笔记来自著名的图形学虎书《Fundamentals of Computer Graphics》,这里我为了保证与最新的技术接轨看的是英文第五版,而没有选...

    ZifengHuang
  • SLIC 超像素分割详解(三):应用

    看过上面的介绍后,我们应该思考一下:分割好的超像素有什么用?怎么用?用到哪里? 首先,超像素可以用来做跟踪,可以参考卢湖川课题组发表在IEEE TIP上的《Ro...

    用户1150922
  • 像素级「抄袭」你的童年,现在他们还要承包你的表情包 | 晓组织

    知晓君
  • 像素相关概念:PPI、DPI、设备像素、独立像素

    桃翁
  • 用像素艺术表现你最喜爱的电视节目

    像素艺术是一种由缺乏而形成的艺术,以像素为单位,一个点一个点去绘制出图像,也有人称之为点画法或像素艺术 ( Pixel Art )。在80年代的8位元电子游戏里...

    宇相

扫码关注云+社区

领取腾讯云代金券