需求为页面显示一些人的头像和名字，如果数据不足一行，则在该行的后面加上空白显示。
先给出最终效果图(为了更直观的看到线条，线条颜色设置为红色)
Simulator Screen Shot 2017年8月16日 11.14.24.png
使用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运行效果
Simulator Screen Shot 2017年8月16日 11.31.10.png
- 7运行效果
Simulator Screen Shot 2017年8月16日 11.31.40.png
很奇怪，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下运行效果:
Simulator Screen Shot 2017年8月16日 11.34.39.png
此时竖线显示，但发现最右侧屏幕边上显示竖线，这时可以设置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
网友评论