IOS性能实现水平自动无缝循环LoopView(ScrollView)

本文介绍了一种iOS应用中实现广告轮播视图的方法,通过UIView、UIScrollView及UIPageControl结合定时器,实现无缝循环播放效果。适用于3张及以上图片组成的广告轮播场景。

说明

经常会在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变化即可,详见代码。

代码写的一般,如有问题,稍微改动吧,贡献给大家了。

http://download.youkuaiyun.com/detail/love_monkey/7571799

评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值