为UICollectionViewFlowLayout添加maximumInteritemSpacing

2024-09-06 12:08

本文主要是介绍为UICollectionViewFlowLayout添加maximumInteritemSpacing,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

UICollectionViewFlowLayout

是苹果为我们实现的一个布局,它有两个属性可以设置cell之间的间距:minimumLineSpacing 设置最小行间距,minimumInteritemSpacing 设置同一列中间隔的cell最小间距。
为什么是最小,而不是固定的间距呢?因为 FlowLayout 的实现是两端对齐,同时保持一列中的cell间距相等。
像这样的:


142014942.png


可以看到,一列中的cell总是两端和collectionView对齐,cell之间的间隔一致。

需求

那么现在有一个需求就是,不想要两端对齐,而是左对齐。cell根据间距和size,从左往右一个个的排,排不下了换一行。
像这样的:


屏幕快照 2016-01-05 上午11.03.46.png

这里引入一个 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 即可。


屏幕快照 2016-01-05 上午11.31.36.png
效果图

这篇关于为UICollectionViewFlowLayout添加maximumInteritemSpacing的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1141959

相关文章

UICollectionView 的研究之二 :自定义 UICollectionViewFlowLayout

UICollectionView 实现各式复杂布局核心在于 UICollectionViewLayout,需要我们去自定义实现。 通过各种layout 的自定义实现,以及它们之间的切换。可以实现一些酷炫的布局,例如 (图片选自:http://www.cnblogs.com/markstray/p/5822262.html) Cover Flow 布局 堆叠布局 圆形布局

UICollectionView -- 实现瀑布流( 注:先使用UICollectionViewFlowLayout对每一项进行设置)

UICollectionView 集合视图 实现瀑布流。 1:遵从三个协议: UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout 2:设置每一项的布局(layout)  //每一项的布局     UICollectionViewFlowLayo

UICollectionView详解二:UICollectionViewFlowLayout

本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。 UICollectionViewFlowLayout是一个具体的layout对象,用来把item布局在网格中,并且可选页眉和页脚。在collection view中的items,可以从一行或者一列flow至下一行或者下一列(行或者列取决于滚动的方向)。每行都会根据情况,包含尽可能多的Cells