一直以来想学习怎么样去自定义UICollectionViewLayout,但总是感觉太难,一直以来,都是看了一点点就放弃了。但其实任何事,只要去做了,就会发现,其实远没有想像的那么难。所以以后我遇事也要多动手。
废话说在前面
我之前尝试过去写这样一个关卡选择的功能,但是总是写不出来,后来同事用一个UIScrollView简单的写了一个,但是效果完全不给力,不但动画很生硬,而且没有复用机制。当关卡一多的时候,就会有很明显的卡顿,所以被我否决了。后来我想到了利用第三方库iCarousel来实现,但是并没有我所需要的效果,虽然可以自定义,但老实说我确实没有那种研究精神,而且我发现iCarousel与xib的结合使用似乎不太好。但出于简单省时的目的,我还是简单的修改了iCarousel的代码得到我需要的效果,但是同事却发现了其他的问题,于是最终还是决定自己实现一个,当然要实现这样的功能,当然是通过自定义UICollectionViewLayout来实现。本来我是在网上找资料,但是不知道是本性还是怎么,看一点就不想看下去了。我感觉没有一篇详细说明每个步骤的博文,所以决定把自己的实现过程纪录下来,供和我有同样需求的朋友参考。
效果展示
上面废话有点多,还是直接一点,上效果图吧。
效果虽然很简单,但基本也能概括自定义UICollectionViewLayout的必要步骤吧。
CustomCarCollectionViewFlowLayout类的定义
CustomCarCollectionViewFlowLayout其实如果继承自UICollectionViewFlowLayout会很简单的实现该效果,但是我之所以让其继承自UICollectionViewLayout的原因主要是有两点:1、我自己想利用这次机会好好学习一下自定义。2、继承自UICollectionViewFlowLayout很多方面都不好控制,而继承自UICollectionViewLayout完全自由,定义如下:
@interface CustomCardCollectionViewFlowLayout : UICollectionViewLayout
@property(nonatomic, assign) CGFloat internalItemSpacing;
@property(nonatomic, assign) CGSize itemSize;
@property(nonatomic, assign) UIEdgeInsets sectionEdgeInsets;
@property(nonatomic, assign) CGFloat scale;
@property(nonatomic, assign) NSInteger currentItemIndex;
@property(nonatomic, assign) id<CustomCardCollectionViewFlowLayoutDelegate> delegate;
@end
类说明
属性说明
internalItemSpacing
@property(nonatomic, assign) CGFloat internalItemSpacing;
这个属性其实是参考了UICollectionViewFlowLayout里面的minimumInterItemSpacing,该属性表示每个Cell之间的间隔,不过UICollectionViewFlowLayout里的是指最小的,可变的。而internalItemSpacing则不可变
itemSize
@property(nonatomic, assign) CGSize itemSize;
这个也是参考的UICollectionViewFlowLayout,该属性表示每个Cell的大小
sectionEdgeInsets
@property(nonatomic, assign) UIEdgeInsets sectionEdgeInsets;
还是参考的UICollectionViewFlowLayout,该属性表示每个section之间的间距
scale
@property(nonatomic, assign) CGFloat scale;
即表示左边或右边的Cell的缩放系数,当Cell走到最左边或最右边的时候将会被缩放成指定的大小。
currentItemIndex
@property(nonatomic, assign) NSInteger currentItemIndex;
表示当前在中央的Cell在UICollectionView中的索引,只有当Cell处于最中间的时候才会设置。
代理定义
CustomCardCollectionViewFlowLayoutDelegate的定义如下: