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. UVA 10816 + HDU 1839 Dijstra + 二分 (待研究)

    UVA 题意:两个绿洲之间是沙漠,沙漠的温度不同,告诉起点,终点,求使得从起点到终点的最高温度最小的路径,如果有多条,输出长度最短的路径: 思路:用最小费用(最短路径)最大流(最小温度)也能搞吧,但因 ...

  2. CSS3实现轮播切换效果

    实现轮播的一般思路为在一个大盒子中对无限个元素进行切换操作,大盒子固定大小,超出盒子范围进行隐藏,而里面无限个元素可以任何堆叠,按照一定的步骤进行位置变换,已达到在可视区域呈现我们想要的效果.   看 ...

  3. http_build_query()就是将一个数组转换成url 问号?后面的参数字符串,并且会自动进行urlencode处理,及它的逆向函数

    http_build_query()就是将一个数组转换成url 问号?后面的参数字符串,并且会自动进行urlencode处理 例如: $data = array( 'foo'=>'bar', ' ...

  4. Node.js高级编程读书笔记 - 6 应用程序构建和调试 - Never

    Explanation 现阶段console.log(...),util.inspect(...), JSON.stringify(...)在控制台输出已经够用了[2015/07/19]. 单元测试隶 ...

  5. LintCode Reverse LinkedList (ArrayList 和 LinkedList 的区别)

    1. ArrayList 和 LinkedList 的区别 http://pengcqu.iteye.com/blog/502676 2. How to reverse LinkedList http ...

  6. linux的七种文件类型

    d 目录 - 普通文件 l 符号链接 s 套接字文件 b 块设备文件 二进制文件 c 字符设备文件 p 命名管道文件

  7. html+css图片下弹出蒙版

    鼠标移入时弹出蒙版!!! html<!DOCTYPE html<html lang="en"<head> <meta charset="UT ...

  8. Postgres 9.4 feature highlight: REPLICA IDENTITY and logical replication

    Among the many things to say about logical replication features added in PostgreSQL 9.4, REPLICA IDE ...

  9. HTML5 history新特性pushState、replaceState,popstate

    http://blog.csdn.net/tianyitianyi1/article/details/7426606 https://developer.mozilla.org/zh-CN/docs/ ...

  10. unity, terrain道出为obj

    http://wiki.unity3d.com/index.php?title=TerrainObjExporter