Swift-UICollectionView布局之线性布局
2016-05-20 17:11
519 查看
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-cellhttp://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 }
相关文章推荐
- OC混编swift时EMBEDDED_CONTENT_CONTAINS_SWIFT错误的处理
- IOS-swift 动画03 CAAnimationGroup
- swift 中的问号跟感叹号
- Swift 元组
- 设置导航栏的标题 背景颜色和字体大小
- Swift 学习笔记(五)
- Swift-Swift - 访问控制(private,internal,public)
- Swift-协议
- Swift-扩展
- Swift-错误处理
- Swift-类型转换
- Swift-过滤器
- Swift-条件语句
- Swift-可空链式调用
- Swift-自动引用计数
- Swift-析构过程
- Swift-构造过程
- Swift-继承
- Swift-下标脚本
- Swift-方法