需求為頁面顯示一些人的頭像和名字蚣驼，如果數(shù)據(jù)不足一行一铅，則在該行的后面加上空白顯示尊浪。
先給出最終效果圖(為了更直觀的看到線條票腰，線條顏色設(shè)置為紅色)
Simulator Screen Shot 2017年8月16日 11.14.24.png
使用UICollectionView
- 設(shè)置代理
@interface ViewController ()<UICollectionViewDelegateFlowLayout,UICollectionViewDataSource>
- 創(chuàng)建collectionView
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
//設(shè)置滑動(dòng)方向
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;
}
}
- 模擬請(qǐng)求數(shù)據(jù)
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;
//若數(shù)據(jù)不足一行 補(bǔ)齊一行
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];
- 內(nèi)容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運(yùn)行效果
Simulator Screen Shot 2017年8月16日 11.31.10.png
- 7運(yùn)行效果
Simulator Screen Shot 2017年8月16日 11.31.40.png
很奇怪城看，5s下運(yùn)行效果沒問題 但6s、7下運(yùn)行就會(huì)出現(xiàn)有豎線不顯示問題杏慰。
修改
- 如果我不使用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下運(yùn)行效果:
Simulator Screen Shot 2017年8月16日 11.34.39.png
此時(shí)豎線顯示测柠，但發(fā)現(xiàn)最右側(cè)屏幕邊上顯示豎線，這時(shí)可以設(shè)置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 線條均顯示，但最右側(cè)屏幕邊緣存在豎線吟税，還是設(shè)置collectionView寬度為屏幕寬度 + 0.5.
PS: 有同事建議寬或高度小于1單位的控件均在視圖的layer層上添加凹耙，常見于tableView和collectionView
