脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → iOS轮播图效果

iOS简单实现轮播图效果

 更新时间：2022年08月05日 14:24:27   作者：XXJcanbethebest  
这篇文章主要为大家详细介绍了iOS简单实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了iOS简单实现轮播图效果的具体代码，供大家参考，具体内容如下

平常在开发过程中，首页的轮播图总是少不了，轮播图我们都知道肯定是要使用 UIScrollView ，难点就在最后一张图片被滑动时，如何回到第一张图片以及第一张滑动到最后一张。
我们可以使用如下方式实现轮播图，在划到3后面的1后，设置 contentOffset 回到最先的1，并设置 pageControl ，即可达到效果 （从1划到3也同理）

看一下效果：

完成这种轮播图，我们的 View 需要如下的属性和方法

@interface RoundView : UIView
 
@property (nonatomic,strong) UIScrollView   *scrollView;
//存放ScrollView每一个page的图片的array
@property (nonatomic) NSMutableArray        *imgArray;
@property (nonatomic) UIPageControl         *pageControl;
//定时器
@property (nonatomic,strong) NSTimer        *__nullable timer;
 
- (instancetype)initWithFrame:(CGRect)frame imgArray:(NSArray *)array;
 
@end

在创建View的时候使用 initWithFrame:(CGRect)frame imgArray:(NSArray *)array，传入需要展示的 imgArray ，在 view 内进行处理。

在该方法的实现中，首先就是对图片数组array的处理，得到我们需要的imgArray

- (instancetype)initWithFrame:(CGRect)frame imgArray:(NSArray *)array{
    self=[super initWithFrame:frame];
    
    self.imgArray=[[NSMutableArray alloc]init];
    [self.imgArray addObject:[array lastObject]];
    [self.imgArray addObjectsFromArray:array];
    [self.imgArray addObject:[array firstObject]];
}

这样，我们的 imgArray 就变成了最开始演示原理的样式，为 @[first object,array,lastobject]

然后我们初始化一下 ScrollView

self.scrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
    [self.scrollView.layer setCornerRadius:10.0];
    self.scrollView.contentSize=CGSizeMake(frame.size.width * self.imgArray.count, frame.size.height);
    self.scrollView.pagingEnabled=YES;
    self.scrollView.contentOffset=CGPointMake(frame.size.width, 0);
    self.scrollView.showsVerticalScrollIndicator=NO;
    self.scrollView.showsHorizontalScrollIndicator=NO;
    self.scrollView.delegate=self;
    [self.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];

很简单，就是一些属性、代理的设置 根据 imgArray 的大小设置 contentSize ，另外对 contentOffset 添加一个观察者，方便后续对pageControl和contentOffset进行设置。

然后，我们根据 imgArray 将图片填入到 scrollView 中

for(int i=0;i<self.imgArray.count;i++){
        CGRect imgFrame=CGRectMake(frame.size.width* i, 0, frame.size.width , frame.size.height);
        UIImageView* imgView=[[UIImageView alloc]initWithFrame:imgFrame];
        //这里我就不传入图片了，测试的imgArray中为颜色，使用颜色替代
        imgView.backgroundColor=self.imgArray[i];
        [self.scrollView addSubview:imgView];
    }

然后对pageControl和timer进行初始化

self.pageControl=[[UIPageControl alloc]initWithFrame:CGRectMake(0, frame.size.height-20, frame.size.width, 20)];
    self.pageControl.numberOfPages=array.count;
    self.pageControl.currentPage=0;
    self.pageControl.tintColor=[UIColor whiteColor];
    
    self.timer=[NSTimer scheduledTimerWithTimeInterval:5.0 target:self selector:@selector(scrollImage) userInfo:nil repeats:YES];
    //添加到runloop中
    NSRunLoop *runloop=[NSRunLoop currentRunLoop];
    [runloop addTimer:self.timer forMode:NSRunLoopCommonModes];
    
    [self addSubview:self.scrollView];
    [self addSubview:self.pageControl];

这里设置的是5秒钟后自动滚动轮播图，可以根据需要自己设置，scrollmage 方法后面会讲

我们看一下我们需要的 scrollView 的代理方法

1.scrollViewDidScroll:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat offsetX=scrollView.contentOffset.x;
    offsetX+=scrollView.frame.size.width*0.5;
    
    //因为最前面还有一个imgView
    int page=offsetX/scrollView.frame.size.width-1;
    self.pageControl.currentPage=page;
    
}

此方法用来计算 contentOffset 对应的 pageControl 的 page ，需要注意的是在第一张图片之前还有最后一张图片，所以计算的时候需要-1

2.scrollViewWillBgeinDragging:

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    [self.timer invalidate];
    self.timer=nil;
}

在scrollView即将被划动时，取消自动轮播，将timer设置为nil

3.scorllViewDidEndDragging: willDecelearate:

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    self.timer=[NSTimer scheduledTimerWithTimeInterval:5.0 target:self selector:@selector(scrollImage) userInfo:nil repeats:YES];
    
    //优先级 设置到当前的runloop中
    NSRunLoop *runloop=[NSRunLoop currentRunLoop];
    [runloop addTimer:self.timer forMode:NSRunLoopCommonModes];
}

在将要结束划动的时候，重新设置timer 并添加到当前的runloop中

实现轮播图的核心代码

对 contentOffset 的监听

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
    
    if([keyPath isEqualToString:@"contentOffset"]){
        //[change objectForKey:NSKeyValueChangeNewKey] 是一个对象
        CGPoint offset= [[change objectForKey:NSKeyValueChangeNewKey] CGPointValue];
        //当划到3后面的1时
        if(offset.x >= self.scrollView.contentSize.width-self.scrollView.frame.size.width){
            [self.scrollView setContentOffset:CGPointMake(self.scrollView.frame.size.width, 0)];
            self.pageControl.currentPage=0;
        }
        //当划到1前面的3时
        else if(offset.x <= 0){
            [self.scrollView setContentOffset:CGPointMake(self.scrollView.contentSize.width-2*self.scrollView.frame.size.width, 0)];
            self.pageControl.currentPage=self.pageControl.numberOfPages-1;
        }
    }
    
}

首先[change objectForKey:NSKeyValueChangeNewKey] 是一个对象，我们可以通过  CGPointValue 去得到contentOffset

然后我们对 contentOffset 的 x 进行判断，如果在最后一张图片，即3后面的1时，将scrollView的contentOffset 设置为初始的1所在的位置，这里不能设置动画

同理，如果在1前面的3时，将scrollView的contentOffset 设置为初始的3所在的位置，这里不能设置动画

需要注意 pageControl 的设置也应该实时设置

最后，我们将自己轮播的方法 scrollImage 填写

-(void)scrollImage{
            
    NSInteger page=[self.pageControl currentPage];
    page++;
    CGFloat offsetX= page * self.scrollView.frame.size.width+self.scrollView.frame.size.width;
    
    [self.scrollView setContentOffset:CGPointMake(offsetX, 0) animated:YES];
}

从当前的 page 滚动至下一个 page ，设置动画

至此我们完成了支持滑动和自己定时播放的简单页面的轮播图

您可能感兴趣的文章:

相关文章

  • IOS视图控制器的生命周期实例详解

    IOS视图控制器的生命周期实例详解

    这篇文章主要介绍了IOS视图控制器的生命周期实例详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • iOS实现富文本编辑器的方法详解

    iOS实现富文本编辑器的方法详解

    大家在开发的时候经常会用到富文本编辑器，所以这篇文章就给大家整理了如何使用iOS实现富文本编辑器的方法，相信本文对大家具有一定的参考借鉴价值，有需要的朋友们可以一起来看看。
    2016-10-10
  • 理解Objective-C的变量以及面相对象的继承特性

    理解Objective-C的变量以及面相对象的继承特性

    这篇文章主要介绍了理解Objective-C的变量以及面相对象的继承特性,文中的所说的点语法即是'对象名.成员变量名'这种对变量的访问,需要的朋友可以参考下
    2016-01-01
  • Flutter Widgets MediaQuery控件屏幕信息适配

    Flutter Widgets MediaQuery控件屏幕信息适配

    这篇文章主要为大家介绍了Flutter Widgets 之 MediaQuery控件获取屏幕信息和屏幕适配示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • iOS如何使用自己添加的字体库

    iOS如何使用自己添加的字体库

    这篇文章主要为大家介绍了iOS如何使用自己添加的字体库详细过程，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • IOS 单击手势的添加实现代码

    IOS 单击手势的添加实现代码

    这篇文章主要介绍了IOS 单击手势的添加实现代码的相关资料,需要的朋友可以参考下
    2017-05-05
  • Xcode提高开发效率的代码块分享

    Xcode提高开发效率的代码块分享

    这篇文章跟大家介绍的是一些提高大家开发效率Xcode的代码块，以及如何备份代码块，Xcode的代码片段(Code Snippets)创建自定义的代码片段，当你重用这些代码片段时，会给你带来很大的方便。有需要的朋友们可以参考借鉴。
    2016-09-09
  • 实例讲解如何在iOS应用开发中使用设计模式中的代理模式

    实例讲解如何在iOS应用开发中使用设计模式中的代理模式

    这篇文章主要介绍了实例讲解如何在iOS应用开发中使用设计模式中的代理模式,示例为传统的Objective-C语言代码,需要的朋友可以参考下
    2016-03-03
  • iOS App中UIPickerView选择栏控件的使用实例解析

    iOS App中UIPickerView选择栏控件的使用实例解析

    这篇文章主要介绍了iOS App中的UIPickerView选择栏控件的使用,文中演示了两个超详细的例子,示例代码为Objective-C,需要的朋友可以参考下
    2016-04-04
  • iOS如何让tableview支持不同种类的cell详解

    iOS如何让tableview支持不同种类的cell详解

    这篇文章主要给大家介绍了关于iOS如何让tableview支持不同种类的cell的相关资料，文中通过示例代码详细的给大家介绍了实现的两种方法，对各位iOS开发者们具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-08-08

最新评论