自定义UICollectionView布局

一直以来想学习怎么样去自定义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的定义如下：