关于UICollectionView分割线问题

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

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

###使用UICollectionView

  1. 设置代理
@interface ViewController ()<UICollectionViewDelegateFlowLayout,UICollectionViewDataSource>
复制代码
  1. 创建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"];
复制代码
  1. 代理方法
#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;
    }
}
复制代码
  1. 模拟请求数据
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];
复制代码
  1. 内容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

代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值