一、引言

前面的博客介绍了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进行更灵活布局的更多相关文章

  1. iOS 流布局 UICollectionView使用(使用FlowLayout进行更灵活布局)

    在UICollectionView的布局中,如果每个item的大小都一样那么是十分简单的事情,但是,如果我们想要的每个item大小不一样呢,这个时候,就要对UICollectionViewFlowLa ...

  2. iOS流布局UICollectionView系列七——三维中的球型布局

      摘要: 类似标签云的球状布局,也类似与魔方的3D布局 iOS流布局UICollectionView系列七——三维中的球型布局 一.引言 通过6篇的博客,从平面上最简单的规则摆放的布局,到不规则的瀑 ...

  3. iOS 流布局 UICollectionView使用(简单使用)

    简介 UICollectionView是iOS6之后引入的一个新的UI控件,它和UITableView有着诸多的相似之处,其中许多代理方法都十分类似.简单来说,UICollectionView是比UI ...

  4. iOS 流布局 UICollectionView使用(UICollectionVIew的代理方法)

    UICollectionViewDataSource协议 这个协议主要用于collectionView相关数据的处理,包含方法如下: 设置分区数(这个是可选实现的) - (NSInteger)numb ...

  5. 【iOS】UICollectionView自己定义Layout之蜂窝布局

    网上的UICollectionView的Layout布局,其cell的形状多为矩形和圆形. 本篇博文将正六边形作为cell的基本形状,为您展现独特的蜂窝布局效果及实现源代码. 帮助您让自己的App脱颖 ...

  6. iOS之UICollectionView详解

    UICollectionView是一种类似于UITableView但又比UITableView功能更强大.更灵活的视图,这是源于它将UICollectionView对cell的布局交给了UIColle ...

  7. iOS 之 UICollectionView

    1. iOS 之 UICollectionView 之 原理介绍 2. iOS 之 UICollectionView 之 开发步骤 之 OC 3. iOS 之 UICollectionView 之 开 ...

  8. iOS中 UICollectionView UI_19

    UICollectionView 是UITableView加强版 UITableView 和UICollectionView的设计思想: 1.布局: UITableView 的布局可以由UITable ...

  9. 编写高质量代码改善C#程序的157个建议——建议56:使用继承ISerializable接口更灵活地控制序列化过程

    建议56:使用继承ISerializable接口更灵活地控制序列化过程 接口ISerializable的意义在于,如果特性Serializable,以及与其像配套的OnDeserializedAttr ...

随机推荐

  1. WebApi(二)-重新封装返回结果

    先创建要返回的结果类型: /// <summary> /// 返回类型 /// </summary> public class ApiResultModel { private ...

  2. 将小度WiFi改造为无线网卡(小度WiFi能够接收WiFi信号)

    安装官方的小度WiFi的驱动器,只能让它当做无线信号的发射装置,但是我想通过小度WiFi让我的台式电脑能都接收无线信号,于是经过一番折腾终于成功了.我的是win7. 小度WiFi无法接受无线信号,不能 ...

  3. JAVA NIO 结合多线程

    NIO 的选择器采用了多路复用(Multiplexing)技术,可在一个选择器上处理多个套接字, 通过获取读写通道来进行 IO 操作.由于网络带宽等原因,在通道的读.写操作中是容易出现等待的, 所以在 ...

  4. 我的PHP之旅--XML操作

    XML操作 XML主要是做数据存储和WEB服务的,所以我们难免要操作它,这里只介绍PHP的simpleXML方式. 我们要操作的XML: <?xml version="1.0" ...

  5. [译]36 Days of Web Testing(三)

    Day 14: Automate the tedious Why ? 有些时候,web测试还是蛮单调乏味的,在开始测试前,你可能要必须跳转到一个特定的表单页面,或则为了得到一个特定的页面(或配置),你 ...

  6. SSL交互和握手过程

    SSL消息按如下顺序发送:  1.Client Hello  客户发送服务器信息,包括它所支持的密码组.密码组中有密码算法和钥匙大小: 2.Server Hello  服务器选择客户和服务器都支持的密 ...

  7. Delphi 类成员的默认访问权限(用RTTI检测)

    类的成员,如果没有private.public等显示什么,直接在class下面,没有写访问权限的限定符,这种成员是不是默认的访问权限啊?还是publish的访问权限啊? --------------- ...

  8. iPhone之Quartz 2D系列--图形上下文(2)(Graphics Contexts)

    以下几遍关于Quartz 2D博文都是转载自:http://www.cocoachina.com/bbs/u.php?action=topic&uid=38018 iPhone之Quartz ...

  9. jQuery.extend方法和开发中变量的复用

    最近在用commonJS规范进行客户端开发,遇到如下问题: 一般一个模块内部可能会定义一系列变量或一系列相关变量,比如写了一个颜色选择弹框模块大概会有如下变量定义 var settings = { / ...

  10. eclipse报错 com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 转

    今天eclipse突然报了com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 错误,并且工程文件打不开了,在网上找了一下资料,然后按照方法操作了一遍,好了 ...