UICollectionView的使用详解

UICollectionViewFlowLayout
使用UICollectionViewFlowLayout之前,我们来了解它内部常用的属性:

//同一组当中,垂直方向:行与行之间的间距;水平方向:列与列之间的间距
@property (nonatomic) CGFloat minimumLineSpacing;
//垂直方向:同一行中的cell之间的间距;水平方向:同一列中,cell与cell之间的间距
@property (nonatomic) CGFloat minimumInteritemSpacing;
//每个cell统一尺寸
@property (nonatomic) CGSize itemSize;
//滑动反向,默认滑动方向是垂直方向滑动
@property (nonatomic) UICollectionViewScrollDirection scrollDirection;
//每一组头视图的尺寸。如果是垂直方向滑动,则只有高起作用;如果是水平方向滑动,则只有宽起作用。
@property (nonatomic) CGSize headerReferenceSize;
//每一组尾部视图的尺寸。如果是垂直方向滑动,则只有高起作用;如果是水平方向滑动,则只有宽起作用。
@property (nonatomic) CGSize footerReferenceSize;
//每一组的内容缩进
@property (nonatomic) UIEdgeInsets sectionInset;

第一点:

UICollectionViewFlowLayout在纵向滑动与横向滑动时,布局是不太一样的。

滑动布局.png

由上图就可以看出来,UICollectionViewFlowLayout在布局时,会根据scrollDirection的值不同而产生不同的布局。

  • 垂直方向滑动:

Cell布局:UICollectionView的内容宽度与本身视图的宽度相等,并且是固定的。会根据sectionInset左右缩进、itemSize的宽度、minimumInteritemSpacing三个值来计算每一行cell数量。

  • 水平方向滑动:
设置布局的滑动方向:为水平方向的滑动

[layout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

纵向滑动布局示意图.png

图中:例如{0,5}

数组中0代表section, 5代表section中item的编号。

可以明显的看出,item的排序方式是按照列的形式,一列一列排列的,第一列排满之后,从第二列开始继续排列
设置布局的滑动方向:为垂直方向的滑动

[layout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

滚动方向为垂直方向.png
可以明显的看出,item 的排列方式是按照行的形式进行排列的。
第一行排满之后,第二行接着开始排列

另外可以参考如下文章:
http://www.jianshu.com/p/0d1e2e067f6c
iOS控件-UICollectionView基本使用详解(OC)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容