文档章节

iOS流布局UICollectionView系列三——使用FlowLayout进行更灵活布局

珲少
 珲少
发布于 2015/10/27 17:14
字数 971
阅读 11075
收藏 28

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;

专注技术,热爱生活,交流技术,也做朋友。

——珲少 QQ群:203317592

© 著作权归作者所有

珲少

珲少

粉丝 886
博文 394
码字总数 475753
作品 0
上海
程序员
私信 提问
加载中

评论(2)

一叶蔽目
博主你好,请问要在这个基础上 增加cell的飞入动画 应该怎么实现?
ibeforeold
ibeforeold
感谢博主 ~3
iOS流布局UICollectionView系列四——自定义FlowLayout进行瀑布流布局

iOS流布局UICollectionView系列四——自定义FlowLayout进行瀑布流布局 一、引言 前几篇博客从UICollectionView的基础应用到设置UICollectionViewFlowLayout更加灵活的进行布局,但都限制在系...

珲少
2015/10/27
13.9K
5
iOS流布局UICollectionView系列七——三维中的球型布局

iOS流布局UICollectionView系列七——三维中的球型布局 一、引言 通过6篇的博客,从平面上最简单的规则摆放的布局,到不规则的瀑布流布局,再到平面中的圆环布局,我们突破了线性布局的局限,...

珲少
2015/10/29
3K
5
iOS流布局UICollectionView系列五——圆环布局的实现

iOS流布局UICollectionView系列五——圆环布局的实现 一、引言 前边的几篇博客,我们了解了UICollectionView的基本用法以及一些扩展,在不定高的瀑布流布局中,我们发现,可以通过设置具体的...

珲少
2015/10/28
4.9K
5
iOS流布局UICollectionView系列二——UICollectionView的代理方法

iOS流布局UICollectionView系列二——UICollectionView的代理方法 一、引言 在上一篇博客中,介绍了最基本的UICollectionView的使用和其中我们常用的属性和方法,也介绍了瀑布流布局的过程与...

珲少
2015/10/27
8.2K
3
iOS流布局UICollectionView系列一——初识与简单使用UICollectionView

iOS流布局UICollectionView系列一——初识与简单使用UICollectionView 一、简介 UICollectionView是iOS6之后引入的一个新的UI控件,它和UITableView有着诸多的相似之处,其中许多代理方法都十...

珲少
2015/10/27
36.9K
5

没有更多内容

加载失败,请刷新页面

加载更多

字节序转换详解

在跨平台和网络编程中我们经常会提到网络字节序和主机字节序,如果没有正确对两者进行转换,从而导致两方产生了不同的解释,就会出现意想不到的bug。 目录 0x01 概念 0x02 分类 0x03 两种字节...

无心的梦呓
34分钟前
4
0
干货 | AI人脸识别之人脸搜索

本文档将利用京东云AI SDK来实践人脸识别中的人脸搜索功能,主要涉及到分组创建/删除、分组列表获取、人脸创建/删除、人脸搜索,本次实操的最终效果是:创建一个人脸库,拿一张图片在人脸库中...

京东云技术新知
38分钟前
4
0
【swiper】 滑块组件说明

本文转载于:专业的前端网站➣【swiper】 滑块组件说明 swiper 滑块视图容器,其原型如下: 1 <swiper 2 indicator-dots="[Boolean]" 3 indicator-color="[Color]" 4 indicator-act......

前端老手
49分钟前
4
0
堆排序算法

《Java算法总纲目录》 1、定义 由下图(网上找的),堆排序类似这种,把最大的数字放到最下面的最右面位置,然后把第二大的数字放到最下层的最右面倒数第二个位置,依此类推,如下: 2、代码...

木九天
51分钟前
5
0
框架和库的区别

框架和库的区别 框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。 node 中的 express; 库(插件):提供某一个小功能,对项目的侵入性较小...

庭前云落
55分钟前
5
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部