标签:
一般我们自定义布局都会新建一个类,继承自UICollectionViewFlowLayout,然后重写几个方法:
// MARK: 属性 /** cell的个数 */ var itemCount: Int? /** 布局信息 */ var layoutAttributes = [UICollectionViewLayoutAttributes]()
// 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)
标签:
原文地址:http://www.cnblogs.com/Alex-sk/p/5572275.html