前端之家收集整理的这篇文章主要介绍了
Swift-UICollectionView布局之线性布局,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Swift-UICollectionView布局之线性布局
应用场景
- 轮播图(AppStore)
- 数据展示(招商银行账单页)
- 图片查看器
实现思路
- 线性布局,在二维平面上滚动,所以继承自流水布局(
UICollectionViewFlowLayout
)
- 流水布局提供一下属性:
- itemSize
- sectionInset
- scrollDirection
- minimumLineSpacing
- 每个cell都对应一个布局属性(
UICollectionViewLayoutAttributes
),布局属性决定cell怎么排布,我们只需要修改布局属性,就可以随意设置cell显示效果了
实现步骤
创建线性布局类LinerLayout
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
}
public var minScaleW = InnerConstant.MinScaleW
public var minScaleH = InnerConstant.MinScaleH
public var setAlpha = InnerConstant.SetAlpha
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()
}
layoutAttributesForElementsInRect
override public func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let array = super.layoutAttributesForElementsInRect(rect) ?? []
var attributesCopy = [UICollectionViewLayoutAttributes]()
for itemAttributes in array {
let itemAttributesCopy = itemAttributes.copy() as! UICollectionViewLayoutAttributes
attributesCopy.append(itemAttributesCopy)
}
let centerX = collectionView!.contentOffset.x + collectionView!.frame.size.width * 0.5
for attrs in attributesCopy {
let delta = abs(centerX - attrs.center.x)
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)
attrs.transform =CGAffineTransformMakeScale(scaleW,scaleH)
if setAlpha {
attrs.alpha = abs(alpha)
}
}
return attributesCopy
}
shouldInvalidateLayoutForBoundsChange
override public func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
return true
}
targetContentOffsetForProposedContentOffset
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) ?? []
let centerX = proposedContentOffset.x + collectionView!.frame.size.width * 0.5
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版本迁移过来的,只是语法不同!但运行的时候,出现了若干警告!解决办法如下:
使用示例
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
}