教你用CollectionView做一个炫酷的旋转轮
原文链接： UICollectionView Custom Layout Tutorial: A Spinning Wheel
本文翻译有部分改动，使用OC编写，原文使用的是Swift，如有需要，可以去原文下载Swift Demo，文章最后会提供OC的Demo。
开始
首先，去下载一个初始项目，原文是用的xib做了一个collectionView，我直接用代码编写了，最后得到的效果是这样：
环形布局
在项目里创建一个CircularCollectionViewLayout，像这样
因为这是UICollectionViewLayout的子类，而不是UICollectionViewFlowLayout的子类，所以你需要处理所有layout的相关操作。
在CircularCollectionViewLayout里，创建itemSize和radius属性
let itemSize = CGSize(width: 133, height: 173)
var radius: CGFloat = 500 {
didSet {
invalidateLayout()
}
}
invalidateLayout的解释是：Call -invalidateLayout to indicate that the collection view needs to requery the layout information. 这里将该方法放在didset里，当radius属性改变时，你重新重新计算所有的属性进行布局。
在radius声明下面，定义一个anglePerItem
var anglePerItem: CGFloat {
return atan(itemSize.width / radius)
}
这个属性可以任意变化，不过这个方法可以保证使其不会间隔太远。
接下来，重写collectionViewContentSize方法来确定你的collection view的内容大小
override func collectionViewContentSize() -> CGSize {
return CGSize(width: CGFloat(collectionView!.numberOfItemsInSection(0)) * itemSize.width, height: CGRectGetHeight(collectionView!.bounds))
}
contentSize的高度应该和你的collectionView的高度一样，而宽度应该为 itemSize.width * numberOfItems。
现在，你还需要去把你的CollectionView的layout设置为CircularCollectionViewLayout。
自定义Layout Attributes
你需要自定义一个layout attributes继承自UICollectionViewLayoutAttributes来存储angular position 和 anchorPoint属性。
在CircularCollectionViewLayout文件里，该类的定义上面，添加一下代码
class CircularCollectionViewLayoutAttributes: UICollectionViewLayoutAttributes {
// 1
var anchorPoint = CGPoint(x: 0.5, y: 0.5)
var angle: CGFloat = 0 {
// 2
didSet {
zIndex = Int(angle * 1000000)
transform = CGAffineTransformMakeRotation(angle)
}
}
// 3
override func copyWithZone(zone: NSZone) -> AnyObject {
let copiedAttributes: CircularCollectionViewLayoutAttributes =
super.copyWithZone(zone) as! CircularCollectionViewLayoutAttributes
copiedAttributes.anchorPoint = self.anchorPoint
copiedAttributes.angle = self.angle
return copiedAttributes
}
}
你需要一个anchorPoint属性因为旋转不是围绕着item的中心点来的。
在设定angle属性时，设置transform为旋转，参数为angle radians。同时，你需要将右边的item叠在左边的item上，所以你设置了zIndex根据angle增大而增大。
最后，你需要重写copyWithZone方法，这样当你在copy该属性时，会将你自定义的两个属性也copy进去。
现在，回到CircularCollectionViewLayout 类，编写layoutAttributesClass方法
override class func layoutAttributesClass() -> AnyClass {
return CircularCollectionViewLayoutAttributes.self
}
这个方法将告知collectionView使用你自己创建的layoutAttributes类而不是默认的UICollectionViewLayoutAttributes。
为了保存所有的layout attributes的实例，创建一个数组attributesList在CircularCollectionViewLayout里
var attributesList = [CircularCollectionViewLayoutAttributes]()
准备Layout
当collectionView第一次显示在屏幕上时，UICollectionViewLayout会执行prepareLayout方法。这个方法在你调用invalidateLayout时也会执行。
这也是layout过程中最重要的部分，因为这是你创建和保存所有layout attributes的地方。
override func prepareLayout() {
super.prepareLayout()
let centerX = collectionView!.contentOffset.x + (CGRectGetWidth(collectionView!.bounds) / 2.0)
attributesList = (0..0)).map { (i)
-> CircularCollectionViewLayoutAttributes in
// 1
let attributes = CircularCollectionViewLayoutAttributes(forCellWithIndexPath: NSIndexPath(forItem: I,
inSection: 0))
attributes.size = self.itemSize
// 2
attributes.center = CGPoint(x: centerX, y: CGRectGetMidY(self.collectionView!.bounds))
// 3
attributes.angle = self.anglePerItem*CGFloat(i)
return attributes
}
}
简单点说，你对每个index path下的item做了一次遍历，然后：
为每个index path创建CircularCollectionviewLayoutAttributes， 并设置它的大小。
将每个item都放在屏幕中央。
根据anglePerItem * I，将所有item旋转。
此外，你还需要重写下面这些方法。并且这些方法将经常被执行，所以要注意它们的效率。
override func layoutAttributesForElementsInRect(rect: CGRect) -> [AnyObject]? {
return attributesList
}
override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes! {
return attributesList[indexPath.row]
}
运行程序，你会发现得到了一个这样子的collectionView
Anchor Point
回到prepareLayout方法，在centerX定义下面，加上
let anchorPointY = ((itemSize.height / 2.0) + radius) / itemSize.height
然后在map闭包里，return前，加上
attributes.anchorPoint = CGPoint(x: 0.5, y: anchorPointY)
然后在CircularCollectionViewCell里，重写applyLayoutAttributes方法
override func applyLayoutAttributes(layoutAttributes: UICollectionViewLayoutAttributes!) {
super.applyLayoutAttributes(layoutAttributes)
let circularlayoutAttributes = layoutAttributes as! CircularCollectionViewLayoutAttributes
self.layer.anchorPoint = circularlayoutAttributes.anchorPoint
self.center.y += (circularlayoutAttributes.anchorPoint.y - 0.5) * CGRectGetHeight(self.bounds)
}
这里，你用父类的方法来提供center，transform等等哪些默认已有的属性，而自定义的属性achorPoint需要我们自己手动作用在cell上。
再运行之后，
修复滚动效果
回到CircularCollectionViewLayout，然后在类的底部加上
override func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
return true
}
这里返回true来告诉collectionView，每当滚动时，就重新计算layout，这也会调用prepareLayout方法。
下面，添加几个参数
var angleAtExtreme: CGFloat {
return collectionView!.numberOfItemsInSection(0) > 0 ?
-CGFloat(collectionView!.numberOfItemsInSection(0) - 1) * anglePerItem : 0
}
var angle: CGFloat {
return angleAtExtreme * collectionView!.contentOffset.x / (collectionViewContentSize().width -
CGRectGetWidth(collectionView!.bounds))
}
然后在prepareLayout里，将这句
attributes.angle = (self.anglePerItem * CGFloat(i))
替换成
attributes.angle = self.angle + (self.anglePerItem * CGFloat(i))
这句代码将angle添加给了每个item，再运行你会发现，已经成功啦。
优化
在prepareLayout里，你给每个item都创建了attributes，但是并不是每个都显示在了屏幕里，其实那些没有显示出来的item，你完全可以跳过计算。
添加下面这段代码到prepareLayout方法的anchorPointY定义下面
// 1
let theta = atan2(CGRectGetWidth(collectionView!.bounds) / 2.0,
radius + (itemSize.height / 2.0) - (CGRectGetHeight(collectionView!.bounds) / 2.0))
// 2
var startIndex = 0
var endIndex = collectionView!.numberOfItemsInSection(0) - 1
// 3
if (angle < -theta) {
startIndex = Int(floor((-theta - angle) / anglePerItem))
}
// 4
endIndex = min(endIndex, Int(ceil((theta - angle) / anglePerItem)))
// 5
if (endIndex < startIndex) {
endIndex = 0
startIndex = 0
}
你可以在原文看到这个算法是如何判定哪些item在屏幕内的。
当你知道了这些以后，你需要在prepareLayout方法里将
attributesList = (0..0 )).map { (i)
-> CircularCollectionViewLayoutAttributes in
替换成
attributesList = (startIndex...endIndex).map { (i)
-> CircularCollectionViewLayoutAttributes in
然后就大功告成啦！！！
最后附上我改写的OC项目的链接： CircleCollectionViewDemo
作者：Msoso
链接：https://www.jianshu.com/p/a4f796342e94
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
