iOS 关于自定义UICollectionViewLayout实现复杂布局
UICollectionView的简单介绍
UICollectionView的结构
Cells
Supplementary Views 追加视图 (类似Header或者Footer)
Decoration Views 装饰视图 (用作背景展示)
由两个方面对UICollectionView进行支持
和tableView一样,即提供数据的UICollectionViewDataSource以及处理用户交互的UICollectionViewDelegate。
另一方面 对于cell的样式和组织方式,由于collectionView比tableView要复杂得多,因此没有按照类似于tableView的style的方式来定义,而是专门使用了一个类来对collectionView的布局和行为进行描述,这就是UICollectionViewLayout
而我们主要讲UICollectionViewLayout,因为这不仅是collectionView和tableView的最重要求的区别,也是整个UICollectionView的精髓所在
UICollectionViewLayoutAttributes类的介绍
一个UICollectionViewLayoutAttributes对象管理着一个Collection View中给定的一个Item的布局有关的属性。当被CollectionView要求时布局对象创建这个类的实例。
open class UICollectionViewLayoutAttributes : NSObject, NSCopying, UIDynamicItem {
open var frame: CGRect item的位置
open var center: CGPoint item的中心点 这个中心点是在给定的Collection View坐标系中的点。设置这个属性的值也会更新frame属性中的origin的值。
open var size: CGSize item的大小
open var transform3D: CATransform3D item的放射变化 使用你指定的放射变换赋值给这个属性替换transform3D属性的值
@available(iOS 7.0, *)
open var bounds: CGRect
@available(iOS 7.0, *)
open var transform: CGAffineTransform item在平面上的变化
open var alpha: CGFloat item的透明度 0 - 1
open var zIndex: Int // default is 0 item指定在Z轴上的位置 这个属性被用来确定在布局时Item的前后顺序。大的zIndex值的Item会被显示在小的zIndex值的Item上面。这个属性使用相同的值的Item的顺序是不确定的。
这个属性的值默认为0
open var isHidden: Bool // As an optimization, UICollectionView might not create a view for items whose hidden attribute is YES
open var indexPath: IndexPath Collection View中Item的索引值。
索引包含了一个Section的索引和一个Item在这个Section中的索引。这两个值标示在Collection View唯一的对应的Item的位置。
open var representedElementCategory: UICollectionElementCategory { get } Item的类型。
你可以使用这个属性的值来区分这个布局属性是用于一个Cell还是Supplementary View还是Decoration View。
open var representedElementKind: String? { get } // nil when representedElementCategory is UICollectionElementCategoryCell
你可以使用这个属性的值来标识Supplementary View或者Decoration View相关联的属性给定的目的。如果
representedElementCategory属性为UICollectionElementCategoryCell,那么这个 属性为nil。}
typedef NS_ENUM(NSUInteger, UICollectionElementCategory) {
UICollectionElementCategoryCell, // Cell
UICollectionElementCategorySupplementaryView, // Supplementary View
UICollectionElementCategoryDecorationView // Decoration View
};
自定义UICollectionViewLayout
UICollectionViewLayout的功能是向UICollectionView提供布局信息 不仅包括cell的布局信息,也包括追加视图和装饰视图的布局信息。实现一个自定义layout的常规做法是继承UICollectionViewLayout类,然后重载下列方法:
准备方法被自动调用 以保证layout实例的正确 为即将进行的layout作前期的计算
open func prepare()
返回指定区域中的Cell和View的属性
返回的是包含UICollectionViewLayoutAttributes的数组 UICollectionViewLayoutAttributes可以是数组 追加视图(头尾视图)的信息
func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]?
返回对应于indexPath的位置的cell的布局属性
func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes?
返回对应于indexPath的位置的追加视图的布局属性,如果没有追加视图可不重载
使用这个方法为
Collection View中的一个Supplementary View创建一个布局属性对象。和Cell一样,Supplementary View当前的数据是被Collection View数据源所管理的。但是和Cell不同的是,Supplementary View通常是为特殊目的而设计的。例如,Header和Footer与Cell的放置位置不同,是提供给在单个的Section或者整个Collection View的。由你来决定如何使用
indexPath参数来识别一个给定的Supplementary View。通常,你使用elementKind属性来确定Supplementary View的类型,然后使用indexPath的信息来识别不同Supplementary View实例。func layoutAttributesForSupplementaryView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes?
使用这个方法为
Collection View中的一个Decoration View创建一个布局属性对象。Decoration View是Supplementary View的一种,但是不会展示被Collection View数据源所管理的数据。相反,它们大多数为一个Section或者整个Collection View呈现视觉装饰效果。由你来决定如何使用
indexPath参数来识别一个给定的Decoration View。通常,你使用decorationViewKind属性来确定Decoration View的类型,然后使用indexPath的信息来识别不同Decoration View实例。func layoutAttributesForDecorationView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes?
当边界发生改变的时候 是否应该刷新布局 如果YES则在边界变化(一般是scroll到其他地方)时,将重新计算需要的布局信息。
func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool
方法的调用顺序
)-(void)prepareLayout 设置layout的结构和初始需要的参数等。 ) -(CGSize) collectionViewContentSize 确定collectionView的所有内容的尺寸。 )-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect初始的layout的外观将由该方法返回的UICollectionViewLayoutAttributes来决定。 )在需要更新layout时,需要给当前layout发送
)-invalidateLayout, 该消息会立即返回,并且预约在下一个loop的时候刷新当前layout
)-prepareLayout,
)依次再调用-collectionViewContentSize和-layoutAttributesForElementsInRect来生成更新后的布局。
iOS 关于自定义UICollectionViewLayout实现复杂布局的更多相关文章
- 自定义UICollectionViewLayout 布局实现瀑布流
自定义 UICollectionViewLayout 布局,实现瀑布流:UICollectionView和UICollectionViewCell 另行创建,这只是布局文件, 外界控制器只要遵守协议并 ...
- 自定义UICollectionViewLayout并添加UIDynamic - scorpiozj(转)
转载自:http://www.tuicool.com/articles/jM77Vf 自定义UICollectionViewLayout并添加UIDynamic UICollectionVie ...
- 自定义UICollectionViewLayout 实现瀑布流
今天研究了一下自定义UICollectionViewLayout. 看了看官方文档,要自定义UICollectionViewLayout,需要创建一个UICollectionViewLayout的子类 ...
- 自定义UICollectionViewLayout并添加UIDynamic
大家也可以到这里查看. UICollectionView是iOS6引入的控件,而UIDynamicAnimator是iOS7上新添加的框架.本文主要涵盖3部分: 一是简单概括UICollectionV ...
- 自定义UICollectionViewLayout之CATransform3D
1.自定义UICollectionViewLayout旋转效果 之前有自定义UICollectionViewLayout(适用于多个section),本文是一个对cell进行CATransform3D ...
- iOS 如何自定义UISearchBar 中textField的高度
iOS 如何自定义UISearchBar 中textField的高度 只需设置下边的方法就可以 [_searchBar setSearchFieldBackgroundImage:[UIImage i ...
- iOS 隐藏自定义tabbar
iOS 隐藏自定义tabbar -(void)viewWillAppear:(BOOL)animated { NSArray *array=self.tabBarController.view.su ...
- ios 实现自定义状态栏StatusBar 和 导航栏navigationBar 的状态和颜色
很多app中可以看到不同与导航栏的状态栏的颜色,他妈的真绕嘴. 一.更改状态栏颜色 (StatusBar) 就是比如导航栏是红色的状态栏是绿色的. 要实现这样的效果其实很简单,就是添加一个背景view ...
- Android 自定义View及其在布局文件中的使用示例(三):结合Android 4.4.2_r1源码分析onMeasure过程
转载请注明出处 http://www.cnblogs.com/crashmaker/p/3549365.html From crash_coder linguowu linguowu0622@gami ...
随机推荐
- 【Python3 爬虫】16_抓取腾讯视频评论内容
上一节我们已经知道如何使用Fiddler进行抓包分析,那么接下来我们开始完成一个简单的小例子 抓取腾讯视频的评论内容 首先我们打开腾讯视频的官网https://v.qq.com/ 我们打开[电视剧]这 ...
- java IO,bufferedReader类
1,掌握bufferedreader类作用 2,掌握键盘输入的基本格式. Buffer:表示缓冲区,之前的StringBuffer,缓冲区中的内容可以更改,可以提高效率. 如果要想接收任意长度的数据, ...
- Android 四大组件学习之BroadcastReceiver二
上节学习了怎样创建一个广播.也尝试接受系统打电话的广播. 本节课学习怎样自己定义广播.自己定义广播实质上也就是创建一个发送广播者,创建一个接受该广播者. 那我们就開始行动吧. 先创建一个发送广播的应用 ...
- Failed to load http://localhost:8080/team.php: Request header field x-jwt-header is not allowed by Access-Control-Allow-Headers in preflight response.
axios 加入header之后,请求出现 Failed to load http://localhost:8080/team.php: Request header field x-jwt-head ...
- 自己动手开发更好用的markdown编辑器-07(扩展语法)
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/05/19/hexomd-07/ 文章目录 1. 准备工作 2. 目录语法 ...
- 服务器上使用matplotlib.pyplot绘图
在linux服务器端执行python脚本,有时候需要画图,但是linux没有GUI界面,因此需要在导入matplotlib.pyplot库之前先执行 import matplotlib as mpl ...
- nginx中ngx_list的数据结构
今天没事了,在查看nginx源代码中看到ngx_list的结构,发现设计为链表数组的形式,不知道为什么这样设计 struct ngx_list_part_s { void *elts;//指向数组的起 ...
- Atitit hre框架v5 新特性 HREv5
Atitit hre框架v5 新特性 HREv5 1. V5新特性 apiurl2="/wrmiServlet";1 2. V1 新特性1 3. V2 新特性 添加php版1 ...
- Atitit. 包厢记时系统 的说明,教程,维护,故障排查手册v2 pb25.doc
Atitit. 包厢记时系统 的说明,教程,维护,故障排查手册v2 pb25.doc 1. 服务器方面的维护1 1.1. 默认情况下,已经在系统的启动目录下增加了 个启动项目1 1.2. 后台服务.保 ...
- 网页CSS font-size使用em替代px
px和em都是长度单位,区别是,px的值是固定的,em的值是相对的,并且em会继承父级元素的字体大小. 任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px ...