关于UICollectionView分割线问题-白红宇

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

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

###使用UICollectionView

设置代理

@interface ViewController ()
    
     复制代码

创建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