UICollectionView其实在开发中是比较常用，说简单也简单，网上的各种UICollectionView的博客一看，基本上就入门了，但是如果做项目经常会有种UICollectionView怎么这么坑的感觉，前面写过一篇关于UICollectionView自适应的博客UITableView和UICollecionView自适应，有兴趣的可以看一下,本文主要是UICollectionView的单元格是宽高相同设置最大间距和可变单元格的间距设置:
宽高相同设置最大间距
FlyElephant.png
初始化数据:
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.itemSize = CGSizeMake(100, 40);
layout.minimumInteritemSpacing=0;
layout.sectionInset=UIEdgeInsetsMake(0, 0, 0, 0);
[self.collectionView registerClass:[BookCollectionViewCell class] forCellWithReuseIdentifier:CollectionViewIdentifier];
self.collectionView.backgroundColor = [UIColor redColor];
self.collectionView.collectionViewLayout = layout;
self.data = [NSMutableArray array];
[self.data addObject:@"北京"];
[self.data addObject:@"FlyElephant"];
[self.data addObject:@"编程"];
[self.data addObject:@"加班"];
[self.data addObject:@"Objective-C"];
[self.data addObject:@"iOS"];
[self.data addObject:@"UICollectioView自适应"];
}
UICollectionViewDataSource:
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return [self.data count];
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
BookCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CollectionViewIdentifier forIndexPath:indexPath];
cell.contentLabel.text = self.data[indexPath.row];
return cell;
}
上面是一个最普通的UICollectionView的布局，我们已经设置最小间距是0和边距，事实上间距是iOS帮我们计算出来布局的，如果我们想设置相邻的单元为我们想要的间距就需要设置最大间距，效果如下:
FlyElephant.png
这时候需要自定义UICollectionViewFlowLayout，重写layoutAttributesForElementsInRect方法:
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
NSMutableArray *attributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];
//注意起始值
for(NSInteger i = 1; i < [attributes count]; i++){
UICollectionViewLayoutAttributes *currentLayoutAttributes = attributes[i];
UICollectionViewLayoutAttributes *prevLayoutAttributes = attributes[i - 1];
NSInteger origin = CGRectGetMaxX(prevLayoutAttributes.frame);
if(origin + ITEM_SPACING + currentLayoutAttributes.frame.size.width < self.collectionViewContentSize.width){
CGRect frame = currentLayoutAttributes.frame;
frame.origin.x = origin + ITEM_SPACING;
currentLayoutAttributes.frame = frame;
}
}
return attributes;
}
可变单元格设置最大间距
FlyElephant.png
这里主要设置了预估大小，如果不太清楚，可以参考开头的文章链接，参考代码:
FECollectionViewFlowLayout *layout = [[FECollectionViewFlowLayout alloc] init];
layout.estimatedItemSize = CGSizeMake(100, 40);
layout.minimumInteritemSpacing=0;
layout.sectionInset=UIEdgeInsetsMake(0, 0, 0, 0);
[self.collectionView registerClass:[BookCollectionViewCell class] forCellWithReuseIdentifier:CollectionViewIdentifier];
self.collectionView.backgroundColor = [UIColor redColor];
self.collectionView.collectionViewLayout = layout;
self.data = [NSMutableArray array];
[self.data addObject:@"北京"];
[self.data addObject:@"FlyElephant"];
[self.data addObject:@"编程"];
[self.data addObject:@"加班"];
[self.data addObject:@"Objective-C"];
[self.data addObject:@"iOS"];
[self.data addObject:@"UICollectioView自适应"];
这里面有个坑就是如果按照上面的方式去设置最大间距，你会发现是没有任何效果的，这个坑才进去花了两个小时爬出来，解决方案很简单，自定义FECollectionViewFlowLayout重写layoutAttributesForItemAtIndexPath方法:
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewLayoutAttributes *layoutAttribute = [super layoutAttributesForItemAtIndexPath:indexPath];
if (layoutAttribute.frame.origin.x == self.sectionInset.left) {
return layoutAttribute;
}
NSIndexPath *previousIndexPath = [NSIndexPath indexPathForRow:indexPath.row-1 inSection:indexPath.section];
UICollectionViewLayoutAttributes *previousLayoutAttribute = [self layoutAttributesForItemAtIndexPath:previousIndexPath];
CGRect frame = layoutAttribute.frame;
frame.origin.x = CGRectGetMaxX(previousLayoutAttribute.frame)+0;
layoutAttribute.frame = frame;
return layoutAttribute;
}
代码地址：
GitHub:FlyElephant的GitHub，
