为什么重复造轮子?
因为大多数banner都是无缝滚动,有卡片缩放效果的又没有PageControl,且PageControl样式不支持自定义,所以根据自己项目需求和UI需求,造了一个轮子,希望分享出来能对大家有帮助,好用的话点个星
gif介绍
原理分析
UICollectionView无限轮播,网上有很多demo是利用数组复制100份,甚至1000份,利用cell复用机制,达到"无限轮播"的效果.
这种方案太简单粗暴,当然很实用.我是用另一种方案做的
-
无限轮播原理
-
无缝轮播图
原理很简单,比如有一个数组@[@"1",@"2",@"3"],无缝轮播就是在数组首元素插入尾元素的拷贝,尾元素加上首元素的拷贝,即@[@"3,"@"1",@"2",@"3",@"1"];这样的话刚赋值,当前位置的数组下标是1,也就是@"1",向左滚动,当滚动到下标4即@"1"的时候,让其collectionView.contentOffset.x无动画的回到下标1即@"1"上(界面无感知);同理,向右滚动,滚动到下标0即@"3"的时候,回到下标3即@"3";
-
有间隙且放大效果轮播图
同上,只不过由于放大效果,能看到左右两个cell露出的边,所以变成了@[@"2",@"3,"@"1",@"2",@"3",@"1",@"2"];向左滚动,下标5即@"1"变成下标2即@"1";向右滚动,下标1即@"3"变成下标4即@"3"然后剩下的就是偏移量的计算了,贴核心代码
#pragma mark UIScrollViewDelegate - (void)scrollViewDidScroll:(UIScrollView *)scrollView { [self scrollViewBorderJudge]; } - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { if ([self scrollViewBorderJudge]) { [self handCellSeleceLocation]; } } - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { if (self.autoScroll) { [self invalidateTimer]; } } - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate { if (!decelerate) {//不减速 if ([self scrollViewBorderJudge]) { [self handCellSeleceLocation]; } } if (self.autoScroll) { [self createTimer]; } } #pragma mark 边界以及cell位置处理 //处理边界条件 返回YES代表未触发边界条件,且满足_dataImgs.count > 0 - (BOOL)scrollViewBorderJudge { if (_dataImgs.count > 0) { if (_collectionView.contentOffset.x <= BannerOffsetWidth*1-BannerOffsetleft) {//左侧边界(正数第二个)->倒数第三个 _collectionView.contentOffset = CGPointMake(BannerOffsetWidth*(_dataImgs.count-3)-BannerOffsetleft, 0); _selectedIndex = _dataImgs.count-5; _pageControl.currentPage = _selectedIndex; return NO; } else if (_collectionView.contentOffset.x >= BannerOffsetWidth*(_dataImgs.count-2)-BannerOffsetleft) {//右侧边界(倒数第二个)->正数第三个 _collectionView.contentOffset = CGPointMake(BannerOffsetWidth*2-BannerOffsetleft, 0); _selectedIndex = 0; _pageControl.currentPage = _selectedIndex; return NO; } return YES; } return NO; } //滚动停止确保cell在中间 - (void)handCellSeleceLocation { CGFloat OffsetIndex = (_collectionView.contentOffset.x+_line+_showLine)/BannerOffsetWidth; NSInteger index = (NSInteger)((_collectionView.contentOffset.x+_line+_showLine)/BannerOffsetWidth); if ((NSInteger)(OffsetIndex*100)%100 <= 50) { [_collectionView setContentOffset:CGPointMake(BannerOffsetWidth*index-BannerOffsetleft, 0.0) animated:YES]; _selectedIndex = index-2; } else { [_collectionView setContentOffset:CGPointMake(BannerOffsetWidth*(index+1)-BannerOffsetleft, 0.0) animated:YES]; _selectedIndex = index-1; } _pageControl.currentPage = _selectedIndex; }
-
-
Cell卡片放大效果
继承UICollectionViewFlowLayout,重写layoutAttributesForElementsInRect:方法,根据偏移量计算,执行3D旋转动画;
//允许更新位置, 这个如果不写,一个循环内卡片越来越小,最后等循环结束开始下个循环时,cell重置大小
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)oldBounds
{
return YES;
}
- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray* array = [super layoutAttributesForElementsInRect:rect];
CGRect visibleRect;
visibleRect.origin = self.collectionView.contentOffset;
visibleRect.size = self.collectionView.bounds.size;
[array enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
UICollectionViewLayoutAttributes* attributes = (UICollectionViewLayoutAttributes *)obj;
CGFloat distance = CGRectGetMidX(visibleRect) - attributes.center.x;
CGFloat normalizedDistance = ABS(distance/BannerOffsetWidth);
CGFloat zoom = 1 - ZoomFactor*normalizedDistance;
attributes.transform3D = CATransform3DMakeScale(1.0, zoom, 1.0);
attributes.zIndex = 1;
}];
return array;
}
- 自定义pageControl
继承UIPageControl,重写layoutSubviews方法,自己计算圆点之间间距,圆点尺寸,切圆角;如果喜欢的话,也可以做成自定义图片
- (void)layoutSubviews
{
[super layoutSubviews];
self.userInteractionEnabled = NO;
CGFloat allW = (self.subviews.count - 1)*(PageW+PageLine)+CurrentW;
CGFloat originX = self.frame.size.width/2-allW/2;
for (int i = 0; i < self.subviews.count; i++) {
UIView *view = self.subviews[i];
if (i == self.currentPage) {//当前page
view.frame = CGRectMake(originX+ i*(PageW+PageLine), view.frame.origin.y, CurrentW, CurrentH);
} else if (i > self.currentPage) {
view.frame = CGRectMake(originX+ i * (PageW+PageLine)+(CurrentW-PageW), view.frame.origin.y, PageW, PageH);
} else {
view.frame = CGRectMake(originX+ i * (PageW+PageLine), view.frame.origin.y, PageW, PageH);
}
view.layer.cornerRadius = 1;
view.layer.masksToBounds = YES;
}
}
结语
- 有用的话,希望大家点个赞再走;
- 有bug或者其他问题,也希望能issues或者发邮箱
