iOS流布局UICollectionView使用FlowLayout进行更灵活布局
一、引言
前面的博客介绍了UICollectionView的相关方法和其协议中的方法,但对布局的管理类UICollectionViewFlowLayout没有着重探讨,这篇博客介绍关于布局的相关设置和属性方法。
UICollectionView的简单使用:http://my.oschina.net/u/2340880/blog/522613
UICollectionView相关协议方法:http://my.oschina.net/u/2340880/blog/522613
通过layout的设置,我们可以编写更加灵活的布局效果。
二、将九宫格式的布局进行升级
在第一篇博客中,通过UICollectionView,我们很轻松的完成了一个九宫格的布局,但是如此中规中矩的布局方式,有时候并不能满足我们的需求,有时我们需要每一个Item展示不同的大小,代码如下:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
UICollectionView *collect = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, 320, 400) collectionViewLayout:layout];
collect.delegate=self;
collect.dataSource=self;
[collect registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];
;
[self.view addSubview:collect];
}
//设置每个item的大小,双数的为50*50 单数的为100*100
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
if (indexPath.row%2==0) {
return CGSizeMake(50, 50);
}else{
return CGSizeMake(100, 100);
}
}
//代理相应方法
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 100;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
return cell;
}
效果如下:
现在的布局效果是不是炫酷了许多。
三、UICollectionViewFlowLayout相关属性方法
UICollectionViewFlowLayout是系统提供给我们一个封装好的流布局设置类,其中有一些布局属性我们可以进行设置:
设置行与行之间的间距最小距离
@property (nonatomic) CGFloat minimumLineSpacing;
设置列与列之间的间距最小距离
@property (nonatomic) CGFloat minimumInteritemSpacing;
设置每个item的大小
@property (nonatomic) CGSize itemSize;
设置每个Item的估计大小,一般不需要设置
@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;
这个属性可以设置分区的偏移量,例如我们在刚才的例子中添加如下设置:
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
效果如下,会看到分区的边界闪出了20像素
下面这两个方法设置分区的头视图和尾视图是否始终固定在屏幕上边和下边
@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的布局中,如果每个item的大小都一样那么是十分简单的事情,但是,如果我们想要的每个item大小不一样呢,这个时候,就要对UICollectionViewFlowLa ...
- iOS流布局UICollectionView系列七——三维中的球型布局
摘要: 类似标签云的球状布局,也类似与魔方的3D布局 iOS流布局UICollectionView系列七——三维中的球型布局 一.引言 通过6篇的博客,从平面上最简单的规则摆放的布局,到不规则的瀑 ...
- iOS 流布局 UICollectionView使用(简单使用)
简介 UICollectionView是iOS6之后引入的一个新的UI控件,它和UITableView有着诸多的相似之处,其中许多代理方法都十分类似.简单来说,UICollectionView是比UI ...
- iOS 流布局 UICollectionView使用(UICollectionVIew的代理方法)
UICollectionViewDataSource协议 这个协议主要用于collectionView相关数据的处理,包含方法如下: 设置分区数(这个是可选实现的) - (NSInteger)numb ...
- 【iOS】UICollectionView自己定义Layout之蜂窝布局
网上的UICollectionView的Layout布局,其cell的形状多为矩形和圆形. 本篇博文将正六边形作为cell的基本形状,为您展现独特的蜂窝布局效果及实现源代码. 帮助您让自己的App脱颖 ...
- iOS之UICollectionView详解
UICollectionView是一种类似于UITableView但又比UITableView功能更强大.更灵活的视图,这是源于它将UICollectionView对cell的布局交给了UIColle ...
- iOS 之 UICollectionView
1. iOS 之 UICollectionView 之 原理介绍 2. iOS 之 UICollectionView 之 开发步骤 之 OC 3. iOS 之 UICollectionView 之 开 ...
- iOS中 UICollectionView UI_19
UICollectionView 是UITableView加强版 UITableView 和UICollectionView的设计思想: 1.布局: UITableView 的布局可以由UITable ...
- 编写高质量代码改善C#程序的157个建议——建议56:使用继承ISerializable接口更灵活地控制序列化过程
建议56:使用继承ISerializable接口更灵活地控制序列化过程 接口ISerializable的意义在于,如果特性Serializable,以及与其像配套的OnDeserializedAttr ...
随机推荐
- WPF Navigation导航
WPF导航这个话题,网上的解决方法有很多种,有点吃猪脚的感觉,弃之可惜,食之乏味. 不过还是简单聊聊吧. 常见的导航: 利用HyperLink导航,可以到某一个Page页面,也可以是外部链接,当然也可 ...
- 新年之际,盘点一些APP开发技巧
(原文:Reader Submissions - New Year's 2015 作者:Mattt Thompson 译者:培子 校对:蓝魂) 回顾过去一年发生在我们身边的事情时,有一点不得不提:对苹 ...
- MyEclips:Struts 2 + Hibernate 4 + SQL Server2008
步骤一:准备 1.下载 sqlJDBC.jar的下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=21599 Hibernate ...
- RPC通信编程
使用 RPC 编程是在客户机和服务器实体之间进行可靠通信的最强大.最高效的方法之一.它为在分布式计算环境中运行的几乎所有应用程序提供基础. RPC 是什么? RPC 的全称是 Remote Proce ...
- initWithCoder: 与initWithFrame:
之前一直用代码来编写画面,现在着手使用storyboard和xib来构筑画面,遇到initWithCoder方法, 故查了下,initWithCoder方法的调用,看了篇博客,链接如下: http:/ ...
- Codeforces Round #204 (Div. 2): B
很简单的一个题: 只需要将他们排一下序,然后判断一下就可以了! 代码: #include<cstdio> #include<algorithm> #define maxn 10 ...
- nodejs注册为windows服务
http://blog.csdn.net/puncha/article/details/9047311 http://www.oschina.net/question/12_18694 http:// ...
- codeforces D. Count Good Substrings
http://codeforces.com/contest/451/problem/D 题意:给你一个字符串,然后找出奇数和偶数长度的子串的个数,这些字串符合,通过一些连续相同的字符合并后是回文串. ...
- Ubuntu 12安装Virtualbox
用aptitude或者apt-get安装Virtualbox,安装过程中会报:”No suitable module for running kernel found [fail]“,安装未成功. 在 ...
- Javascript函数中传递带空格的参数
通常在页面中要让某些内容点击后产 生点击事件(非页面跳转)都会使用onclick,但是这样不适于需要传递参数的情况,于是写成直接调用Javascript函数的方式:<a href=javascr ...