Swift-UICollectionView布局之線性布局

應(yīng)用場(chǎng)景

• 輪播圖（AppStore）
• 數(shù)據(jù)展示（招商銀行賬單頁(yè)）
• 圖片查看器

實(shí)現(xiàn)思路

• 線性布局，在二維平面上滾動(dòng)，所以繼承自流水布局(UICollectionViewFlowLayout)
• 流水布局提供一下屬性：
  • itemSize
  • sectionInset
  • scrollDirection
  • minimumLineSpacing
• 每個(gè)cell都對(duì)應(yīng)一個(gè)布局屬性(UICollectionViewLayoutAttributes)，布局屬性決定cell怎么排布，我們只需要修改布局屬性，就可以隨意設(shè)置cell顯示效果了

實(shí)現(xiàn)步驟

創(chuàng)建線性布局類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
// 是否需要設(shè)置alpha
public var setAlpha = InnerConstant.SetAlpha
// alpha 最小的縮放比
public var minAlpha = InnerConstant.MinAlpha

重寫父類方法

prepareLayout

///  準(zhǔn)備操作  設(shè)置一些初始化參數(shù)
override public func prepareLayout() {
    let inset = (collectionView!.frame.size.width - itemSize.width) * 0.5
    sectionInset = UIEdgeInsetsMake(0, inset, 0, inset)
    // 要后調(diào)用super.prepareLayout()方法，否則有很多警告……
    // http://stackoverflow.com/questions/32082726/the-behavior-of-the-uicollectionviewflowlayout-is-not-defined-because-the-cell
    super.prepareLayout()
}

layoutAttributesForElementsInRect

///
///  返回collectionView上面當(dāng)前顯示的所有元素（比如cell）的布局屬性:這個(gè)方法決定了cell怎么排布
///  每個(gè)cell都有自己對(duì)應(yīng)的布局屬性：UICollectionViewLayoutAttributes
///  要求返回的數(shù)組中裝著UICollectionViewLayoutAttributes對(duì)象
///
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)
    }

    // 計(jì)算 CollectionView 的中點(diǎn)
    let centerX = collectionView!.contentOffset.x + collectionView!.frame.size.width * 0.5
    for attrs in attributesCopy {
        // 計(jì)算 cell 中點(diǎn)的 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

///  當(dāng)collectionView的bounds發(fā)生改變時(shí)，是否要刷新布局
///
///  一定要調(diào)用這個(gè)方法
override public func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
    return true
}

targetContentOffsetForProposedContentOffset

///  targetContentOffset ：通過(guò)修改后，collectionView最終的contentOffset(取決定情況)
///  proposedContentOffset ：默認(rèn)情況下，collectionView最終的contentOffset
override public func targetContentOffsetForProposedContentOffset(proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
    let size = collectionView!.frame.size
    // 計(jì)算可見區(qū)域的面積
    let rect = CGRectMake(proposedContentOffset.x, proposedContentOffset.y, size.width, size.height)
    let array = super.layoutAttributesForElementsInRect(rect) ?? []
    // 計(jì)算 CollectionView 中點(diǎn)值
    let centerX = proposedContentOffset.x + collectionView!.frame.size.width * 0.5
    // 標(biāo)記 cell 的中點(diǎn)與 UICollectionView 中點(diǎn)最小的間距
    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)
}

遇到的坑

因?yàn)槭菑腛C版本遷移過(guò)來(lái)的，只是語(yǔ)法不同！但運(yùn)行的時(shí)候，出現(xiàn)了若干警告！解決辦法如下：

• 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)
    // 設(shè)置布局屬性
    // 因?yàn)閷?duì)于不同的需求， itemSize、scrollDirection和minimumLineSpacing的值可能不同，所以沒(méi)有封裝到LinerLayout里面，調(diào)用方需要手動(dòng)設(shè)置
    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