UICollectionViewFlowLayout
是苹果为我们实现的一个布局,它有两个属性可以设置cell之间的间距:minimumLineSpacing 设置最小行间距,minimumInteritemSpacing 设置同一列中间隔的cell最小间距。
为什么是最小,而不是固定的间距呢?因为 FlowLayout 的实现是两端对齐,同时保持一列中的cell间距相等。
像这样的:
可以看到,一列中的cell总是两端和collectionView对齐,cell之间的间隔一致。
需求
那么现在有一个需求就是,不想要两端对齐,而是左对齐。cell根据间距和size,从左往右一个个的排,排不下了换一行。
像这样的:
这里引入一个 maximumInteritemSpacing 的属性。这个属性和 minimumInteritemSpacing 类似,用来设置两个同一列的相邻的cell之间的最大间距。
相邻的cell之间的实际间距 spacing 总是要满足:
minimumInteritemSpacing <= spacing <= maximumInteritemSpacing
实现
1:创建一个 UICollectionViewFlowLayout 子类 CustomFlowLayout
@interface CustomFlowLayout : UICollectionViewFlowLayout
@property (nonatomic) CGFloat maximumInteritemSpacing;
@end
2:在CustomerFlowLayout的实现里,由于系统已经帮我们做了全部的计算的事情。所以我们只需要重写 -layoutAttributesForElementsInRect: 这个方法即可。并不需要重写其他方法。
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
//使用系统帮我们计算好的结果。
NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
//第0个cell没有上一个cell,所以从1开始
for(int i = 1; i < [attributes count]; ++i) {
//这里 UICollectionViewLayoutAttributes 的排列总是按照 indexPath的顺序来的。
UICollectionViewLayoutAttributes *curAttr = attributes[i];
UICollectionViewLayoutAttributes *preAttr = attributes[i-1];
NSInteger origin = CGRectGetMaxX(preAttr.frame);
//根据 maximumInteritemSpacing 计算出的新的 x 位置
CGFloat targetX = origin + _ maximumInteritemSpacing;
// 只有系统计算的间距大于 maximumInteritemSpacing 时才进行调整
if (CGRectGetMinX(curAttr.frame) > targetX) {
// 换行时不用调整
if (targetX + CGRectGetWidth(curAttr.frame) < self.collectionViewContentSize.width) {
CGRect frame = curAttr.frame;
frame.origin.x = targetX;
curAttr.frame = frame;
}
}
}
return attributes;
}
当然,maximumInteritemSpacing 应该有一个默认值:
- (void)awakeFromNib
{
[super awakeFromNib];
self. maximumInteritemSpacing = 8.f;
}
使用方法
CustomFlowLayout 可以在xib和storyboard中使用。你往控制器里拖进去一个UICollectionView时会自动携带一个 UICollectionViewFlowLayout,修改它的类名为 CustomerFlowLayout 即可。