UIConllectionView和UITableView类似,也是展示数据,但不同于UITableView那种规则的布局,UICollectionView可以实现不规则的布局,即瀑布流。

创建UICollectionView

UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[[UIScreen mainScreen] bounds] collectionViewLayout:layout];

集合视图的创建,必须要指定布局,如果没有布局,显示不了任何东西,即layout。

 //创建一个布局对象,采用系统布局类UICollectinviewFlowLayout
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

因为是系统的布局类,所以也是规则的,但可以自定义FlowLayout的,可以根据自己的需求,来创建不规则的网格。

可以对各个的布局细节分别进行设置

//设置最小的行间距
layout.minimumLineSpacing = ;
//设置item与item之间的间距
layout.minimumInteritemSpacing = ; //集合视图的分区间隔 //四个值 上左下右
layout.sectionInset = UIEdgeInsetsMake(, , , ); //设置集合视图的滑动方向
layout.scrollDirection = UICollectionViewScrollDirectionVertical;// 向下
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal; // 向右
CGFloat totalWidth = self.view.frame.size.width;
//设置每一个item的尺寸大小
// layout.itemSize = CGSizeMake((totalWidth - 40) / 3, 80);

当然,签订协议之后也可以通过方法进行设置

说到协议 ,协议 分为两个部分,数据源协议UICollectionViewDelegateSource和代理协议UICollectionViewDelegate

因为涉及到布局,也会签订的布局协议UICollectionViewDelegateFlowLayout

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake((kWidth - ) / , );
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(, , , );
} - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
return ;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
return ;
}

UICollectionViewDataSource和UITableView一样,也有两个必须要实现的方法

//显示个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return ;
}
//每个cell显示的内容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuse" forIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor colorWithRed:kColor green:kColor blue:kColor alpha:1.0];
cell.numberLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
return cell;
}

我这边cell的显示内容是显示一个Label。自定义cell,来设置label的格式。

同UITableView一样,每个item都可以点击,触发 方法

//item点击之后触发的方法
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"分区数%ld, 行数%ld",indexPath.section, indexPath.row);
}

值得注意的是,集合视图不像表视图那样,集合视图,如果想显示内容,就必须注册cell

//集合视图如果想要显示内容,就必须将cell进行注册
[collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"reuse"];

注意:

集合视图的不规则布局在日常使用还是比较频繁的,因为每个空间布局都不一定会是规则,也会有差别,通过自定义FlowLayout..来显示不同的布局

UICollectionView布局功能的更多相关文章

  1. iOS 8自动调整UITableView和UICollectionView布局

    本文转载自:http://tech.techweb.com.cn/thread-635784-1-1.html 本文讲述了UITableView.UICollectionView实现 self-siz ...

  2. [转]iOS8 自动调整UITableView和UICollectionView布局

    转自:http://www.cocoachina.com/industry/20140825/9450.html (via:玉令天下的Blog)   本文讲述了UITableView.UICollec ...

  3. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

  4. ABBYY FineReader 15新增编辑页面布局功能

    ABBYY FineReader 15(Windows系统) 新增编辑页面布局功能,允许用户修改PDF数字文档的页面布局,包括添加或者删除文字段落,文字块以及图片,更改段落,文字块,图片位置.添加或者 ...

  5. UICollectionView布局cell的三种方式

    UICollectionViewFlowLayout里面: // 方法一 - (void)prepareLayout{} // 方法二 - (nullable NSArray<__kindof ...

  6. iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流

    上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewControlle ...

  7. iOS下的界面布局利器-MyLayout布局框架

      Swift:TangramKit: https://github.com/youngsoft/TangramKit OC:MyLayout: https://github.com/youngsof ...

  8. iOS UICollectionView(转三)

    上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewControlle ...

  9. iOS电商常见动画与布局、微信悬浮窗、音乐播放器、歌词解析、拖动视图等源码

    iOS精选源码 MXScroll 介绍 混合使用UIScrollView ios 电商demo(实现各种常见动画效果和页面布局) 一行代码集成微信悬浮窗 可拖动,大小的视图,可放置在屏幕边缘. 在使用 ...

随机推荐

  1. 寻找研究基于NS2研究覆盖网络的小伙伴:)

    如题,本人菜鸟刚刚入门,想找些基于NS2研究覆盖网络方面的小伙伴,具体点是关于覆盖网络中QoS服务调度方法方面的,有的小伙伴可以留下联系方式,或者加我QQ:245939069  :P:P:P

  2. filter_input() 函数

    定义和用法 filter_input() 函数从脚本外部获取输入,并进行过滤. 本函数用于对来自非安全来源的变量进行验证,比如用户的输入. 本函数可从各种来源获取输入: INPUT_GET INPUT ...

  3. asp.net 页面的Meta元素

    <meta charset="utf-8" />    <meta name="viewport" content="initial ...

  4. 2015GitWebRTC编译实录11

    2015.07.21 ilbc 编译通过注意有几个win32打头的文件,其实都是要编进去的[429/1600 ] CC obj ilbc.abs_quant.o[430/1600 ] CXX obj ...

  5. bootstrap-7

    基础表单: 表单中常见的元素主要有:文本输入框.下拉选择框.单选按钮.复选按钮.文本框和按钮等. bootstrap并未对齐做太多的的定制化效果设计,仅仅对表单内的fieldset.legend.la ...

  6. linux iftop流量查看工具的安装与使用

    1.安装依赖包yum install flex byacc  libpcap ncurses ncurses-devel libpcap-devel 2.下载iftop wget http://www ...

  7. Xerces链接错误原因之/Zc:wchar_t-设置不一致

    今天程序需要使用Xerces作为xml文件的解析与序列化工具,使用的是Xerces2.7.0版本.具体编译教程如下: 成功编译出了Xerces.dll和Xerces.lib.但是在链接到主工程的时候, ...

  8. [原创]cocos2d-x研习录-第二阶 概念类之节点类(CCNode)

    节点类CCNode在基本概念中并不存在,它是为了建立基本概念之间的关联关系而抽象出来的中间辅助类.这个类在Cocos2D-x中极为重要,它为概念类之间搭建了一座宏伟的桥梁.它的继承关系图如下:     ...

  9. python基础教程之抽象

    很早知道python,但没有坚持学习.最近心血来潮,但能弥补这个遗憾. 对象几个重要概念: 多态:可以对不同类的对象使用同样的操作: 封装:对外部世界隐藏对象的工作细节: 继承:以普通的类为基础建立专 ...

  10. The error occurred while setting parameters--索引 3 超出范围 sqlserver2008

    这个问题不是jar包冲突,是表的问题,表里的ID设置成自动增加1,就可以了!