最终效果如下所示:
这个效果是我们公司的一个模块的效果, 当时没有由于没有对 collectionView 仔细研究,所以对这个界面的实现机制并不是很熟悉, 到现在已经有段时间了, 这段时间对 collectionView 也加深了解了一些, 于是试着自己写一下试试(当时使我们公司一个大牛写的)
我打算分一下几步来实现这个效果:
- 实现圆形布局(这个布局效果在 Apple 的实例代码中有, 具体代码请自行 Google)
- 实现圆形的风火轮效果
- 对有些需要隐藏的位置进行隐藏
环形布局之前Apple 提供的代码中是直接根据角度计算的每个 Item 的位置, 我们也用同样的思考, 不同的是我们要将角度记录下来, 这个角度是跟 collectionView 的 contentOffset 有关的, 因为当用户在滑动的时候, contentOffset 在更新,这个时候应该重新根据 contentOffset 计算每个 Item 的角度 — 在心中有个印象
- 创建自定义布局
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#import <UIKit/UIKit.h> @interface CircleCollectionViewLayout : UICollectionViewLayout /** * 半径 */ @property (nonatomic, assign) CGFloat radius; /** * 大小 */ @property (nonatomic, assign) CGSize itemSize; @end - (instancetype)init { if (self = [super init]) { [self initial]; } return self; } - (instancetype)initWithCoder:(NSCoder *)aDecoder { if (self = [super initWithCoder:aDecoder]) { [self initial]; } return self; } - (void)initial { self.itemSize = CGSizeMake(ItemWidth, ItemHieght); self.radius = (CGRectGetWidth([UIScreen mainScreen].bounds))* 0.5f - ItemWidth - RightMargin; } |
定义好半径大小之后, 我们还需要个属性 相邻两个 Item之间的夹角是多少度于是我们在 extension 中定义 anglePerItem属性, 存储夹角, 并在 initial 中做初始化
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// item 大小 55 * 55 #define ItemWidth 55 #define ItemHieght ItemWidth #define RightMargin 5 @interface CircleCollectionViewLayout () // 单位夹角 @property (nonatomic, assign) CGFloat anglePerItem; @end - (void)initial { self.itemSize = CGSizeMake(ItemWidth, ItemHieght); self.radius = (CGRectGetWidth([UIScreen mainScreen].bounds) - ItemWidth)* 0.5f - RightMargin; // 单位夹角为 45度 self.anglePerItem = M_PI_2 / 2; } |
我们之前说过, 每个 Item 要有一个 angle, 用来确定在 contentOffset 时, 对应的 item 的角度是多少, 所以这个时候我们需要自定义 LayoutAttributes
自定义 LayoutAttributes
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
#import <UIKit/UIKit.h> @interface CircleCollectionViewLayoutAttributes : UICollectionViewLayoutAttributes // 锚点 @property (nonatomic, assign) CGPoint anchorPoint; // 角度 @property (nonatomicn-v">anchorPoint; // 角度 @property (nonatomic间对 collectionView 也加深了解了一些, 于是试着自己写一下试试(当时使我们公司一个大牛写的)
我打算分一下几步来实现这个效果:
环形布局之前Apple 提供的代码中是直接根据角度计算的每个 Item 的位置, 我们也用同样的思考, 不同的是我们要将角度记录下来, 这个角度是跟 collectionView 的 contentOffset 有关的, 因为当用户在滑动的时候, contentOffset 在更新,这个时候应该重新根据 contentOffset 计算每个 Item 的角度 — 在心中有个印象
定义好半径大小之后, 我们还需要个属性 相邻两个 Item之间的夹角是多少度于是我们在 extension 中定义 anglePerItem属性, 存储夹角, 并在 initial 中做初始化
我们之前说过, 每个 Item 要有一个 angle, 用来确定在 contentOffset 时, 对应的 item 的角度是多少, 所以这个时候我们需要自定义 LayoutAttributes 自定义 LayoutAttributes
|
