公司做的是 iPad 端的软件,iPad 端软件因为屏幕比较宽,所以轮播图一般和 App Store for iPad (如下图) 上的风格保持一致!
IMG_0001.jpg
github 上面关于轮播的一般都是适用于 iPhone 风格的,如图下:
image.png
不适用 iPad 风格,所以我还是自己去实现这种效果,下面分享一下实现思路:
讲到无限轮播图,我们第一思路是:使用UICollectionView来显示所有的图片,然后把 pagingEnabled 属性设置为 YES,再加个定时器,就可以实现轮播的效果!要实现循环轮播的话,思路如下:
如图:我们要实现无限循环轮播5张图片,分别为图1,图2,图3,图4,图5!我们需要两张冗余的图片,在图1之前放一张图5,在图5之后放一张图1。
image.png
- 我们在显示之前,先静默滑动到第二张图片,也就是我们要的图1;
- 当我们向右滑动到下图红框的图5,滑动结束后,我们静默滑动到右边的图5,这样我们又可以左右滑动。
- 当我们向左滑动到最后红框的图1,滑动结束后,我们静默滑动到左边的图1,这样我们又可以左右滑动。
- 最终给用户的效果就是无限循环轮播的效果
这种效果全屏的图形是没问题的,但是如果要实现 iPad 上的那种效果的话,不可行!
原因:上述方法中虽然我们可以通过以下方法来改变最终我们滑动结束后的位置!
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset;
但是当我们把pagingEnabled属性设置为 YES 之后,以上方法就不起作用了,因为我们设置必须是一页一页显示,然而我们要的效果是一页显示中间一个完整图形,旁边两个半图形,这种效果达不到!
左思右想,既然使用已有的控件行不通,不如自己实现这种效果,
实现思路如下:
- 我们先自定义一个 Cell 视图,在 Cell 上面有一个 UIImageView,和一个 UILabel!
- 然后创建5个Cell 视图,如下图
image.png
- 初始化上图内容
- 为他们的父视图添加左右滑动手势
- 左滑手势事件: 首先图1的 frame 设置为图5的 frame,然后图2,图3,图4,图5做向左移动上图红线距离的动画,我们实现了向左滑动的效果!
- 右滑手势事件: 首先图5的 frame 设置为图1的 frame,然后图1,图2,图3,图4做向右移动上图红线距离的动画,我们实现了向右滑动的效果!
- 如果有超过5张图片需要显示,我们可以统一处理:
- 向左滑动时图片数组向后移动一位,超出则到第一位,即我们可以使用(currentIndex + 1) % imageCount 来求数组下标,获取显示图片
- 向右滑动时图片数组向前移动一位,小于0则到到最后一位,即我们可以使用(currentIndex + imageCount - 1) % imageCount 来求数组下标,获取显示图片
- 以上机制我们实现了无论需要轮播多少个图片我们都只需创建5个视图通过 frame 变换,移动动画,我们实现了真正的无限循环轮播