一个简单的横向滑动功能，可以通过UIScrollView来实现，如果涉及到分页滑动效果或者更进一步的动画实现，就需要通过设置scrollview的各种滑动状态对应的Delegate，来控制相关动效果实现。其实通过系统提供的UICollectionView，就能够省去一大部分关于控制滑动状态的工作，最近由于项目需要，研究了下UICollectionView的一些特性，以下就来说说具体的实现。
1.自定义分页效果
UICollectionView通过设置pageEnable = YES可以提供简单的分页滑动效果，不过这种设置只适用于内部cell之间的间距与边距一致的情况，如果需要自定义间距/边距，那么就需要我们自己去控制具体的移动距离了。
首先我们需要通过继承UICollectionViewFlowLayout类来自定义其子类，在子类中我们就能对UICollectionView的各种属性进行控制了：
@interface MHBannerCVFlowLayout()
@property (nonatomic, assign) UIEdgeInsets sectionInsets;
@property (nonatomic, assign) CGFloat miniLineSpace;
@property (nonatomic, assign) CGFloat miniInterItemSpace;
@property (nonatomic, assign) CGSize eachItemSize;
@property (nonatomic, assign) BOOL scrollAnimation;/**<是否有分页动画*/
@property (nonatomic, assign) CGPoint lastOffset;/**<记录上次滑动停止时contentOffset值*/
@end
@implementation MHSquareBannerCVFlowLayout
/*初始化部分*/
- (instancetype)initWithSectionInset:(UIEdgeInsets)insets andMiniLineSapce:(CGFloat)miniLineSpace andMiniInterItemSpace:(CGFloat)miniInterItemSpace andItemSize:(CGSize)itemSize
{
self = [self init];
if (self) {
//基本尺寸/边距设置
self.sectionInsets = insets;
self.miniLineSpace = miniLineSpace;
self.miniInterItemSpace = miniInterItemSpace;
self.eachItemSize = itemSize;
}
return self;
}
- (instancetype)init
{
self = [super init];
if (self) {
_lastOffset = CGPointZero;
}
return self;
}
-(void)prepareLayout
{
[super prepareLayout];
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;// 水平滚动
/*设置内边距*/
self.sectionInset = _sectionInsets;
self.minimumLineSpacing = _miniLineSpace;
self.minimumInteritemSpacing = _miniInterItemSpace;
self.itemSize = _eachItemSize;
/**
* decelerationRate系统给出了2个值：
* 1. UIScrollViewDecelerationRateFast（速率快）
* 2. UIScrollViewDecelerationRateNormal（速率慢）
* 此处设置滚动加速度率为fast，这样在移动cell后就会出现明显的吸附效果
*/
self.collectionView.decelerationRate = UIScrollViewDecelerationRateFast;
}
完成UICollectionViewFlowLayout子类的初始化后，接下来就可以开始着手分析滑动效果了。UICollectionView是UIScrollView的子类，所以UIScrollView拥有的delegate在UICollectionView中都能使用，但是由于状态繁多，加上很多功能在UICollectionView中系统已经帮我们实现了，所以我们只用去关心UICollectionViewLayout是否能提供更加高度抽象的方法给我们来操作即可。当然，系统这里已经给出了两个测算滑动停止位置的方法：
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity;
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset NS_AVAILABLE_IOS(7_0);
两个方法都能获取系统给出的滑动预计停止点，第一个方法里面多出了一个速率值，这里我们使用第一个方法来自定义出pageEnable=YES的效果：
/**
* 这个方法的返回值，就决定了collectionView停止滚动时的偏移量
*/
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
CGFloat pageSpace = [self stepSpace];//计算分页步距
CGFloat offsetMax = self.collectionView.contentSize.width - (pageSpace + self.sectionInset.right + self.miniLineSpace);
CGFloat offsetMin = 0;
/*修改之前记录的位置，如果小于最小contentsize或者大于最大contentsize则重置值*/
if (_lastOffset.x<offsetMin)
{
_lastOffset.x = offsetMin;
}
else if (_lastOffset.x>offsetMax)
{
_lastOffset.x = offsetMax;
}
CGFloat offsetForCurrentPointX = ABS(proposedContentOffset.x - _lastOffset.x);//目标位移点距离当前点的距离绝对值
CGFloat velocityX = velocity.x;
BOOL direction = (proposedContentOffset.x - _lastOffset.x) > 0;//判断当前滑动方向,手指向左滑动：YES；手指向右滑动：NO
if (offsetForCurrentPointX > pageSpace/8. && _lastOffset.x>=offsetMin && _lastOffset.x<=offsetMax)
{
NSInteger pageFactor = 0;//分页因子，用于计算滑过的cell个数
if (velocityX != 0)
{
/*滑动*/
pageFactor = ABS(velocityX);//速率越快，cell滑过数量越多
}
else
{
/**
* 拖动
* 没有速率，则计算：位移差/默认步距=分页因子
*/
pageFactor = ABS(offsetForCurrentPointX/pageSpace);
}
/*设置pageFactor上限为2, 防止滑动速率过大，导致翻页过多*/
pageFactor = pageFactor<1?1:(pageFactor<3?1:2);
CGFloat pageOffsetX = pageSpace*pageFactor;
proposedContentOffset = CGPointMake(_lastOffset.x + (direction?pageOffsetX:-pageOffsetX), proposedContentOffset.y);
}
else
{
/*滚动距离，小于翻页步距一半，则不进行翻页操作*/
proposedContentOffset = CGPointMake(_lastOffset.x, _lastOffset.y);
}
//记录当前最新位置
_lastOffset.x = proposedContentOffset.x;
return proposedContentOffset;
}
/**
*计算每滑动一页的距离：步距
*/
-(CGFloat)stepSpace
{
return self.eachItemSize.width + self.miniLineSpace;
}
ok，到此为止，分页滑动的效果已经出来了，简单来说，重点在3个方面：
- 设定好固定翻页距离
- 计算并限制翻页数量
- 设定翻页触发条件(这里我设置的触发点是，滑动距离超过翻页距离的1/8即可翻页)
通过以上3个数据就可以计算得到自定义滑动停止点的值，直接修改系统给出的值即可。
2.简单的切换效果
ok，分页滑动已经搞定了，接下来就加入点效果，给分页滑动锦上添花。
所有涉及到手势动效的，都会涉及到两个概念：位移量、动画算法，前者好说，基于UIScrollView的子类控件都可以很方便的获取手指在屏幕上的位移量，但是对于动画算法，就需要相关的数学知识了，一个简单的缩放动画我们可以通过这篇文章 来了解下相关概念，这里不在赘述。
再来看看UICollectionViewFlowLayout类中有没有可以捕获到手势位移量的方法，我们会发现，除了上述的- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity;方法外，没有其他有关于位移量描述的方法了，那么换个思路来想，在滑动UICollectionView时，其中的Cell是会不停的刷新，那么只要找到控制SubView刷新的方法，其实就能解决这个问题。那么我们在UICollectionViewFlowLayout中就找到了这个方法：-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect此方法给出了一个当前滑动范围，通过这个值，我们能得到对应区域内的所有subview的UICollectionViewLayoutAttributes，进一步转换就能获取到对应的subview实例，那么在此基础上进行动画设定就很容易了。
下面放代码，动画算法我就直接套用上面链接文章中现成的：
/**
* 当collectionView的显示范围发生改变的时候，是否需要重新刷新布局
* 一旦重新刷新布局，就会重新调用 layoutAttributesForElementsInRect:方法
*/
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
/**
*防止报错先复制attributes
*/
- (NSArray *)getCopyOfAttributes:(NSArray *)attributes
{
NSMutableArray *copyArr = [NSMutableArray new];
for (UICollectionViewLayoutAttributes *attribute in attributes) {
[copyArr addObject:[attribute copy]];
}
return copyArr;
}
/**
*设置放大动画
*/
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
/*获取rect范围内的所有subview的UICollectionViewLayoutAttributes*/
NSArray *arr = [self getCopyOfAttributes:[super layoutAttributesForElementsInRect:rect]];
/*动画计算*/
if (self.scrollAnimation)
{
/*计算屏幕中线*/
CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.bounds.size.width/2.0f;
/*刷新cell缩放*/
for (UICollectionViewLayoutAttributes *attributes in arr) {
CGFloat distance = fabs(attributes.center.x - centerX);
/*移动的距离和屏幕宽度的的比例*/
CGFloat apartScale = distance/self.collectionView.bounds.size.width;
/*把卡片移动范围固定到 -π/4到 +π/4这一个范围内*/
CGFloat scale = fabs(cos(apartScale * M_PI/4));
/*设置cell的缩放按照余弦函数曲线越居中越趋近于1*/
CATransform3D plane_3D = CATransform3DIdentity;
plane_3D = CATransform3DScale(plane_3D, 1, scale, 1);
attributes.transform3D = plane_3D;
}
}
return arr;
}
到此为止，整个分页滑动加切换效果都已经完成了，对于这部分难点，还是在于想法和对应动画的算法，我尝试了几种仿3D切换效果，找准位移量和动画效果之间的关系不太容易，除了根据对应数学方法之外，只能依靠直觉慢慢调试了，哈哈哈，不太推荐这么做。
