关于UICollectionView分割线问题-CSDN博客

需求为页面显示一些人的头像和名字，如果数据不足一行，则在该行的后面加上空白显示。

先给出最终效果图(为了更直观的看到线条，线条颜色设置为红色)

###使用UICollectionView

设置代理

@interface ViewController ()<UICollectionViewDelegateFlowLayout,UICollectionViewDataSource>
复制代码

创建collectionView

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    //设置滑动方向
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    flowLayout.minimumLineSpacing = 0;
    flowLayout.minimumInteritemSpacing = 0;
    CGFloat width = SCREEN_WIDTH / 4.0;
    flowLayout.itemSize = CGSizeMake(width, 110);
    
    _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
    _collectionView.backgroundColor = [UIColor colorWithHex:0xf5f7fa alpha:1];
    _collectionView.showsVerticalScrollIndicator = NO;
    _collectionView.delegate = self;
    _collectionView.dataSource = self;
    [self.view addSubview:self.collectionView];
    
    [_collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.mas_topLayoutGuideBottom).mas_offset(50);
        make.left.bottom.and.right.equalTo(self.view);
    }];
    [_collectionView registerClass:[ContentCell class] forCellWithReuseIdentifier:@"ContentCell"];
    [_collectionView registerClass:[NullContentCell class] forCellWithReuseIdentifier:@"NullContentCell"];
复制代码

代理方法

#pragma mark -UICollectionViewDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.peopleArray.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.item < self.peopleArray.count - (4 - _yu)) {
        
        static NSString *iden = @"ContentCell";
        ContentCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:iden forIndexPath:indexPath];
        
        cell.model = self.peopleArray[indexPath.item];
        
        return cell;
    }else {
        
        static NSString *iden = @"NullContentCell";
        NullContentCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:iden forIndexPath:indexPath];
        
        return cell;
    }
}
复制代码

模拟请求数据

for (int i = 0; i < 10; i ++) {
        ComeOnModel *model = [[ComeOnModel alloc] init];
        model.encouragerName = [NSString stringWithFormat:@"pic%d", i];
        model.encouragerHeadUrl = [NSString stringWithFormat:@"pic%d", i];
        [self.peopleArray addObject:model];
    }
    
    if (self.peopleArray.count % 4 != 0) {
        self.yu = self.peopleArray.count % 4;
        
//若数据不足一行  补齐一行
        for (int i = 0; i < (4 - _yu); i ++) {
            ComeOnModel *model = [[ComeOnModel alloc] init];
            [self.peopleArray addObject:model];
        }
    }
    
    self.totalLabel.text = [NSString stringWithFormat:@"%ld位", self.peopleArray.count - (4 - _yu)];
    [self.collectionView reloadData];
复制代码

内容cell和空白cell

//ContentCell

[self.contentView addSubview:self.imgView];
    [self.contentView addSubview:self.nameLabel];
    
    [_imgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@20);
        make.size.mas_equalTo(CGSizeMake(50, 50));
        make.centerX.equalTo(self.contentView);
    }];
    
    [_nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_imgView.mas_bottom).mas_offset(10);
        make.leading.and.trailing.equalTo(@0);
    }];


UIView *horLineView = [[UIView alloc] init];
    horLineView.backgroundColor = [UIColor redColor];
    [self.contentView addSubview:horLineView];
    [horLineView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.and.bottom.and.trailing.equalTo(@0);
        make.height.equalTo(@0.5);
    }];
    
    UIView *verLineView = [[UIView alloc] init];
    verLineView.backgroundColor = [UIColor redColor];
    [self.contentView addSubview:verLineView];
    [verLineView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.and.bottom.and.trailing.equalTo(@0);
        make.width.equalTo(@0.5);
    }];
复制代码

//NullContentCell

UIView *horLineView = [[UIView alloc] init];
    horLineView.backgroundColor = [UIColor redColor];
    [self.contentView addSubview:horLineView];
    [horLineView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.and.bottom.and.trailing.equalTo(@0);
        make.height.equalTo(@0.5);
    }];
    
    UIView *verLineView = [[UIView alloc] init];
    verLineView.backgroundColor = [UIColor redColor];
    [self.contentView addSubview:verLineView];
    [verLineView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.and.bottom.and.trailing.equalTo(@0);
        make.width.equalTo(@0.5);
    }];
复制代码

5s运行效果

7运行效果

很奇怪，5s下运行效果没问题但6s、7下运行就会出现有竖线不显示问题。

###修改

如果我不使用autolayout布局直接使用frame布局

UIView *horLineView = [[UIView alloc] init];
    horLineView.backgroundColor = [UIColor redColor];
    [self.contentView addSubview:horLineView];
    horLineView.frame = CGRectMake(0, self.bounds.size.height - 0.5, self.bounds.size.width, 0.5);
    
    UIView *verLineView = [[UIView alloc] init];
    verLineView.backgroundColor = [UIColor redColor];
    [self.contentView addSubview:verLineView];
    verLineView.frame = CGRectMake(self.bounds.size.width - 0.5, 0, 0.5, self.bounds.size.height);
复制代码

7下运行效果:

此时竖线显示，但发现最右侧屏幕边上显示竖线，这时可以设置collectionView宽度为屏幕宽度 + 0.5 隐藏掉该竖线。

如果cell中线条仍然使用autolayout布局，但collectionView宽度修改为屏幕宽度 + 0.5，则不存在竖线不显示情况。
在视图的layer层上添加线条

CALayer *bottomLineLayer = [[CALayer alloc] init];
    bottomLineLayer.frame = CGRectMake(0, self.bounds.size.height - 0.5, self.bounds.size.width, 0.5);
//    bottomLineLayer.backgroundColor = [UIColor colorWithRed:230/255.0 green:233/255.0 blue:237/255.0 alpha:1].CGColor;
    bottomLineLayer.backgroundColor = [UIColor redColor].CGColor;
    [self.contentView.layer addSublayer:bottomLineLayer];
    
    CALayer *rightLineLayer = [[CALayer alloc] init];
    rightLineLayer.frame = CGRectMake(self.bounds.size.width - 0.5, 0, 0.5, self.bounds.size.height);
//    rightLineLayer.backgroundColor = [UIColor colorWithRed:230/255.0 green:233/255.0 blue:237/255.0 alpha:1].CGColor;
    rightLineLayer.backgroundColor = [UIColor redColor].CGColor;
    [self.contentView.layer addSublayer:rightLineLayer];
复制代码

使用该方式添加线条，即使collectionView宽度不加0.5 线条均显示，但最右侧屏幕边缘存在竖线，还是设置collectionView宽度为屏幕宽度 + 0.5.

PS: 有同事建议宽或高度小于1单位的控件均在视图的layer层上添加，常见于tableView和collectionView

代码