自动和手动轮播图片例子
2014-02-25 17:28
288 查看
各位同学,我今天完成了一个能够自动和手动进行轮播图片的demo。网上也由很多类似的例子,我试用了几个,都不是很顺手,而且由各种各样的bug,所以我就自己写了一个,下面分享给大家,如果您发现用的方便,可以评论个赞鼓励我一下。如果您发现有bug,您也可以留言,然后我来改正。
下面说明一下我的思路。分三步走:
1、能够手动滑动的轮播图片。
或者创建很多个视图,一个个添加上去。好不好在此我就不评论了,我的思路是创建三个UIImageView添加到UIScrollView上,三个UIImageView对应加载的图片是之前显示的图片_previousPage,当前显示图片_currentPage,将要显示的图片_nextPage.每次滑动时计算_currentPage,_previousPage,_nextPage的值,根据这些值重新装载三个ImageView中的图片,设置contentOffSet为
CGPointMake(CGRectGetWidth(_scrollView.bounds),0)。这样就可以实现图片的手动轮播了。
这里的关键就是如何计算3个page值,其实想清楚了就很简单,下面是计算思路:
当然首先要算的是_currentPage的值,
第一步已经完成了。
2、添加滑动指示视图。
其实就是告诉你现在滚动到了第几页的指示视图。考虑到这个UIPageControl 不能使用自定义的图片,所以对它进行了自定义操作。自己通过drawRect进行重绘。可以设置每个点之间的间隔和每个点的图片。
3、添加定时器,实现自动轮播。
刚开始的时候,我是不想使用定时器的,毕竟有点耗资源,所以使用了performSelector:withObject:Delay:,但是发现有个问题解决不了,就是手动操作和自动操作的和谐问题。我发现经常手动的时候,刚滑过来又滑回去了的情况。最后还是改成了定时器。定时器设置了暂定、启动、杀死的方法。
主要的思路就是在启动时创建定时器,在
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView中暂停,在
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView中开始,这样就完美解决了手动和自动的和谐问题。
需要提醒的是从轮播图片视图切换到其他视图时,最好暂停定时器。原因有2:
1、避免切换动画对scrollview动画的干扰。
2、到其他界面时看不到轮播图片了,不需要再轮播,暂定定时器省电。(虽然微乎其微,但总是从小事做起嘛。)
下面附上demo。CycleView.zip
下面说明一下我的思路。分三步走:
1、能够手动滑动的轮播图片。
很多的网上例子都是将scrollview的contentOffSet设置很大,然后一个个显示下去。
或者创建很多个视图,一个个添加上去。好不好在此我就不评论了,我的思路是创建三个UIImageView添加到UIScrollView上,三个UIImageView对应加载的图片是之前显示的图片_previousPage,当前显示图片_currentPage,将要显示的图片_nextPage.每次滑动时计算_currentPage,_previousPage,_nextPage的值,根据这些值重新装载三个ImageView中的图片,设置contentOffSet为
CGPointMake(CGRectGetWidth(_scrollView.bounds),0)。这样就可以实现图片的手动轮播了。
这里的关键就是如何计算3个page值,其实想清楚了就很简单,下面是计算思路:
- (void)setContentView { imageView[0].image = _images[_previousPage]; imageView[1].image = _images[_currentPage]; imageView[2].image = _images[_nextPage]; } - (void)setPage { _previousPage = _currentPage - 1; if (_previousPage < 0) { _previousPage = (int)_images.count - 1; } _nextPage = _currentPage + 1; if (_nextPage > (int)_images.count - 1) { _nextPage = 0; } _pageControl.currentPage = _currentPage; }
当然首先要算的是_currentPage的值,
_currentPage = _currentPage + 1; if (_currentPage > (int)_images.count -1) { _currentPage = 0; }
第一步已经完成了。
2、添加滑动指示视图。
其实就是告诉你现在滚动到了第几页的指示视图。考虑到这个UIPageControl 不能使用自定义的图片,所以对它进行了自定义操作。自己通过drawRect进行重绘。可以设置每个点之间的间隔和每个点的图片。
3、添加定时器,实现自动轮播。
刚开始的时候,我是不想使用定时器的,毕竟有点耗资源,所以使用了performSelector:withObject:Delay:,但是发现有个问题解决不了,就是手动操作和自动操作的和谐问题。我发现经常手动的时候,刚滑过来又滑回去了的情况。最后还是改成了定时器。定时器设置了暂定、启动、杀死的方法。
主要的思路就是在启动时创建定时器,在
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView中暂停,在
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView中开始,这样就完美解决了手动和自动的和谐问题。
需要提醒的是从轮播图片视图切换到其他视图时,最好暂停定时器。原因有2:
1、避免切换动画对scrollview动画的干扰。
2、到其他界面时看不到轮播图片了,不需要再轮播,暂定定时器省电。(虽然微乎其微,但总是从小事做起嘛。)
下面附上demo。CycleView.zip
相关文章推荐
- 基于javascript滚动图片具体实现
- Android 列表使用(ListView GridView Gallery图片计时滚动)
- ViewPager实现轮播图效果
- js 图片自动循环切换setInterval();
- Android 列表使用(ListView GridView Gallery图片计时滚动)
- jquery制作banner图片左右上下切换滚动特效
- Android 自动循环滚动图片(广告)附带导航小圆点
- Banner 怎么实现轮播不同尺寸的图片
- ANDROID轮播广告图片
- MUI前端框架轮播图片+九宫格(左右滑动)
- Axure中导航和滚动图片实例
- 轮播图片——APP顶上头条
- jQuery实现友好的轮播图片特效
- js实现支持手机滑动切换的轮播图片效果实例
- Android实现轮播图片展示效果
- JavaScript实现轮播图片完整代码
- 恶意URL检测
- Eclipse 编辑器消失
- 安装RTX LDAP同步服务
- Android中Path类的lineTo方法和quadTo方法画线的区别