Swift-UICollectionView布局之线性布局

应用场景

• 轮播图（AppStore）
• 数据展示（招商银行账单页）
• 图片查看器

实现思路

• 线性布局，在二维平面上滚动，所以继承自流水布局(UICollectionViewFlowLayout)
• 流水布局提供一下属性：
  
  • itemSize
  • sectionInset
  • scrollDirection
  • minimumLineSpacing
• 每个cell都对应一个布局属性(UICollectionViewLayoutAttributes)，布局属性决定cell怎么排布，我们只需要修改布局属性，就可以随意设置cell显示效果了

实现步骤

创建线性布局类LinerLayout

// 继承自UICollectionViewFlowLayoutpublic class LinerLayout: UICollectionViewFlowLayout {}

私有属性

// 常量private struct InnerConstant {    static let MinScaleW: CGFloat = 0.8    static let MinScaleH: CGFloat = 0.3    static let MinAlpha: CGFloat = 0    static let SetAlpha = true}

公开属性

// width最小的缩放比public var minScaleW = InnerConstant.MinScaleW// height最小的缩放比public var minScaleH = InnerConstant.MinScaleH// 是否需要设置alphapublic var setAlpha = InnerConstant.SetAlpha// alpha 最小的缩放比public var minAlpha = InnerConstant.MinAlpha

重写父类方法

prepareLayout

///  准备操作  设置一些初始化参数override public func prepareLayout() {    let inset = (collectionView!.frame.size.width - itemSize.width) * 0.5    sectionInset = UIEdgeInsetsMake(0, inset, 0, inset)    // 要后调用super.prepareLayout()方法，否则有很多警告……    // http://stackoverflow.com/questions/32082726/the-behavior-of-the-uicollectionviewflowlayout-is-not-defined-because-the-cell    super.prepareLayout()}

layoutAttributesForElementsInRect

//////  返回collectionView上面当前显示的所有元素（比如cell）的布局属性:这个方法决定了cell怎么排布///  每个cell都有自己对应的布局属性：UICollectionViewLayoutAttributes///  要求返回的数组中装着UICollectionViewLayoutAttributes对象///override public func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {    // 屏幕上显示的cell    let array = super.layoutAttributesForElementsInRect(rect) ?? []    // This is likely occurring because the flow layout subclass GalaryManager.LinerLayout is modifying attributes returned by UICollectionViewFlowLayout without copying them    // http://stackoverflow.com/questions/32720358/xcode-7-copy-layoutattributes    var attributesCopy = [UICollectionViewLayoutAttributes]()    for itemAttributes in array {        let itemAttributesCopy = itemAttributes.copy() as! UICollectionViewLayoutAttributes        // add the changes to the itemAttributesCopy        attributesCopy.append(itemAttributesCopy)    }    // 计算 CollectionView 的中点    let centerX = collectionView!.contentOffset.x + collectionView!.frame.size.width * 0.5    for attrs in attributesCopy {        // 计算 cell 中点的 x 值 与 centerX 的差值        let delta = abs(centerX - attrs.center.x)        // W：[0.8 ~ 1.0]        // H：[0.3 ~ 1.0]        // 反比        let baseScale = 1 - delta / (collectionView!.frame.size.width + itemSize.width)        let scaleW = minScaleW + baseScale * (1 - minScaleW)        let scaleH = minScaleH + baseScale * (1 - minScaleH)        let alpha = minAlpha + baseScale * (1 - minAlpha)        // 改变transform（越到中间 越大）        attrs.transform =CGAffineTransformMakeScale(scaleW, scaleH)        if setAlpha {            // 改变透明度（越到中间 越不透明）            attrs.alpha = abs(alpha)        }    }    return attributesCopy}

shouldInvalidateLayoutForBoundsChange

///  当collectionView的bounds发生改变时，是否要刷新布局//////  一定要调用这个方法override public func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {    return true}

targetContentOffsetForProposedContentOffset

///  targetContentOffset ：通过修改后，collectionView最终的contentOffset(取决定情况)///  proposedContentOffset ：默认情况下，collectionView最终的contentOffsetoverride public func targetContentOffsetForProposedContentOffset(proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {    let size = collectionView!.frame.size    // 计算可见区域的面积    let rect = CGRectMake(proposedContentOffset.x, proposedContentOffset.y, size.width, size.height)    let array = super.layoutAttributesForElementsInRect(rect) ?? []    // 计算 CollectionView 中点值    let centerX = proposedContentOffset.x + collectionView!.frame.size.width * 0.5    // 标记 cell 的中点与 UICollectionView 中点最小的间距    var minDetal = CGFloat(MAXFLOAT)    for attrs in array {        if abs(minDetal) > abs(centerX - attrs.center.x) {            minDetal = attrs.center.x - centerX        }    }    return CGPointMake(proposedContentOffset.x + minDetal, proposedContentOffset.y)}

遇到的坑

因为是从OC版本迁移过来的，只是语法不同！但运行的时候，出现了若干警告！解决办法如下：

• http://stackoverflow.com/questions/32082726/the-behavior-of-the-uicollectionviewflowlayout-is-not-defined-because-the-cell

• http://stackoverflow.com/questions/32720358/xcode-7-copy-layoutattributes

使用示例

override func viewWillAppear(animated: Bool) {    super.viewWillAppear(animated)    // 设置布局属性    // 因为对于不同的需求， itemSize、scrollDirection和minimumLineSpacing的值可能不同，所以没有封装到LinerLayout里面，调用方需要手动设置    let width = collectionView!.frame.size.width * 0.69    let height = collectionView!.frame.size.height * 0.71    layout.itemSize = CGSizeMake(width, height)    layout.scrollDirection = .Horizontal    layout.minimumLineSpacing = 10}