首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >iOS---UICollectionView详解和常用API翻译

iOS---UICollectionView详解和常用API翻译

作者头像
用户1941540
发布于 2018-05-11 04:05:49
发布于 2018-05-11 04:05:49
2.5K00
代码可运行
举报
文章被收录于专栏:ShaoYLShaoYL
运行总次数:0
代码可运行

UICollectionView

  • 1.必须要设置布局参数
  • 2.注册cell
用法类似于UITableView 类。自动实现重用,必须注册初始化。
使用UICollectionView必须实现UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout这三个协议。

Collection View的构成,我们能看到的有三个部分:

  • Cells
  • Supplementary Views 追加视图 (类似Header或者Footer)
  • Decoration Views 装饰视图 (用作背景展示)

一、UICollectionViewLayout

  • UICollectionView的精髓
  • Layout决定了UICollectionView是如何显示在界面上的。在展示之前,一般需要生成合适的UICollectionViewLayout子类对象,并将其赋予CollectionView的collectionViewLayout属性。

1.UICollectionViewFlowLayout

  • 最简单也是最常用的默认layout对象,UICollectionViewFlowLayout。Flow Layout简单说是一个直线对齐的layout,
常用属性
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 行间距,也可以通过collectionView: layout:minimumLineSpacingForSectionAtIndex:
@property (nonatomic) CGFloat minimumLineSpacing;

// 设置cell之间的间距
@property (nonatomic) CGFloat minimumInteritemSpacing;

// 定义每一个item的大小。通过设定itemSize可以全局地改变所有cell的尺寸,如果想要对某个cell制定尺寸,
//可以使用-collectionView:layout:sizeForItemAtIndexPath:方法。
@property (nonatomic) CGSize itemSize;

@property (nonatomic) CGSize estimatedItemSize

// 滚动方向,默认是水平
// UICollectionViewScrollDirectionVertical
// UICollectionViewScrollDirectionHorizontal
@property (nonatomic) UICollectionViewScrollDirection scrollDirection;

// 根据滚动方向不同,header和footer的高和宽中只有一个会起作用。
// 垂直滚动时section间宽度为该尺寸的高,而水平滚动时为宽度起作用,
@property (nonatomic) CGSize headerReferenceSize;
@property (nonatomic) CGSize footerReferenceSize;

// 组间距 缩进
@property (nonatomic) UIEdgeInsets sectionInset;
UICollectionViewDelegateFlowLayout代理方法
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 设定指定Cell的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

// 设定collectionView(指定区)的边距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;

// 设定指定区内Cell的最小行距,也可以直接设置UICollectionViewFlowLayout的minimumLineSpacing属性
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section

// 设定指定区内Cell的最小间距,也可以直接设置UICollectionViewFlowLayout的minimumInteritemSpacing属性
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

2.UICollectionViewLayoutAttributes

  • 一个非常重要的类,
属性列表
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 边框
@property (nonatomic) CGRect frame
// 中心点
@property (nonatomic) CGPoint center
// 大小
@property (nonatomic) CGSize size
// 形状
@property (nonatomic) CATransform3D transform3D
// 透明度
@property (nonatomic) CGFloat alpha
// 层次关系
@property (nonatomic) NSInteger zIndex
// 是否隐藏
@property (nonatomic, getter=isHidden) BOOL hidden

3.自定义的UICollectionViewLayout

  • UICollectionViewLayout的功能为向UICollectionView提供布局信息.
  • 继承UICollectionViewLayout类。
重写方法
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 返回collectionView的内容的尺寸
-(CGSize)collectionViewContentSize

// 返回rect中的所有的元素的布局属性
/*
返回的是包含UICollectionViewLayoutAttributes的NSArray
UICollectionViewLayoutAttributes可以是cell,追加视图或装饰
视图的信息,通过不同的UICollectionViewLayoutAttributes初始
化方法可以得到不同类型的UICollectionViewLayoutAttributes:
*/
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect

// 返回对应于indexPath的位置的cell的布局属性
-(UICollectionViewLayoutAttributes _)layoutAttributesForItemAtIndexPath:(NSIndexPath _)indexPath

//返回对应于indexPath的位置的追加视图的布局属性,如果没有追加视图可不重载
-(UICollectionViewLayoutAttributes _)layoutAttributesForSupplementaryViewOfKind:(NSString _)kind atIndexPath:(NSIndexPath *)indexPath

// 返回对应于indexPath的位置的装饰视图的布局属性,如果没有装饰视图可不重载
-(UICollectionViewLayoutAttributes * )layoutAttributesForDecorationViewOfKind:(NSString_)decorationViewKind atIndexPath:(NSIndexPath _)indexPath

// 当边界发生改变时,是否应该刷新布局。如果YES则在边界变化(一般是scroll到其他地方)时,将重新计算需要的布局信息。
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
  • 另外需要了解的是,在初始化一个UICollectionViewLayout实例后,会有一系列准备方法被自动调用,以保证layout实例的正确。
  • 首先,-(void)prepareLayout将被调用,
    • 默认下该方法什么没做,但是在自己的子类实现中
    • ,一般在该方法中设定一些必要的layout的结构和初始需要的参数等。
  • 之后,-(CGSize) collectionViewContentSize将被调用,
    • 以确定collection应该占据的尺寸。注意这里的尺寸不是指可视部分的尺寸,而应该是所有内容所占的尺寸。
    • collectionView的本质是一个scrollView,因此需要这个尺寸来配置滚动行为。

二、UICollectionView

1.UICollectionViewDataSource

①section的数量 -numberOfSectionsInCollection:
②某个section里有多少个item -collectionView:numberOfItemsInSection:
③对于某个位置应该显示什么样的cell -collectionView:cellForItemAtIndexPath:

2.UICollectionViewDelegate

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 当指定indexPath处的item被选择时触发
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

//返回这个UICollectionView是否可以被选择
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath;

// 下面是三个和高亮有关的方法:

- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath

- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath

- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath


/*
事件的处理顺序如下:

1.手指按下
2.shouldHighlightItemAtIndexPath (如果返回YES则向下执行,否则执行到这里为止)
3.didHighlightItemAtIndexPath (高亮)
4.手指松开
5.didUnhighlightItemAtIndexPath (取消高亮)
6.shouldSelectItemAtIndexPath (如果返回YES则向下执行,否则执行到这里为止)
7.didSelectItemAtIndexPath (执行选择事件)
*/
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-08-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
iOS流布局UICollectionView系列四——自定义FlowLayout进行瀑布流布局
        前几篇博客从UICollectionView的基础应用到设置UICollectionViewFlowLayout更加灵活的进行布局,但都限制在系统为我们准备好的布局框架中,还是有一些局限性,例如,如果我要进行瀑布流似的不定高布局,前面的方法就很难满足我们的需求了,如下:
珲少
2018/08/15
3.4K0
iOS流布局UICollectionView系列四——自定义FlowLayout进行瀑布流布局
iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流
上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看《iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调》。UICollectionView之所以强大,是因为其具有自定义功能,这一自定义就不得了啦,自由度非常大,定制的高,所以功能也是灰常强大的。本篇博客就不使用自带的流式布局了,我们要自定义一个瀑布流。自定义的瀑布流可以配置其参数: 每个Cell的边距,共有多少列,
lizelu
2018/01/11
1.5K0
iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流
iOS流布局UICollectionView系列五——圆环布局的实现
        前边的几篇博客,我们了解了UICollectionView的基本用法以及一些扩展,在不定高的瀑布流布局中,我们发现,可以通过设置具体的布局属性类UICollectionViewLayoutAttributes来设置设置每个item的具体位置,我们可以再扩展一下,如果位置我们可以自由控制,那个布局我们也可以更加灵活,就比如创建一个如下的circleLayout:
珲少
2018/08/16
1.7K0
iOS流布局UICollectionView系列五——圆环布局的实现
UICollectionView 很简单的写个瀑布流
你项目中要用到它吗? 可能会在你的项目中用到这玩意,最近也是要用就简单的写了一个 Demo。没多少代码,就不放Git了,下面会详细点的说说代码的,要还有什么问题的小伙伴可以直接Q我,也可以把Demo发给你,这里有Q可以找一下加我 多多交流,互相学习!    下面是简单的一个效果图,先给看看效果图! 739006-20160607165303027-1215360678.png 先说说控制器里面的代码,控制器里面就是我们的  UICollectionView  的一些基本的创建了。其实它和 UITabl
Mr.RisingSun
2018/01/09
1.2K0
UICollectionView 很简单的写个瀑布流
iOS 瀑布流实现「建议收藏」
我们将collectionview定义为一个属性变量,并在viewDidLoad中对其进行设置:首先我们创建了一个布局对象(layout),类型是我们自己定义的布局类(WaterfallFlowLayout),接着我们又对属性变量collectionview进行了创建,设置了他的frame。然后就是对其代理的设置,collectionview的代理有三个,除了和tableview相同的代理和数据源之外,还有一个布局的代理(UICollectionViewDelegateFlowLayout),这里只设置了两个代理,就是数据源和处理事件的代理。这里需要注意的是tableview的重用机制不需要注册,但是collectionview必须要注册,注册的类是自己定义的cell的类(WaterFallCollectionViewCell),然后再跟上标识。值得一提的是collectionview只能采用重用的方式来加载cell。
全栈程序员站长
2022/11/17
2.8K1
iOS 瀑布流实现「建议收藏」
iOS流布局UICollectionView系列三——使用FlowLayout进行更灵活布局
        前面的博客介绍了UICollectionView的相关方法和其协议中的方法,但对布局的管理类UICollectionViewFlowLayout没有着重探讨,这篇博客介绍关于布局的相关设置和属性方法。
珲少
2018/08/16
2.2K0
iOS流布局UICollectionView系列三——使用FlowLayout进行更灵活布局
iOS开发之窥探UICollectionViewController(五) --一款炫酷的图片浏览组件
本篇博客应该算的上CollectionView的高级应用了,从iOS开发之窥探UICollectionViewController(一)到今天的(五),可谓是由浅入深的窥探了一下UICollectionView的用法,这些用法不仅包括SDK中自带的流式布局(UICollectionViewDelegateFlowLayout)而且介绍了如何根据你的需求去自定义属于你自己的CollectionView。自定义的CollectionView可谓是非常灵活,其灵活性也决定了其功能的强大。CollectionVie
lizelu
2018/01/11
1.7K0
iOS开发之窥探UICollectionViewController(五) --一款炫酷的图片浏览组件
IOS基金会_ UICollectionView简单易用
一种是继承UICollectionViewController,这个Controller会自带一个UICollectionView。
全栈程序员站长
2022/07/06
4350
iOS流水布局UICollectionView简单使用引实现结
开发中我们最常看到的可能是表视图UITableView了,但其实还有一个视图也很常见,特别是一些图片、商品、视频的展示界面,用UICollectionView来展现往往会更加方便。
Cloudox
2021/11/23
1.4K0
iOS流水布局UICollectionView简单使用引实现结
iOS流布局UICollectionView系列六——将布局从平面应用到空间
        前面,我们将布局由线性的瀑布流布局扩展到了圆环布局,这使我们使用UICollectionView的布局思路大大迈进了一步,这次,我们玩的更加炫一些,想办法将布局应用的空间,你是否还记得,在管理布局的item的具体属性的类UICollectionViewLayoutAttributrs类中,有transform3D这个属性,通过这个属性的设置,我们真的可以在空间的坐标系中进行布局设计。iOS系统的控件中,也并非没有这样的先例,UIPickerView就是很好的一个实例,这篇博客,我们就通过使用UICollectionView实现一个类似系统的UIPickerView的布局视图,来体会UICollectionView在3D控件布局的魅力。系统的pickerView效果如下:
珲少
2018/08/15
1.7K0
iOS流布局UICollectionView系列六——将布局从平面应用到空间
iOS_WaterfallFlowLayout瀑布流用重写UICollectionViewFlowLayout类实现
最近调研瀑布流,在gitHub上下了个Demo发现它的所有视图都是用Main.storyboard拖的, 自己研究半天没研究明白;
mikimo
2022/07/20
4950
iOS第三方左对齐布局类——UICollectionViewLeftAlignedLayout
        UICollectionViewLeftAlignedLayout是第三方的左对齐布局管理类,其继承自UICollectionViewFlowLayout,使用其可以方便的进行左对齐的瀑布流界面布局。
珲少
2018/08/15
2.2K0
iOS第三方左对齐布局类——UICollectionViewLeftAlignedLayout
iOS开发之UICollectionViewDataSourcePrefetching
在iOS10中,苹果为UICollectionViewCell引入了Pre-Fetching预加载机制用于提升它的性能。主要引入了一个新的数据源协议UICollectionViewDataSourcePrefetching,包含两个方法: @protocol UICollectionViewDataSourcePrefetching <NSObject> @required // 预加载数据 - (void)collectionView:(UICollectionView *)collectionView
YungFan
2018/05/03
2.4K0
iOS开发之UICollectionViewDataSourcePrefetching
iOS流布局UICollectionView系列七——三维中的球型布局
        通过6篇的博客,从平面上最简单的规则摆放的布局,到不规则的瀑布流布局,再到平面中的圆环布局,我们突破了线性布局的局限,在后面,我们将布局扩展到了空间,在Z轴上进行了平移,我们实现了一个类似UIPickerView的布局模型,其实我们还可以再进一步,类比于平面布局,picKerView只是线性排列布局在空间上的旋转与平移,这次,我们更加充分了利用一下空间的尺寸,来设计一个圆球的布局模型。以下是前几篇博客地址:
珲少
2018/08/16
1.7K0
iOS流布局UICollectionView系列七——三维中的球型布局
iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调
UICollectionView的布局是可以自己定义的,在这篇博客中先在上篇博客的基础上进行扩充,我们先使用UICollectionViewFlowLayout,然后好好的介绍一下UICollectionView的一些回调方法,主要包括UICollectionViewDataSource,UICollectionViewDelegateFlowLayout,UICollectionViewDelegate相关回调方法,并通过实例来介绍每个回调的用法。并且给每个Section添加定制的Header和Foote
lizelu
2018/01/11
1.9K0
iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调
iOS---UICollectionView自定义流布局实现瀑布流效果
自定义布局,实现瀑布流效果 自定义流水布局,继承UICollectionViewLayout 实现一下方法 // 每次布局之前的准备 - (void)prepareLayout; // 返回所有的尺寸 - (CGSize)collectionViewContentSize; // 返回indexPath这个位置Item的布局属性 - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)
用户1941540
2018/05/11
2.3K0
封装内嵌UICollectionView和UIPageControl的ScrollView
该文章介绍了一种封装内嵌UICollectionView和UIPageControl的ScrollView,可以用于实现相册滑动、页面跳转、长列表等效果。该方案使用UICollectionView封装了相册视图,使用UIPageControl实现了分页效果。在初始化时,先设置UICollectionView的数据源,再设置UICollectionView的属性,最后在实现UICollectionView的代理方法。该方案可以用于实现相册滑动、页面跳转、长列表等效果,并且易于使用。","summary_url":"http://www.open-open.com/lib/view/28955843476
MelonTeam
2018/01/04
1.9K0
封装内嵌UICollectionView和UIPageControl的ScrollView
【IOS开发基础系列】UICollectionView专题
        UICollectionView是一种新的数据展示方式,简单来说可以把他理解成多列的UITableView(请一定注意这是UICollectionView的最最简单的形式)。
江中散人_Jun
2023/10/16
2.1K0
【IOS开发基础系列】UICollectionView专题
iOS瀑布流
瀑布流Demo 瀑布流截图.gif 使用UICollectionView实现瀑布流 自定义UICollectionViewLayout中的主要代码: YJWaterFlowLayout.h中代码: #
hrscy
2018/08/30
1.8K0
iOS瀑布流
UI篇-UICollectionView 补充
http://blog.csdn.net/xiyouios/article/details/50191101
進无尽
2018/09/12
1.9K0
UI篇-UICollectionView 补充
推荐阅读
相关推荐
iOS流布局UICollectionView系列四——自定义FlowLayout进行瀑布流布局
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档