Collection View 自定义布局(custom flow layout)
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)的更多相关文章
- 自定义 Collection View 布局
自定义 Collection View 布局 answer-huang 29 Mar 2014 分享文章 UICollectionView 在 iOS6 中第一次被引入,也是 UIKit 视图类中的一 ...
- iOS系列译文:自定义Collection View布局
原文出处: Ole Begemann 译文出处: 黄爱武(@answer-huang).欢迎加入技术翻译小组. UICollectionView在iOS6中第一次被介绍,也是UIKit视图类中的一 ...
- Collection View Programming Guide for iOS---(四)---Using the Flow Layout
Using the Flow Layout使用流布局 The UICollectionViewFlowLayout class is a concrete layout object that y ...
- 自定义Collection View布局
转自answer-huang的博客 原文出自:Custom Collection View Layouts UICollectionView在iOS6中第一次被介绍,也是UIKit视图类中的一颗 ...
- IOS UIView 03- 自定义 Collection View 布局
注:本人是翻译过来,并且加上本人的一点见解. 前言 UICollectionView 在 iOS6 中第一次被引入,也是 UIKit 视图类中的一颗新星.它和 UITableView 共享一套 API ...
- Collection View Programming Guide for iOS---(六)---Creating Custom Layouts
Creating Custom Layouts 创建自定义布局 Before you start building custom layouts, consider whether doing so ...
- 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 ...
- Collection View Programming Guide for iOS---(二)----Collection View Basics
Collection View Basics Collection View 基础 To present its content onscreen, a collection view coope ...
- 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 ...
随机推荐
- Quartz定时任务学习(九)Quartz监听器
Quartz 提供了三种类型的监听器:监听 Job 的,监听 Trigger 的,和监听 Scheduler 自已的. 本章解释如何应用每一种类型来更好的管理你的 Quartz 应用,并获悉到什么事件 ...
- C# 枚举 字符串 转换
普通方法 这种方法尽管很SB但确实可以解决问题 private void comboBox1_SelectedIndexChanged(object sender, EventArgs e) { st ...
- APUE 读书笔记 -----孤儿进程与僵尸进程[总结] +数据结构+C
http://www.cnblogs.com/Anker/p/3271773.html
- Gstreamer 数据流线程(GstTask / GstTaskPool)分析
作者:fengcc 原创文章 转载请注明出处 GStreamer 是一个基于流水线的多媒体框架,基于 GObject,以 C 语言写成. 凭借 GStreamer,程序员可以很容易地创建各种多媒体功能 ...
- CentOS更换python版本后,yum不可用的问题
因为yum调用了python,他的启动程序/usr/bin/yum就是一个python脚本 yum是不兼容 Python 2.7的,所以yum不能正常工作,我们需要指定 yum 的Python版本 将 ...
- Linux学习笔记总结--配置iptables防火墙
将原有的iptables 文件保存一份 cp -p /etc/sysconfig/iptables /etc/sysconfig/iptables.bak 清空现有的规则 iptables -F ip ...
- plupload使用指南(转)
转自http://www.cnblogs.com/2050/p/3913184.html 现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SWFUpload显然就有点过时了,毕 ...
- ajax大数据排队导出+进度条
描述 :我们现在有很多数据,分表存放,现在需要有精度条的导出.最后面有完整源码. 效果图:
- html响应式布局,css响应式布局,响应式布局入门
html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...
- Spring声明式事务(xml配置事务方式)
Spring声明式事务(xml配置事务方式) >>>>>>>>>>>>>>>>>>>& ...