功能概述和预览
功能描述:WSL_RollView 是基于UICollectionView实现的支持水平和垂直两个方向上的的分页和渐进循环轮播效果,可以设置时间间隔、渐进速率、是否循环、分页宽度和间隔,还支持高度自定义分页视图的控件。
一、实现方法
1.1、 首先用UICollectionView和计时器实现一个基本的水平滚动效果,如下图,这个太简单就不在此详述。
1.2、对比上面的效果图,我们还需要解决分页的宽度和循环滚动的问题。
自定义分页宽度:默认的分页宽度是UICollectionView的宽度,所以当分页宽度的不等于UICollectionView的宽度或分页间隔不等于0时会出现错误,这时就需要我们通过自定义UICollectionViewFlowLayout来实现效果。
/** 返回值决定了collectionView停止滚动时的偏移量 手指松开后执行
* proposedContentOffset:原本情况下,collectionView停止滚动时最终的偏移量
* velocity 滚动速率,通过这个参数可以了解滚动的方向
*/
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{
if (_scrollStyle == WSLRollViewScrollStylePage) {
CGSize size = self.collectionView.frame.size;
// 计算可见区域的面积
CGRect rect = CGRectMake(proposedContentOffset.x, proposedContentOffset.y, size.width, size.height);
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 标记 cell 的中点与 UICollectionView 中点最小的间距
CGFloat minDetal = MAXFLOAT;
if (self.scrollDirection == UICollectionViewScrollDirectionHorizontal){
// 计算 CollectionView 中点值
CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
for (UICollectionViewLayoutAttributes *attrs in array){
if (ABS(minDetal) > ABS(centerX - attrs.center.x)){
minDe