Swift-UICollectionView布局之线性布局

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
}