iOS 轮播图的实现逻辑(四种方法)

作者: 雪中夜归人 | 来源:发表于2016-09-08 14:48 被阅读3520次

现在的App开发中,轮播图几乎是一个不可避免的都会用到的。个人封装过轮播图,也看过很多种不同的轮播图,目前掌握的轮播图无限轮播有四种不同的实现方式:

第一种:基于collectionView进行的封装(推荐)

这种方式应该是实现起来最简单的一种方式了,也是个人最喜欢的一种封装方式。它的原理就是几个collectionView,至于无限轮播,很简单,只需要你的轮播数组给collectionView赋值的时候乘以一个较大的数字即可(例如100),collectionView本身处理了重用等一系列问题。

第二种:基于scrollView的无限轮播(首尾各多创建一个展示图片的ImageView)

这种实现方式个人感觉是最麻烦,而且还需要考虑重用等性能问题的一种。基本的原理就是在根据你轮播数组的个数在首尾各多创建一个ImageView,当然首位之前多创建一个展示轮播数组最后一个的ImageView,而尾部多创建一个展示轮播数组第一个的ImageView。

例如轮播数组有4张图。

3 0 1 2 3 0

当用户在滑到最左或者最右的瞬间将scrollView的偏移量进行改变,因为其首尾各有一张,用户在视觉上几乎感觉不出来。

这种的缺点就是如果轮播数组中图片太多,要考虑重用的问题。

第三种:同样是基于scrollView的无限轮播(总共就创建三个ImageView)

这种实现方式比第二种的好处就是不需要考虑重用问题,不论数组是多少个轮播图,我只创建三个ImageView。它与第二种的不同之处是其实用户每次看到的一直都是中间那张的ImageView,只是上边的内容改变了。其内部实现其实是在不断的改变那个轮播数组。

第四种:只有一个ImageView

这种实现方式不再基于ScrollView,同样不存在重用等的问题。这种实现方式跟第三种有相似之处,但是它跟第三种的区别是不再使用scrollView的图片切换方式。还是不停地去改变这个数组的内容。这种实现方式的核心在于切换的时候使用自定义的layer层的转场动画。模拟scrollView的滑动效果。

相关文章

  • iOS 轮播图的实现逻辑(四种方法)

    现在的App开发中,轮播图几乎是一个不可避免的都会用到的。个人封装过轮播图,也看过很多种不同的轮播图,目前掌握的轮...

  • swift第三方控件

    iOS开发:Swift实现的轮播图、无限循环视图控件CYCircularScrollView CycleScrol...

  • 小程序利用swiper实现轮播图

    小程序实现轮播图比iOS简单很多 .wxml代码: .wxss代码: .js代码:

  • iOS高效图片轮播 - 两个imageView实现

    iOS高效图片轮播 - 两个imageView实现 iOS高效图片轮播 - 两个imageView实现

  • iOS 轮播图(三个UIImageView轮播)

    提到app轮播图,我们会想到好多种实现方法。这里我给大家介绍一下用三个UIImageView创建轮播图的方法,这里...

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题:一、什么是轮播图?二、怎么实现轮播效果?三、轮播图还有什么小功能可以实现...

  • iOS轮播图的实现

    首先要封装一个类,有了这个类,只要把类拖拽到你的工程,妈妈就再也不用担心你不会做轮播图了!(此文与之前发布的文章一...

  • iOS轮播图的实现

    首先要封装一个类,有了这个类,只要把类拖拽到你的工程,妈妈就再也不用担心你不会做轮播图了! 创建这个类如下: 类名...

  • 用四种方法实现轮播图

    1、css3动画实现的轮播图 实现原理如下呀: 1、设置大的div a)设置绝对定位,定位位置,b)设置图片展示...

  • 轮播图实现

    轮播图在实际应用开发使用较多,本文说明一下具体的实现过程。 一、实现轮播图的基本控件介绍。实现轮播图需要将多张图片...

网友评论

  • 陆宝宝:先给你点个赞,我有几个疑问想请教下。
    1.第一种方法不是使用一个collectionview么?
    2.第三种你说的用户始终看到的是第二张,我有点不理解,还请赐教。
  • wind黑子:最后一种很有趣。
  • 缱绻一时:你转载别人的文章有特别注明么???
    雪中夜归人:@缱绻一时 谢谢啊,不过我看了一下,都是我的账号发表的,不同平台而已。
    缱绻一时:@雪中夜归人 那就是别人抄袭了你的文章咯。名字都取的一模一样。自己去搜索吧。
    雪中夜归人:别这么逗好吗,这是我自己写的。
  • Sxiaobai:楼主能否发一下这四种实现方式的代码最好swift版的:smile::smile::smile:
    风吹柳絮如花落:http://www.jianshu.com/p/9538fa9f9321 我自己写的
  • dffa7ad5e16a:第四个很牛啊,哪里有demo看
    雪中夜归人:@帅气昵称MT 第四种方式有局限性 就是轮播图的大小只能是整屏幕的。你需要demo 我这有 加我qq470201821
  • ArrorS:能否简述一下第四种方式,layer动画的实践???
    f1e24a8d40b9:@Arrors 应该不需要点击layer的,点击imageview就可以,回调给他图片数组的第几个元素可以了
    ArrorS:@雪中夜归人 可是layer是没有交互的啊
    雪中夜归人:@Arrors -(CATransition *)myCatransition{
    if (!_myCatransition) {
    _myCatransition = [CATransition animation];
    _myCatransition.type = kCATransitionPush;
    _myCatransition.duration =0.3;
    }
    return _myCatransition;
    }
    [self.bgImageView.layer addAnimation:self.myCatransition forKey:@"transition"];
  • kelloy:赞一个,正是我所需要的。 :grin:

本文标题:iOS 轮播图的实现逻辑(四种方法)

本文链接:https://www.haomeiwen.com/subject/mebsettx.html