说明
经常会在app中用到网页上的横向自动滚动的广告效果,从第一张图片显示到最后一张,然后又接着从第一张开始。
在网上找了很多地方,但是没有找到合适的,不是有bug就是没有实现更好的无缝循环的效果,或者动画被去掉以实现顺序效果。
所以,自己研究了下,设计了一个比较不错的方案吧。
设计
1.接口简单
只需要传入image的数组即可,数组个数3以上,无上限。因为2张图片构不成良好的广告效果,一般都是好几张图片,3-10.
2.设计思路
使用UIView做主view,UIScrollView做主要滑动view,UIPageControl作为页计数效果,使用NSTimer来实现自动滚动。
我们使用UIView作为底view,宽度设置成320,一般就这么宽,高度随意。
然后再view上加个3*320的scrollview,scrollview上面add3个UIImageView---leftImageView,centerImageView,rightImageView。
原则是间接一直显示centerImageView。
当初始化的时候,传进来的image数组,先进行排序,将数组最后一个元素count-1移到0角标位置,将原来的0至count-2往后偏移一个位置,即 0 - 1, 1 - 2等。
图片显示顺序 0,1,2.....count-1 变为 count-1,0,1,2....count-2
然后在事先创建好的3个imageview上加上新image数组的第0,1,2图片,(当前图片顺序实际上是,0 对应数组最后一个图片,1对应数组第一个图片,2对应数组第二个图片)。
然后重新定位,将scrollview偏移 contentoffset = CGPoint(width,0),即显示3个imageview的centerimageview。实现了初始化的时候显示原image数组的第一个图片。
这样,在往左去的时候可显示出顺序最后一个图片,往右去可显示第二个图片。
leftimageview centerimageview rightimageview
count-1的图片 第一个图片 第二个图片
新数组的0坐标 新数组的1坐标 新数组的2坐标
当scrollview滑动结束,调用回调方法响应,scrollviewDidEndDecelerating方法。
这时候,如果往右去,会到scrollview的rightimageview的位置了,同时显示第二张图片。我们现在要做的就是创建视觉差。
首先,需要将scrollview的contentoffset还原到centerimageview的位置,即(width,0)。
同时,替换数组中显示图片的位置以及哪三张显示。
ok,需要将scrollview的偏移时候的动画去掉,这样就实现了人眼看不出来的变换。
需要注意的是,对于需要显示哪三张图片,得根据个数和求模运算来做。往左往右就是currentIndex -- 或者++ 的问题了。
自动滚动就是再加个timer了。
pageControll的currentpage也随currentIndex变化即可,详见代码。
代码写的一般,如有问题,稍微改动吧,贡献给大家了。
本文介绍了一种iOS应用中实现广告轮播视图的方法,通过UIView、UIScrollView及UIPageControl结合定时器,实现无缝循环播放效果。适用于3张及以上图片组成的广告轮播场景。
959

被折叠的 条评论
为什么被折叠?



