解决 UICollectionViewCell 之间不应有的分割线问题

转载自：https://www.jianshu.com/p/b92d56f3b506

1.出现问题：

项目中UICollectionViewCell的宽度为 屏幕宽度 / 7，且最小间距已设置为0 , 但是展示的cell间总有莫名其妙的分割线 , 如下图：

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
CGFloat itemWidth = self.frame.size.width / 7;
layout.itemSize = CGSizeMake(itemWidth, itemWidth);
layout.minimumInteritemSpacing = 0;

有分割线的cell.jpeg

2.测试原因：

创建新类 FYCalendarCellFlowLayout 继承 UICollectionViewFlowLayout，重写下面方法，打印每个cell的frame，结果如下:

该方法官方解释：返回所有布局属性
return an array layout attributes instances for all the views in the given rect

- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSMutableArray* attributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];
    
    for (UICollectionViewLayoutAttributes *attr in attributes) {
        NSLog(@"%@", NSStringFromCGRect([attr frame]));
    }
    return attributes;
}

此时我用的iPhone5s的模拟器，宽320，每个cell的宽度约等于45.7（并未除尽），而2个cell的x轴的间距却不完全等于这个数，也就是会有间距。

{{0, 0}, {45.714285714285715, 45.714285714285715}}
{{45.5, 0}, {45.714285714285715, 45.714285714285715}}
{{91.5, 0}, {45.714285714285715, 45.714285714285715}}
{{137, 0}, {45.714285714285715, 45.714285714285715}}
{{183, 0}, {45.714285714285715, 45.714285714285715}}
{{228.5, 0}, {45.714285714285715, 45.714285714285715}}
{{274.5, 0}, {45.714285714285715, 45.714285714285715}}
{{0, 45.5}, {45.714285714285715, 45.714285714285715}}
{{45.5, 45.5}, {45.714285714285715, 45.714285714285715}}
{{91.5, 45.5}, {45.714285714285715, 45.714285714285715}}
......

3.解决办法：

依旧是重写上述方法，添加如下代码, 最后使用FYCalendarCellFlowLayout创建UICollectionView，再次运行，解决问题。

- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSMutableArray* attributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];
    
    //从第2个循环到最后一个
    for(int i = 1; i < [attributes count]; ++i) {
        //当前attributes
        UICollectionViewLayoutAttributes *currentLayoutAttributes = attributes[i];
        //上一个attributes
        UICollectionViewLayoutAttributes *prevLayoutAttributes = attributes[i - 1];
        //设置最大间距，可根据需要改
        NSInteger maximumSpacing = 0;
        //前一个cell的最右边
        NSInteger origin = CGRectGetMaxX(prevLayoutAttributes.frame);
        //如果当前一个cell的最右边加上我们想要的间距加上当前cell的宽度依然在contentSize中，我们改变当前cell的原点位置
        //不加这个判断的后果是，UICollectionView只显示一行，原因是下面所有cell的x值都被加到第一行最后一个元素的后面了
        if(origin + maximumSpacing + currentLayoutAttributes.frame.size.width < self.collectionViewContentSize.width) {
            CGRect frame = currentLayoutAttributes.frame;
            frame.origin.x = origin + maximumSpacing;
            currentLayoutAttributes.frame = frame;
        }
    }
    
    return attributes;
}

 

无分割线的cell.jpeg

此时，因为是用的前一个cell的最大X值加上0作为下一个cell的X值，而最开始的X值已经有误差了，最后累加的无车形成明显的空隙，因此改为用 每个cell的宽 列索引* 作为X值；

 

- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSMutableArray* attributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];

    //从第2个循环到最后一个
    for(int i = 1; i < [attributes count]; ++i) {
        
        UICollectionViewLayoutAttributes *currentLayoutAttributes = attributes[i];
        
        UICollectionViewLayoutAttributes *prevLayoutAttributes = attributes[i - 1];
        //设置最大间距，可根据需要改
        NSInteger maximumSpacing = 0;
        
        NSInteger maxX = CGRectGetMaxX(prevLayoutAttributes.frame);

        int col_idx = i % 7;
        float W = SCREEN_WIDTH/7;
        //如果当前一个cell的最右边加上我们想要的间距加上当前cell的宽度依然在contentSize中，我们改变当前cell的原点位置
        //不加这个判断的后果是，UICollectionView只显示一行，原因是下面所有cell的x值都被加到第一行最后一个元素的后面了
        if(maxX + maximumSpacing + currentLayoutAttributes.frame.size.width < self.collectionViewContentSize.width) {
            CGRect frame = currentLayoutAttributes.frame;
            frame.origin.x = col_idx * W;
            currentLayoutAttributes.frame = frame;
        }
    }
    
    return attributes;
}

无分割线无空隙的cell.jpeg

作者：何以_aaa
链接：https://www.jianshu.com/p/b92d56f3b506
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。