Collection view自定义布局

一般我们自定义布局都会新建一个类,继承自UICollectionViewFlowLayout,然后重写几个方法:

  • prepareLayout():当准备开始布局时调用这个方法,可以在这里计算一些属性,比如cell的尺寸。
  • layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]?:在这里返回布局属性。

实例(比较简单的例子,实际开发中可以进行更多的封装)

第一步:声明两个属性

    // MARK: 属性
/** cell的个数 */
var itemCount: Int? /** 布局信息 */
var layoutAttributes = [UICollectionViewLayoutAttributes]()

第二步:重写prepareLayout方法,计算布局属性

    // MARK: 准备布局
override func prepareLayout() {
super.prepareLayout() // 计算每个cell的宽度
let width = (UIScreen.mainScreen().bounds.size.width - self.sectionInset.left - self.sectionInset.right - minimumInteritemSpacing) / 2.0 // 判断itemCount是否为空
if itemCount != nil {
// 开始计算每个cell的布局属性
calculationAttribute(withItemWidth: width)
}
}
func calculationAttribute(withItemWidth itemWidth: CGFloat) {
// 声明数组 保存每一列的总高度 (两列)
let column1 = sectionInset.top, column2 = sectionInset.top
var columnArray: [CGFloat] = [column1, column2] for index in 0..<itemCount! {
// 创建indexPath 因为是示例 所以排版固定在一组
let indexPath = NSIndexPath(forItem: index, inSection: 0)
// 创建布局属性 通过indexPath
let attribute = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)
// 创建一个随机高度
let itemHeight = CGFloat(arc4random()%150 + 100) // columnNumber 记录定义的是哪一列
var columnNumber: CGFloat
if columnArray[0] < columnArray[1] {
columnArray[0] += itemHeight + self.minimumLineSpacing
columnNumber = 0
} else {
columnArray[1] += itemHeight + self.minimumLineSpacing
columnNumber = 1
} // 设置item的位置
let x = self.sectionInset.left + (self.minimumLineSpacing + itemWidth) * columnNumber
let y = columnArray[Int(columnNumber)] - itemHeight - self.minimumLineSpacing
attribute.frame = CGRectMake(x, y, itemWidth, itemHeight) layoutAttributes.append(attribute)
}
// 当设置完所有item的位置后需要设置itemsize 这样才能保证滚动时能显示所有的cell
// itemsize的height属性 是取最高的那列的平均值
if columnArray[0] > columnArray[1] {
self.itemSize = CGSizeMake(itemWidth, (columnArray[0] - sectionInset.top) * 2 / CGFloat(itemCount!) - self.minimumLineSpacing)
} else {
self.itemSize = CGSizeMake(itemWidth, (columnArray[1] - sectionInset.top) * 2 / CGFloat(itemCount!) - self.minimumLineSpacing)
}
}

第三步:返回布局信息数组

    override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
return layoutAttributes
}

总结:这个例子是瀑布流的布局,如果需要别的布局需要在准备布局时计算,然后返回布局信息数组就可以了

Collection View 自定义布局(custom flow layout)的更多相关文章

  1. 自定义 Collection View 布局

    自定义 Collection View 布局 answer-huang 29 Mar 2014 分享文章 UICollectionView 在 iOS6 中第一次被引入,也是 UIKit 视图类中的一 ...

  2. iOS系列译文:自定义Collection View布局

    原文出处: Ole Begemann   译文出处: 黄爱武(@answer-huang).欢迎加入技术翻译小组. UICollectionView在iOS6中第一次被介绍,也是UIKit视图类中的一 ...

  3. Collection View Programming Guide for iOS---(四)---Using the Flow Layout

      Using the Flow Layout使用流布局 The UICollectionViewFlowLayout class is a concrete layout object that y ...

  4. 自定义Collection View布局

    转自answer-huang的博客 原文出自:Custom Collection View Layouts    UICollectionView在iOS6中第一次被介绍,也是UIKit视图类中的一颗 ...

  5. IOS UIView 03- 自定义 Collection View 布局

    注:本人是翻译过来,并且加上本人的一点见解. 前言 UICollectionView 在 iOS6 中第一次被引入,也是 UIKit 视图类中的一颗新星.它和 UITableView 共享一套 API ...

  6. Collection View Programming Guide for iOS---(六)---Creating Custom Layouts

    Creating Custom Layouts 创建自定义布局 Before you start building custom layouts, consider whether doing so ...

  7. Collection View Programming Guide for iOS---(三)---Designing Your Data Source and Delegate

      Designing Your Data Source and Delegate 设计你的数据源和委托 Every collection view must have a data source o ...

  8. Collection View Programming Guide for iOS---(二)----Collection View Basics

      Collection View Basics Collection View 基础 To present its content onscreen, a collection view coope ...

  9. Collection View Programming Guide for iOS---(七)---Custom Layouts: A Worked Example

    Custom Layouts: A Worked Example Creating a custom collection view layout is simple with straightfor ...

随机推荐

  1. CSS 列表 你知道吗

    CSS 列表属性允许你放置.改变列表项标志,或者将图像作为列表项标志.CSS 列表从某种意义上讲,不是描述性的文本的任何内容都可以认为是列表.人口普查.太阳系.家谱.参观菜单,甚至你的所有朋友都可以表 ...

  2. Request To JavaBean(请求对象转换为JavaBean对象)

    背景: 经常要从request等对象取出值来赋入bean中,如果不用MVC框架的绑定功能的话,麻烦  一 参考资料 1 http://jc-dreaming.iteye.com/blog/563893 ...

  3. 指向函数的指针 分类: C/C++ 2015-07-13 11:03 14人阅读 评论(0) 收藏

    原文网址:http://www.cnblogs.com/zxl2431/archive/2011/03/25/1995285.html 讲的很清楚,备份记录. (一) 用函数指针变量调用函数 可以用指 ...

  4. [AngularJS] angular-formly: Extending Types

    Extending types is one of the ways that makes angular-formly help you keep your Angular forms DRY. W ...

  5. GDB 调试程序系列

    http://blog.csdn.net/haoel/article/category/9197

  6. Silverlight OOB 程序自动更新

    Silverlight OOB 程序 提供了非常方便的自动更新功能! 要让 Silverlight OOB 安装到客户端电脑后实现自动更新,必须实现以下两个条件: 一.为 程序的 xap  文件进行签 ...

  7. Nginx性能统计模块http_stub_status_module使用

    1.进入nginx源码目录,重新配置编译参数 ./configure --prefix=/usr/local/nginx/ --with-http_stub_status_module 2.重新编译安 ...

  8. 二分图的判定hihocoder1121 and hdu3478

    这两个题目都是二分图的判定,用dfs染色比较容易写. 算法流程: 选取一个没有染色的点,然后将这个点染色,那么跟他相连的所有点一定是不同颜色的,所以,如果存在已经染过颜色的,如果和这个颜色相同的话,就 ...

  9. SOCKET,TCP/UDP,HTTP,FTP

    (一)TCP/UDP,SOCKET,HTTP,FTP简析 TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层: 网络层:IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议 传 ...

  10. fiddler接口测试

    浏览器中,可直接进行get接口测试:调用post方法的接口测试可用fiddler测试(当然,fiddler也支持get),如下图 [Execute]后双击左侧请求记录记录即可查看响应结果