iOS实现无限循环图片轮播器的封装

项目中很多时候会碰到这个需求,实现多张图片的无限循环轮转,以前做过,项目中几个地方的都用到了,当时没有封装,几个地方都拷贝几乎一样的代码,代码复用性不好,今天没事封装了一下,使用起来比较简单。

首先,说说我实现循环轮转图片的思想,在UIScrollView中添加了3个UIImageView,并排排列,我们看到的永远只是第二个UIImageView,这样的话,你一直可以向左,向右滑动,当你向左滑动是,这是你滑动到了最后一个UIImageView不能在向左边滑动了,这时,我在后面悄悄的将第二个UIImageView图片设置为当前要显示的图片,调整UIScrollView的contentOffset属性,如:

[_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO](使用者根本感觉不出来这种变化)所以,此时,你看到的又是第二个UIImageView,所以此时你又可以向左滑动,当你向右边滑动时候处理类似,导致结果你可以向左边,右边无线循环轮转图片。

JGCirculateSwitchImgView.h头文件

@interface JGCirculateSwitchImgView : UIView

@property(nonatomic,strong)NSArray *imgUrlArr;

@end

头文件中只有一个需要设置的成员变量imgUrlArr数组,就是你要显示图片路径的数组,将通过这个数组访问图片。

JGCirculateSwitchImgView.m文件

typedef NS_ENUM(NSInteger, SwitchDirection)

{

//未成功旋转

  SwitchDirectionNone = -1,

//向右旋转图片

 SwitchDirectionRight = 0,

//向左训转图片

SwitchDirectionLeft = 1,

};

定义了SwitchDirection枚举,表示图片向左,向右轮转,或者什么也不做。

//默认5秒训转图片一次,可以根据需要改变

#define WiatForSwitchImgMaxTime 5

#import "JGCirculateSwitchImgView.h"

#import "UIImageView+WebCache.h"

@interface JGCirculateSwitchImgView ()

//底部UIScrollView

@property(nonatomic,weak)UIScrollView *contentScrollView;

//显示页码的UIPageControl控件

@property(nonatomic,weak)UIPageControl *pageControlView;

//用保存当前UIPageControl控件显示的当前位置

@property(nonatomic,assign)NSInteger currentPage;

//用于保存当前显示图片在图片urlArr数组中的索引

@property(nonatomic,assign)NSInteger currentImgIndex;

//UIScrollView上的三个UIImgaView这里通过3个UIImageView实现无限循环图片轮转

@property(nonatomic,weak)UIImageView *imgView1;

@property(nonatomic,weak)UIImageView *imgView2;

@property(nonatomic,weak)UIImageView *imgView3;

@property(nonatomic,assign)BOOL isDragImgView;

//SwitchDirection类型,用于保存滑动的方向

@property(nonatomic,assign)SwitchDirection swDirection;

@end
-(id)initWithFrame:(CGRect)frame

{

    if (self = [super initWithFrame:frame])

    {

       [self createContentScrollView];

       [self createPageControlView];

      //默认第一页

      _currentPage = 0;

      //默认显示第一张图片

      _currentImgIndex = 0;

     _isDragImgView = NO;

     _swDirection = SwitchDirectionNone;

   }

     return self;

}

创建UIScrollView代码

-(void)createContentScrollView

{

    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];

    scrollView.delegate = self;

    scrollView.showsHorizontalScrollIndicator = NO;

    scrollView.shouldGroupAccessibilityChildren = NO;

    scrollView.pagingEnabled = YES;

    [self addSubview:scrollView];

    _contentScrollView = scrollView;

}

创建UIPageControl

-(void)createPageControlView

{

    UIPageControl *pageControlVw = [[UIPageControl alloc] init];

   pageControlVw.frame = CGRectMake(0, 0, 80, 20);

   pageControlVw.center = CGPointMake(self.center.x, self.bounds.size.height - 20);

   pageControlVw.backgroundColor = [UIColor redColor];

   _pageControlView.pageIndicatorTintColor = [UIColor yellowColor];

   _pageControlView.currentPageIndicatorTintColor = [UIColor purpleColor];

   [self addSubview:pageControlVw];

   _pageControlView = pageControlVw;

}
//value对Count取模,并保证为正值

//这里很重要,是实现无限循环的重要的一步,比如现在显示的是第一张图片,_currentImgIndex=0,向左滑动后就显示_currentImgIndex+1张图片,可是_currentImgIndex+1可能回大于_imgUrlArr的数组count,这里取模,其次还要保证为正数,比如,如果向右边滑动是就显示_currentImgIndex-1张图片,_currentImgIndex-1取模也可能为负数,此时加上count保证为正数

-(NSInteger)switchToMValue:(NSInteger)value Count:(NSInteger)count

{

    NSInteger result = value % count;

    return result >=0 ? result : result + count;

}

重写imgUrlArr的set方法

-(void)setImgUrlArr:(NSArray *)imgUrlArr

{

    _imgUrlArr = [imgUrlArr copy];

    NSInteger count = imgUrlArr.count;

    if (count <= 0 )

    {

      return;

    }

   //如果只显示一张图片,那就没有旋转情况

   if (count == 1)

   {

       UIImageView *imgView = [[UIImageView alloc]init];

       imgView.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);

      [_contentScrollView addSubview:imgView]; 

      _pageControlView.numberOfPages = 1; 

      _pageControlView.currentPage = 0;

      _contentScrollView.contentSize = CGSizeMake(self.bounds.size.width, self.bounds.size.height);

      NSURL *imgUrl = [NSURL URLWithString:imgUrlArr[0]];

     [imgView sd_setImageWithURL:imgUrl placeholderImage:nil];

     return;

   }

   if (count > 1)

   {

         //这里只使用3个ImgView轮转多张图片,数量2,3,4,5,6...

         for(int i = 0; i < 3 ;i++)

         {

             UIImageView *imgView = [[UIImageView alloc] init];

             imgView.frame = CGRectMake(i * self.bounds.size.width, 0, self.bounds.size.width, self.bounds.size.height);

             imgView.layer.masksToBounds = YES;

             NSString *urlStr = urlStr = _imgUrlArr[[self switchToValue:i-1 Count:count]];

             NSURL *imgUrl = [NSURL URLWithString:urlStr];

              [imgView sd_setImageWithURL:imgUrl placeholderImage:nil];

              if (i == 0)

              {

                  _imgView1 = imgView; 

               }

               else if (i == 1)

              {

                  _imgView2 = imgView;

              }

              else if (i == 2)

              {

                 _imgView3 = imgView; 

              }

              [_contentScrollView addSubview:imgView];

         }

        _pageControlView.numberOfPages = count; 

        _pageControlView.currentPage = 0;

        _contentScrollView.contentSize = CGSizeMake(self.bounds.size.width * 3,   self.bounds.size.height);

        _currentImgIndex = 0;

       [_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];

      dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0),  ^{

           //循环轮转图片

           [self switchImg];

     });

   }

}

5秒旋转图片

-(void)switchImg

{

     while (1)

     {

          [NSThread sleepForTimeInterval:WiatForSwitchImgMaxTime];

          //如果正在拖拽图片,此次作废 

           if (_isDragImgView) {

               continue;

           }

            _currentPage = [self switchToValue:_currentPage + 1 Count:_imgUrlArr.count];

            dispatch_async(dispatch_get_main_queue(), ^{

                  _pageControlView.currentPage = _currentPage;

                 _contentScrollView.contentOffset = CGPointMake(2 * self.bounds.size.width, 0);

                 [self reSetImgUrlWithDirection:SwitchDirectionLeft];

         });

     }

}

当手动旋转图片

-(void)switchImgByDirection:(SwitchDirection)direction

{

     if (direction == SwitchDirectionNone) {

         return;

     }

     [self reSetImgUrlWithDirection:direction];

     [_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];

}

旋转图片后重新调整3个UIImageView显示的内容,如实现思想所述

-(void)reSetImgUrlWithDirection:(SwitchDirection)direction

{

     if (direction == SwitchDirectionRight) {

         [_imgView1 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex - 2 Count:_imgUrlArr.count]]] placeholderImage:nil];

         [_imgView2 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex - 1 Count:_imgUrlArr.count]]] placeholderImage:nil];

         [_imgView3 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex Count:_imgUrlArr.count]]] placeholderImage:nil];

         _currentImgIndex = [self switchToValue:_currentImgIndex - 1 Count:_imgUrlArr.count];

      }

     else if(direction == SwitchDirectionLeft)

     {

          [_imgView1 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex Count:_imgUrlArr.count]]] placeholderImage:nil];

          [_imgView2 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex + 1 Count:_imgUrlArr.count]]] placeholderImage:nil];

          [_imgView3 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex + 2 Count:_imgUrlArr.count]]] placeholderImage:nil];

          _currentImgIndex = [self switchToValue:_currentImgIndex + 1 Count:_imgUrlArr.count];

     }

}

实现UIScrollVie3个代理方法

#pragma mark -------------Delegate---------------

//记住滑动的方向

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

    static float newx = 0;

    static float oldx = 0;

   newx= scrollView.contentOffset.x ;

   if (newx != oldx )

   {

       if (newx > oldx)

       {

           _swDirection = SwitchDirectionLeft;

       }else if(newx < oldx)

      {

          _swDirection = SwitchDirectionRight;

      }

      oldx = newx;

   }

}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView

{

    _isDragImgView = YES;

}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

     //向左旋转

     if (_swDirection == SwitchDirectionLeft)

     {

          _currentPage = [self switchToValue:_currentPage + 1 Count:_imgUrlArr.count];

     }//向右旋转

     else if (_swDirection == SwitchDirectionRight)

     {

         _currentPage = [self switchToValue:_currentPage - 1 Count:_imgUrlArr.count];

     }

     _pageControlView.currentPage = _currentPage;

     if (_swDirection != SwitchDirectionNone) {

     [self switchImgByDirection:_swDirection];

     }

    _isDragImgView = NO;

}

以上为实现代码,现在看看怎么用,例如:

JGCirculateSwitchImgView *jView = [[JGCirculateSwitchImgView alloc] initWithFrame:CGRectMake(20,100, 280, 250)];

NSArray *imgUrlArr = @[@"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201119031647109.jpg",

@"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201116215754685.jpg",

@"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201115524758041.jpg",

@"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201114495822068.jpg",

@"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201107522493367.jpg"];

jView.imgUrlArr = imgUrlArr;

[self.view addSubview:jView];

可以看到封装之后,代码的重用性很高,使用起来很简单,就这么4句代码就可以实现图片的无限循环轮转。

以上就是本文的全部内容,希望对大家的学习有所帮助。

(0)

相关推荐

  • iOS开发中使用UIScrollView实现图片轮播和点击加载

    UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 复制代码 代码如下: #import "YYViewController.h" @interface YYViewController () <UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; /**  *  页码  */ @pro

  • IOS使用UICollectionView实现无限轮播效果

    一.案例演示 本案例Demo演示的是一个首页轮播的案例,支持手动轮播和自动轮播.知识点主要集中在UICollectionView和NSTimer的使用. 二.知识储备 2.1.UICollectionView横向布局 只需要设置UICollectionViewFlowLayout的scrollDirection为UICollectionViewScrollDirectionHorizontal即可. 2.2.NSTimer的基本使用 NSTimer的初始化: 复制代码 代码如下: + (NSTi

  • 一行iOS代码实现图片无限轮播器

    最近一直在找实现图片无限轮播的方法,在网上也看了不少方法,大都不太合适,最终看到某IT培训公司一位讲师用 UICollectionView:一行代码实现图片无限轮播器的方法,当然想一行代码实现轮播功能,前期还是有一些工作要做.下面就把这个方法分享给大家! 一.图片无限轮播实现效果图: 图片无限轮播.gif 二.实现原理与分析: 假设有三张图片0.1.2,想要实现无限轮播,我们可以将UICollectionView的cell个数设为图片的个数 x 3,也就是把三张图片重复添加到9个cell中,可以

  • iOS仿热门话题热点轮播界面tableView

    废话不多说直接上代码: 这个功能应该是挺常见的, 一个tableView到另一个tableView, 类似segment的一个东西, 我把它封装起来了: // // ViewController.m // // // Created by 高雅馨 on 16/6/3. // Copyright © 2016年 高雅馨. All rights reserved. // #import "DCNavTabBarController.h" #import "HTMacro.h&qu

  • iOS实现图片轮播效果

    本文实例为大家分享了IOS图片轮播效果的实现过程,供大家参考,具体内容如下 平时APP中的广告位或者滚动的新闻图片等用到的就是图片轮播这种效果,实现方式主要有两种,一种ScrollView+ImageView,另一种则是通过CollectionView,今天总结的是ScrollView这种方式. 1.图片轮播效果实现 主要实现思路是:根据图片总数及宽高设置好ScrollView的大小,每切换一张图片相当于在ScrollView上进行一个图片宽度的移动行为,并加入定时器,实现自动轮播. 如图所示,

  • IOS图片无限轮播器的实现原理

    首先实现思路:整个collectionView中只有2个cell.中间始终显示第二个cell. 滚动:向前滚动当前cell的脚标为0,向后滚动当前的cell脚标为2.利用当前cell的脚标减去1,得到+1,或者-1,来让图片的索引加1或者减1,实现图片的切换. 声明一个全局变量index来保存图片的索引,用来切换显示在当前cell的图片. 在滚动前先让显示的cell的脚标变为1.代码viewDidLoad中设置 完成一次滚动结束后,代码再设置当前的cell为第二个cell(本质上就是让当前显示的

  • IOS实现图片轮播无限循环效果

    本文接着上篇文章进行叙述讲解,主要为大家分享了图片轮播无限循环效果的实现方法,具体内容如下 之前说到第一个问题,ScrollView移动到最后一张图片时无法移动了,这是因为ScrollView已经移动到最后,而图片又是依次排列,自然也就无法移动. 解决办法是,我们换一个思路实现图片轮播效果,ScrollView上只放三个ImageView,屏幕始终显示中间的ImageView,左边和右边的ImageView分别代表前一张图片和后一张图片,屏幕移动的时候,中间的ImageView变化,同时左右两边

  • iOS实现轮播图banner示例

    楼主项目中需要有一个轮播图,因为比较简单,就自己写了个,因为是从网上弄得图片 所以用了SDWebImage 这个三方库 当然自己也可以去掉 类型后面有*号 如用使用 请自行加上..... 代码:.h 文件 @protocol TJXViewDelegate<NSObject> //判断点击的那个 -(void)sendImageName:(TJXView *)TJXView andName:(NSInteger)selectImage; @end @interface TJXView : UI

  • iOS实现无限循环图片轮播器的封装

    项目中很多时候会碰到这个需求,实现多张图片的无限循环轮转,以前做过,项目中几个地方的都用到了,当时没有封装,几个地方都拷贝几乎一样的代码,代码复用性不好,今天没事封装了一下,使用起来比较简单. 首先,说说我实现循环轮转图片的思想,在UIScrollView中添加了3个UIImageView,并排排列,我们看到的永远只是第二个UIImageView,这样的话,你一直可以向左,向右滑动,当你向左滑动是,这是你滑动到了最后一个UIImageView不能在向左边滑动了,这时,我在后面悄悄的将第二个UII

  • IOS开发之UIScrollView实现图片轮播器的无限滚动

    IOS开发之UIScrollView实现图片轮播器的无限滚动 简介 在现在的一些App中常常见到图片轮播器,一般用于展示广告.新闻等数据,在iOS内并没有现成的控件直接实现这种功能,但是通过UIScrollView的允许分页设置,可以实现滚动轮播的功能. 轮播原理 UIScrollView对象有pagingEnable成员,如果设置为YES,那么每一个scrollView尺寸这么大的区域就会被当作一页,在滚动时会根据滚动的比例自动计算应该切换到哪一页. 无限滚动原理 要实现无限滚动,需要额外的两

  • iOS实现图片轮播器

    有时候肯能会用到图片轮播器,做广告的效果.下面详细介绍iOS如何实现图片轮播器 1.新建一个项目,导入5张图片(为了代码方便,我把图片命名规范了,其实无所谓) 2.在mainstoryboard中拖入ScrollView和Page Control(也可以代码写,或者是自定义xib) 设置page control的 Current Page属性,决定轮播的当前页显示的颜色 3.接下来就是正式代码了 //(1)将需要展⽰的内容添加到UIScrollView中 //(2)设置UIScrollView的

  • jquery实现图片轮播器

    一.轮播器 1.HTML框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>图片轮播器</title> <link rel="stylesheet" type="text/css" href="slider.css" rel="

  • js图片轮播插件的封装

    本文为大家分享了js图片轮播插件的具体代码,供大家参考,具体内容如下 我封装的这个轮播插件只需要获取到图片和按钮就可以啦. css 样式 .body{ width: 700px; margin: 100px auto; position: relative; height: 300px; overflow: hidden; } .body img{ width: 700px; position: absolute; display: none; } .body ul{ position: abs

  • jQuery图片轮播实现并封装(一)

    利用面向对象自己动手写了一个封装好的jquery轮播对象,可满足一般需求,需要使用时只需调用此对象的轮播方法即可. demo:https://github.com/zsqosos/shopweb 具体代码如下: HTML结构: <div class="banner" id="J_bg_ban"> <ul> <li><a href="#"><img src="banner_04.jpg

  • Android高级图片滚动控件实现3D版图片轮播器

    大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博客了,我也是深感惭愧.那么今天的这篇既然是阔别了一个多月的文章,当然要带来更加给力点的内容了,那么话不多说,赶快进入到今天的正题吧. 说到图片轮播器,很多的Android应用中都会带有这个功能,比如说网易新闻.淘宝等.最新我们公司的一款应用也加入了这个功能,并且在图片轮播的基础上还增加了三维立体的效果,但比较遗憾的是,整体效果并不理想,用户体验性比较糟糕.因此,我就花了点时间去编写了一个效果更好的3D图片轮播器,自我感觉还是比较

  • Vue封装Swiper实现图片轮播效果

    图片轮播是前端中经常需要实现的一个功能.最近学习Vue.js,就针对Swiper进行封装,实现一个简单的图片轮播组件. 一.Swiper 在实现封装之前,先介绍一下Swiper. Swiper是纯Javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择. Swiper的应用场景广泛,实现效果很好,下面个这实际案例就是Swiper的典

  • 非常棒的jQuery图片轮播效果

    本文实例为大家分享了jQuery图片轮播效果,很个性,具体内容如下 购物产品展示:图片轮播器,效果如下所示: 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果 两个区域:    最外层容器区域,如上图红色线框矩形    选项卡区域 两个事件:     鼠标悬浮或鼠标划入mouseover     鼠标离开mouseleave /**大屏广告滚动样式**/ <!DOCTYPE html> <html lang="en"> <head> &l

  • jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承

    上一篇文中完成的封装,还存在一个小问题,就是该轮播对象不能在同一页面中重复使用,本文将通过组合使用javascript的构造函数和原型模式创建对象来解决这个问题. 没有看过上一篇文章的朋友可以点此查看上一篇文章 (jQuery图片轮播实现并封装(一)) 首先回顾一下,上文的问题所在,上文中的carsouel对象是采用字面量的方式来定义的,这样carsouel本就是一个实例,想要使用在多处时,这个对象的方法会发生冲突,最终只会执行最后的那一个.而通过采用构造函数的方式来定义对象carsouel,每

随机推荐