Swift-UICollectionView布局之线性布局

应用场景

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

实现思路

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

实现步骤

创建线性布局类LinerLayout

// 继承自UICollectionViewFlowLayout
public 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
// 是否需要设置alpha
public 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最终的contentOffset
override 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
}

自定义流水布局使用示例.gif