UICollectionView布局功能
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布局功能的更多相关文章
- iOS 8自动调整UITableView和UICollectionView布局
本文转载自:http://tech.techweb.com.cn/thread-635784-1-1.html 本文讲述了UITableView.UICollectionView实现 self-siz ...
- [转]iOS8 自动调整UITableView和UICollectionView布局
转自:http://www.cocoachina.com/industry/20140825/9450.html (via:玉令天下的Blog) 本文讲述了UITableView.UICollec ...
- 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能
原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...
- ABBYY FineReader 15新增编辑页面布局功能
ABBYY FineReader 15(Windows系统) 新增编辑页面布局功能,允许用户修改PDF数字文档的页面布局,包括添加或者删除文字段落,文字块以及图片,更改段落,文字块,图片位置.添加或者 ...
- UICollectionView布局cell的三种方式
UICollectionViewFlowLayout里面: // 方法一 - (void)prepareLayout{} // 方法二 - (nullable NSArray<__kindof ...
- iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流
上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewControlle ...
- iOS下的界面布局利器-MyLayout布局框架
Swift:TangramKit: https://github.com/youngsoft/TangramKit OC:MyLayout: https://github.com/youngsof ...
- iOS UICollectionView(转三)
上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewControlle ...
- iOS电商常见动画与布局、微信悬浮窗、音乐播放器、歌词解析、拖动视图等源码
iOS精选源码 MXScroll 介绍 混合使用UIScrollView ios 电商demo(实现各种常见动画效果和页面布局) 一行代码集成微信悬浮窗 可拖动,大小的视图,可放置在屏幕边缘. 在使用 ...
随机推荐
- springboot系列之-profile
Spring Boot profile用于分离不同环境的参数配置,通过spring.profile.active参数进行设置. 在Spring Boot中应用程序配置可以使用2种格式:applicat ...
- Scala初探:新潮的函数式面向对象语言
Scala的基本概念 先讲讲Scala里头几个概念Classes, Traits, Objects and Packages. Class和Java中的很像,只不过Scala中Class不能有stat ...
- Node.js高级编程读书笔记 - 3 网络编程
Outline 3.4 构建TCP服务器 3.5 构建HTTP服务器 3.6 构建TCP客户端 3.7 创建HTTP请求 3.8 使用UDP 3.9 用TLS/SSL保证服务器的安全性 3.10 用H ...
- Oracle学习系列5
Oracle学习系列5 ************************************************************************************ ,掌握 ...
- CSS3 动画基础
该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html 译文:你需要知道的CSS3 动画技术 原文:Wha ...
- C语言编程心得
记录这些是为了日后自己想查阅以前经验的方便,同时若能给其他网友带来一些帮助,就更好了~ C语言,自己经常遇到的问题: 1.段错误 段错误一般是由于访问了不存在的地址造成的,具体的原因有文件路径不存在, ...
- Python for loop and while loop
#!pyton2 #-*- coding:utf-8 -*- for letter in "Python": print "Current letter is:" ...
- 一步步构建自己的AngularJS(1)——项目初始化
Angular1距离2009年发布已经好多年了,Angular2也已经出了Beta版,估计今年就能正式发布.大多数人对于Angular1.X的认识仅限于能够在项目中使用,对于其中的深层原理知道的并不多 ...
- C++多重继承带来的问题
首先上图,咱们看图说话! 橙色表示变量,使用private修饰. 如图,假设Person类的变量name只能通过input方法来输入. 那么继承自Person的Student及Teacher类中s ...
- CDN的实现原理
在描述CDN的实现原理,让我们先看传统的未加缓存服务的访问过程,以便了解CDN缓存访问方式与未加缓存访问方式的差别: 用户提交域名→浏览器对域名进行解释→得到目的主机的IP地址→根据IP地址访问发出请 ...