UICollectionView自定义布局

转载:

http://answerhuang.duapp.com/index.php/2013/11/20/custom_collection_view_layouts/

主要属性介绍

UITableView和UICollectionView都是由data-source和delegate驱动的.使用起来两者相似.

UICollectionViewCell相当于table view中的cell, 用法也是一样的.

Supplementary views相当于table view的section header和footer views。像cells一样,他们的内容都由数据源对象驱动。然而,和table view中用法不一样的是,supplementary view并不一定会作为header或footer view;他们的数量和放置的位置完全由布局控制。从这个角度来讲,和cell差不多.

Decoration views纯粹为一个装饰品。他们完全属于布局对象,并被布局对象管理,他们并不从数据源获取他们的contents。当布局对象指定它需要一个decoration view的时候,collection view会自动创建,并为其应用布局对象提供的布局参数。并不需要准备任何自定义视图的内容。

UICollectionViewCell, Supplementary views和decoration views必须是UICollectionResuableView的子类。每个你布局所使用的视图类都需要在collection view中注册,这样当data source让他从reuse pool中出列时,它才能够创建新的实例。

自定义布局用到函数介绍

-(CGSize)collectionViewContentSize

用来确定collectionView的ContentSize的大小

layoutAttributesForElementsInRect:

关键函数, 用来控制cell, Supplementary view, 还有Decoration view的自定义布局属性, 将这些自定义布局属性组成这个数组, 返回. 这些自动布局属性,分别通过下面的三个函数来获取的layoutAttributesForItemAtIndexPath, layoutAttributesForSupplementaryViewOfKind, layoutAttributesForDecorationViewOfKind

-(UICollectionViewLayoutAttributes )layoutAttributesForItemAtIndexPath:(NSIndexPath )indexPath

获取cell的自动布局属性

-layoutAttributesForSupplementaryViewOfKind:withIndexPath:

获取SupplementaryView的自动布局属性

-layoutAttributesForDecorationViewOfKind:withIndexPath:,

获取DecorationView的自动布局属性

-shouldInvalidateLayoutForBoundsChange:

当bound变化的时候, 调用此函数. 如果返回yes, 将调用layoutAttributesForElementsInRect等一系列函数, 重新获取各个元素的自动布局.

例子:

下面为自己写的一个例子:

地址为: http://download.csdn.net/detail/daiyibo123/9144827

iOS-UICollectionView自定义布局的更多相关文章

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

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

  2. iOS 关于自定义UICollectionViewLayout实现复杂布局

    UICollectionView的简单介绍 UICollectionView的结构 Cells Supplementary Views 追加视图 (类似Header或者Footer) Decorati ...

  3. 自定义UICollectionViewController之后 如何设置UICollectionView的布局方式

    我们很多时候使用UICollectionView 可能都是直接创建 UICollectionView   通过初始化的时候  传入一个布局对象的方式来使用UICollectionView 比如我们之前 ...

  4. 自定义UICollectionViewController之后 如何设置UICollectionView的布局方式--备用

    我们很多时候使用UICollectionView 可能都是直接创建 UICollectionView   通过初始化的时候  传入一个布局对象的方式来使用UICollectionView 比如我们之前 ...

  5. 详细分享UICollectionView的自定义布局(瀑布流, 线性, 圆形…)

    前言: 本篇文章不是分享collectionView的详细使用教程, 而是属于比较’高级’的collectionView使用技巧, 阅读之前, 我想你已经很熟悉collectionView的基本使用, ...

  6. Swift - 使用网格(UICollectionView)的自定义布局实现复杂页面

    网格UICollectionView除了使用流布局,还可以使用自定义布局.实现自定义布局需要继承UICollectionViewLayout,同时还要重载下面的三个方法: 1 2 3 4 5 6 7 ...

  7. iOS:UICollectionView流式布局及其在该布局上的扩展的线式布局

    UICollectionViewFlowLayout是苹果公司做好的一种单元格布局方式,它约束item的排列规则是:从左到右依次排列,如果右边不够放下,就换一行重复上面的方式排放,,,,,   常用的 ...

  8. 详细分享UICollectionView的自定义布局(瀑布流, 线性, 圆形...)

    前言: 本篇文章不是分享collectionView的详细使用教程, 而是属于比较'高级'的collectionView使用技巧, 阅读之前, 我想你已经很熟悉collectionView的基本使用, ...

  9. iOS UICollectionView(转三)

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

随机推荐

  1. Caffe学习系列(17): caffe源码分析 vector&lt;Blob&lt;Dtype&gt;*&gt;&amp; bottom(转)

    转自:http://blog.csdn.net/qq_14975217/article/details/51524042 Blob:4个维度 n x c x h x w: bottom[0] .bot ...

  2. StringEscapeUtils类的转义与反转义方法

    第一步.下载Jar包(commons-lang.jar) 下载地址:http://commons.apache.org/proper/commons-lang/download_lang.cgi 第二 ...

  3. 铁人系列(2)LA2218

    思路:对于每个人  都会有n-1个半片面  加上x>0,y>0,1-x-y>0(这里的1抽象为总长) 代码是粘贴的  原来写的不见了  orz............ // LA22 ...

  4. SpringMVC控制器配置文件

    1 首先引入 xml 的约束 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&quo ...

  5. yii2 打印sql语句

    echo $temp_chat_query->createCommand()->getRawSql();

  6. css animation 动画的制作

    上效果 效果描述:原来这些图片都绝对定位在最右边,并有一个css3 3D的旋转初始效果.随着动画的开始,依次向左移动,并旋转到0度.(主要用于引导页步骤的描述) 上代码: html布局 <div ...

  7. SQLServer中的变量:局部变量,全局变量

    SQLServer中的全局变量   变量 Transact-SQL语言中有两种形式的变量,一种是用户自己定义的局部变量,另外一种是系统提供的全局变量.局部变量 局部变量是一个能够拥有特定数据类型的对象 ...

  8. HBase介绍

    欢迎和大家交流技术相关问题:邮箱: jiangxinnju@163.com博客园地址: http://www.cnblogs.com/jiangxinnjuGitHub地址: https://gith ...

  9. vue2.0使用slot插槽分发内容

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. 手把手带你画一个 时尚仪表盘 Android 自定义View

    拿到美工效果图,咱们程序员就得画得一模一样. 为了不被老板喷,只能多练啊. 听说你觉得前面几篇都so easy,那今天就带你做个相对比较复杂的. 转载请注明出处:http://blog.csdn.ne ...