iOS 流布局 UICollectionView使用(使用FlowLayout进行更灵活布局)
在UICollectionView的布局中,如果每个item的大小都一样那么是十分简单的事情,但是,如果我们想要的每个item大小不一样呢,这个时候,就要对UICollectionViewFlowLayout进行设置了。
比如 我们做一个大小不一样的九宫格
- (void)viewDidLoad {
[super viewDidLoad];
//创建一个Layout布局
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
//设置布局方向为垂直流布局
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
//创建collectionView 通过一个布局策略layout来创建
UICollectionView * collect = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:layout];
//代理设置
collect.delegate=self;
collect.dataSource=self;
//注册item类型 这里使用系统的类型
[collect registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];
[self.view addSubview:collect];
}
//设置分区数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return ;
}
//返回每个分区的item个数
- (NSInteger) collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return ;
}
//这是正确的方法
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:arc4random()%/255.0 green:arc4random()%/255.0 blue:arc4random()%/255.0 alpha:];
return cell;
}
//在代理方法中设置item的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
if (indexPath.row%==) {
return CGSizeMake(, );
}else{
return CGSizeMake(, );
}
}
效果

UICollectionViewFlowLayout相关属性方法
UICollectionViewFlowLayout是系统提供给我们一个封装好的流布局设置类,其中有一些布局属性我们可以进行设置:
设置行与行之间最小距离
@property (nonatomic) CGFloat minimumLineSpacing;
设置列与列之间的最小距离
@property (nonatomic) CGFloat minimumInteritemSpacing;
设置每个item的大小
@property (nonatomic) CGSize itemSize;
设置每个item的估计大小(与TableView 自适应大小的时候设置的预估高度相似)
@property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0);
设置布局方向
@property (nonatomic) UICollectionViewScrollDirection scrollDirection;
这个UICollectionViewScrollDirection的枚举如下
typedef NS_ENUM(NSInteger, UICollectionViewScrollDirection) {
UICollectionViewScrollDirectionVertical,//水平布局
UICollectionViewScrollDirectionHorizontal//垂直布局
};
设置头视图尺寸的大小
@property (nonatomic) CGSize headerReferenceSize;
设置尾视图尺寸的大小
@property (nonatomic) CGSize footerReferenceSize;
设置分区的EdgeInset
@property (nonatomic) UIEdgeInsets sectionInset;
设置头视图和尾视图是否是种固定在屏幕的上边或者下边
@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0); @property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
动态的配置layout的相关属性UICollectionViewDelegateFlowLayout
上面的方法在创建FlowLayout时静态的进行设置,如果我们需要动态的设置这些属性,就像我们例子中的,每个item的大小会有差异,我们可以通过代理来实现。
UICollectionViewDelegateFlowLayout是UICollectionViewDelegate的子协议,其中常用方法如下,我们只需要实现我们需要的即可:
动态设置每个item的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
动态设置每个分区的EdgeInsets
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
动态设置每行的间距大小
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
动态设置每列的间距大小
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
动态设置分区头视图的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
动态设置某个分区尾视图大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;
iOS 流布局 UICollectionView使用(使用FlowLayout进行更灵活布局)的更多相关文章
- iOS流布局UICollectionView使用FlowLayout进行更灵活布局
一.引言 前面的博客介绍了UICollectionView的相关方法和其协议中的方法,但对布局的管理类UICollectionViewFlowLayout没有着重探讨,这篇博客介绍关于布局的相关设置和 ...
- iOS流布局UICollectionView系列七——三维中的球型布局
摘要: 类似标签云的球状布局,也类似与魔方的3D布局 iOS流布局UICollectionView系列七——三维中的球型布局 一.引言 通过6篇的博客,从平面上最简单的规则摆放的布局,到不规则的瀑 ...
- iOS 流布局 UICollectionView使用(简单使用)
简介 UICollectionView是iOS6之后引入的一个新的UI控件,它和UITableView有着诸多的相似之处,其中许多代理方法都十分类似.简单来说,UICollectionView是比UI ...
- iOS 流布局 UICollectionView使用(UICollectionVIew的代理方法)
UICollectionViewDataSource协议 这个协议主要用于collectionView相关数据的处理,包含方法如下: 设置分区数(这个是可选实现的) - (NSInteger)numb ...
- 实现iOS图片等资源文件的热更新化(三):动态的资源文件夹
简介 此文,将尝试动态从某个不确定的文件夹中加载资源文件.文章,会继续完善自定义的 imageNamed 函数,并为下一篇文章铺垫. 这么做的意义 正如我们经常所说的那样,大多数情景知道做事的意义往往 ...
- iOS之UICollectionView详解
UICollectionView是一种类似于UITableView但又比UITableView功能更强大.更灵活的视图,这是源于它将UICollectionView对cell的布局交给了UIColle ...
- 实现iOS图片等资源文件的热更新化(五): 一个简单完整的资源热更新页面
简介 一个简单的关于页面,有一个图片,版本号,App名称等,着重演示各个系列的文章完整集成示例. 动机与意义 这是系列文章的最后一篇.今天抽空写下,收下尾.文章本身会在第四篇的基础上,简单扩充下代码, ...
- 实现iOS图片等资源文件的热更新化(零): 序
必要的序 以后在写系列文章,准备把基本的规划和动机等,单独作为一个小的序言部分给独立出来.序言部分,可以较为完整地交待系列文章的写作动机,所展示的编码技术可能的应用场景等.个人,我还是比较看重文章或者 ...
- iOS 之 UICollectionView
1. iOS 之 UICollectionView 之 原理介绍 2. iOS 之 UICollectionView 之 开发步骤 之 OC 3. iOS 之 UICollectionView 之 开 ...
随机推荐
- 转:浅析Collections.sort
浅析Collections.sort 问题引入 在之前的一次Java上机实习中,老师布置了一道很简单的题: 从控制台输入10个整数,对它们进行升序排序并输出. 考虑到只有10个数,需要比较的次 ...
- 记录一次(xheditor-1.1.6-zh-cn.min.js)的错误:Cannot read property 'match' of undefined的问题解决
由于使用了xheditor富文本框,且这个版本是2011年开发的系统,当时只有IE8,所以一切正常. 但是问题来了,今天使用IE11测试和谷歌浏览器测试,发现一直报这个错误: 且google了一下,没 ...
- C++并发实战 与多线程
http://blog.csdn.net/column/details/ccia.html
- 基于WPF系统框架设计(9)-多值绑定之IMultiValueConverter
应用场景 我想把View层的一个布局控件和功能按钮传到ViewModel层,达到动态变更布局,同时灵活获取功能按钮的属性,让View和ViewModel完全分离,而不受View层影响. 最后我想到使用 ...
- Android 分享透明图片到微信变黑的问题
/** * bitmap中的透明色用白色替换 * * @param bitmap * @return */ public static Bitmap changeColor(Bitmap bitmap ...
- 双网卡环境导致Oracle连接异常
现在就是流行向最高水平看齐,这次项目的部署,好好的SQL Server扔了(有正版授权的企业版,神啊...),逢人就夸:“俺们那上的可是最顶级的Oracle Database System!”.看了看 ...
- Android 两种注册、发送广播的区别
前言:前面文章记录了Service的使用,这次来记录另一个四个组件之一的BroadcastReceiver.主要介绍两种发送和注册广播的区别. BroadcastReceiver广播接收者用于接收系统 ...
- Flutter接入极光推送
(1)搜索 https://pub.dartlang.org/packages/jpush_flutter ,安装插件,并且按照官方配置 /android/app/build.gradle andro ...
- ADO.NET访问Access(文本数据库)数据操作(CRUD)
1,ADO.NET访问Access(文本数据库)数据操作(CRUD) 2,DatabaseDesign 文本数据库Northwind.mdb 3,/App_Code 3.1,/App_Code/DBC ...
- Java内存区域与模拟内存区域异常
我把Java的内存区域画了一张思维导图,以及各区域的主要功能. 模拟Java堆溢出 Java堆用于存储对象实例.仅仅要不断地创建对象而且保证GC ROOTS到对象之间有可达路径避免被回收机制清除.就能 ...