IOS 图片轮播

先创建第三方文件,命名为 ImageScrollView 继承于 UIScrollView
.h文件

#import <UIKit/UIKit.h>


/// 表示图片滚动视图的样式
typedef enum {
    ImageScrollType_Guide = 100,   // 开机guide视图样式
    ImageScrollType_Banner  // banner栏样式
}ImageScrollType;


/// 协议，触发事件回调的方法
@protocol ImageScrollViewDelegate <NSObject>
@optional
/// “guide”样式的最后一个视图上的“立即体验”按钮触发
-(void)experienceDidHandle;
/// “banner”样式每一个图片触发回调的方法;index表示选中的图片的下标
-(void)bannerImageDidHandleWithIndex:(NSInteger)index;
@end



@interface ImageScrollView : UIScrollView

/// 参数1：滚动视图位置（建议以4.7寸屏设置）; 参数2：样式 ; 参数3：图片名称数组 ; 参数4：guide样式的“立即体验”按钮标题；参数5：guide样式的“立即体验”按钮位置；参数6：banner轮播图时间间隔 ; 参数7：代理设置，用于触发事件回调
-(instancetype)initWithFrame:(CGRect)frame
                       style:(ImageScrollType)type
                      images:(NSArray *)imgNameArr
             confirmBtnTitle:(NSString *)title
        confirmBtnTitleColor:(UIColor *)titleColor
             confirmBtnFrame:(CGRect)btnFrame
      autoScrollTimeInterval:(NSTimeInterval)interval
                    delegate:(id<ImageScrollViewDelegate>)delegate;

/// 给ImageScrollView的父视图添加分页控件,必须在把ImageScrollView加为父视图的子视图之后再调用此方法
-(void)addPageControlToSuperView:(UIView *)superView;


@end

.m文件

#import "ImageScrollView.h"

#define  SCR_W  [UIScreen mainScreen].bounds.size.width    // 屏幕宽度
#define  SCR_H  [UIScreen mainScreen].bounds.size.height   // 屏幕高度

#define  FIT_X(x)  (SCR_W/375.*(x))     // 用于x轴适配
#define  FIT_Y(y)  (SCR_H/667.*(y))     // 用于y轴适配

 
@interface ImageScrollView ()<UIScrollViewDelegate>
{
    ImageScrollType _type;  // 样式
    NSString *_confirmBtnTitle; // 确认按钮标题
    CGRect _confirmBtnFrame; // 确认按钮位置
    UIColor *_confirmBtnTitleColor; // 确认按钮标题颜色
    NSUInteger _imgCount; // 图片个数
    
    CGFloat _disx;//在x轴的移动距离
}
@property(nonatomic,assign)id<ImageScrollViewDelegate>scDelegate;
@property(nonatomic,strong)NSTimer *myTimer;  // 定时器
@property(nonatomic,strong)UIPageControl *pageCtl; // 分页控件
@end


@implementation ImageScrollView

#pragma mark - 对外接口
/// 实例化方法
-(instancetype)initWithFrame:(CGRect)frame
                       style:(ImageScrollType)type
                      images:(NSArray *)imgNameArr
             confirmBtnTitle:(NSString *)title
        confirmBtnTitleColor:(UIColor *)titleColor
             confirmBtnFrame:(CGRect)btnFrame
      autoScrollTimeInterval:(NSTimeInterval)interval
                    delegate:(id<ImageScrollViewDelegate>)delegate {

    self = [super initWithFrame:frame];
    if (self) {
        
        
        if (type == ImageScrollType_Guide)
        {
            // 设置内容视图大小
            self.contentSize = CGSizeMake(frame.size.width * imgNameArr.count, frame.size.height);
        }
        else
        {
            // 设置内容视图大小
            self.contentSize = CGSizeMake(frame.size.width * (imgNameArr.count+2), frame.size.height);
        }
        
        
        
        // 样式赋值
        _type = type;
        // 图片数量赋值
        _imgCount = imgNameArr.count;
        // guide样式固定大小
        if (type == ImageScrollType_Guide) {
            self.frame = CGRectMake(0, 0, SCR_W, SCR_H);
            self.contentSize = CGSizeMake(SCR_W * imgNameArr.count, SCR_H);
            
            _confirmBtnTitle = title;
            _confirmBtnFrame = btnFrame;
            _confirmBtnTitleColor = titleColor;
        }
        // 隐藏滚动条
        self.showsVerticalScrollIndicator = NO;
        self.showsHorizontalScrollIndicator = NO;
        // 开启分页属性
        self.pagingEnabled = YES;
        // 设置UIScrollView代理
        self.delegate = self;
        // 设置自定义的代理
        self.scDelegate = delegate;
        // 添加图片子视图
        [self addImageSubViews:imgNameArr];
        // 添加定时器
        if(type == ImageScrollType_Banner) {
            self.myTimer = [NSTimer scheduledTimerWithTimeInterval:interval target:self selector:@selector(timerDidHandle:) userInfo:nil repeats:YES];
        }


    }
    return self;
}

/// 添加分页控件方法
-(void)addPageControlToSuperView:(UIView *)superView {
    [superView addSubview:self.pageCtl];
}



#pragma mark - 分页控制器实例化getter重写
/// 添加分页子视图
-(UIPageControl *)pageCtl{
    if (!_pageCtl) {
        _pageCtl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 0, FIT_X(300), FIT_Y(25))];
        
        if (_type == ImageScrollType_Guide)
        {
            _pageCtl.center = CGPointMake(SCR_W/2, SCR_H-FIT_Y(30));
            
        }
        else
        {
            _pageCtl.center = CGPointMake(self.frame.origin.x + self.frame.size.width/2                     , self.frame.origin.y+self.frame.size.height-FIT_Y(25));
        }
        
        _pageCtl.pageIndicatorTintColor = [UIColor grayColor];
        _pageCtl.currentPageIndicatorTintColor = [UIColor redColor];
        _pageCtl.hidesForSinglePage = YES;
        _pageCtl.numberOfPages = _imgCount;
        _pageCtl.currentPage = 0;
    }
    return _pageCtl;
}


#pragma mark - 添加图片子视图



/// 添加图片子视图
-(void)addImageSubViews:(NSArray *)imgNameArr
{
    // guide样式
    if (_type == ImageScrollType_Guide)
    {
        for (int i = 0; i<imgNameArr.count; i++)
        {
            // 实例化图形视图
            UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0 + i * self.frame.size.width, 0, self.frame.size.width, self.frame.size.height)];
            // 添加为滚动视图的子视图
            [self addSubview:imgView];
            // 设置图形视图的图片
            imgView.image = [UIImage imageNamed:imgNameArr[i]];
           
                // 最后一个图形视图
                if(i==imgNameArr.count-1)
                {
                    imgView.userInteractionEnabled = YES;
                    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
                    btn.frame = _confirmBtnFrame;
                    [btn setTitle:_confirmBtnTitle forState:UIControlStateNormal];
                    [btn setTitleColor:_confirmBtnTitleColor forState:UIControlStateNormal];
                    [btn addTarget:self action:@selector(confirmBtnDidHandle:) forControlEvents:UIControlEventTouchUpInside];
                    [imgView addSubview:btn];
                
               }
            
        }

    }
    // banner 样式
    else
    {
        for (int i = 0; i < imgNameArr.count+2; i++)
        {
            UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0+self.frame.size.width*i, 0, self.frame.size.width, self.frame.size.height)];
            // 添加为self的子视图
            [self addSubview:imgView];
            
            if (i == 0) // 第一个图片子视图加载的是图片数组中最后一张图片
            {
               imgView.image = [UIImage imageNamed:imgNameArr[imgNameArr.count-1]];
                imgView.tag = imgNameArr.count -1;
            }
            else if (i == imgNameArr.count +1)// 最后一个图片子视图加载的是图片数组的第一张
            {
                imgView.image = [UIImage imageNamed:imgNameArr[0]];
                imgView.tag = 0;
            }
            else  // 中间图片子视图的图片设置
            {
                imgView.image = [UIImage imageNamed:imgNameArr[i-1]];
                imgView.tag = i-1;
            }
            imgView.userInteractionEnabled = YES;
            UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapDidHandle:)];
            
            [imgView addGestureRecognizer:tap];
            
            // 首先设定_disX的初始值
            _disx = self.frame.size.width;
            // 设置子视图的开始的滚动位置
            [self setContentOffset:CGPointMake(_disx, 0)animated:NO];
            
        }
    }
    
    
    
    
    
}



#pragma mark - 触发方法
// 定时器触发的方法
-(void)timerDidHandle:(NSTimer *)t
{
    _disx += self.frame.size.width;
    
    // 让滚动视图滚动至该位置
    //[self setContentOffset:CGPointMake(_disx, self.frame.origin.y)animated:YES];
    
    [self scrollRectToVisible:CGRectMake(_disx, self.frame.origin.y, self.frame.size.width, self.frame.size.height) animated:YES];
}

/// guide最后视图上的“立即体验”按钮触发
-(void)confirmBtnDidHandle:(UIButton *)btn {
    if ([self.scDelegate respondsToSelector:@selector(experienceDidHandle)]) {
        [self.scDelegate experienceDidHandle];
    }
}

/// banner图片点击后触发
-(void)tapDidHandle:(UITapGestureRecognizer *)tap {
    // 获取触发了该点击手势的视图对象
    UIView *tapView = tap.view;
    
    if (![tapView isKindOfClass:[UIImageView class]]) {
        return;
    }
    
    NSInteger tag = tapView.tag;
    if ([self.scDelegate respondsToSelector:@selector(bannerImageDidHandleWithIndex:)])  {
        [self.scDelegate bannerImageDidHandleWithIndex:tag];
    }
}




#pragma mark - UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // guide样式
    if (_type == ImageScrollType_Guide)
    {
        // 获取滚动视图滚动的距离
        CGPoint pos = scrollView.contentOffset;
        // 获取当前的分页的下标
        NSInteger index = (int)(pos.x/self.frame.size.width);
        // 改变分页控制器的当前下标
        self.pageCtl.currentPage = index;
        

    }
    // Banner样式
    else
    {
        // 获取滚动视图滚动的距离
        CGPoint pos = scrollView.contentOffset;
        // 赋值
        _disx = pos.x;
        
        
        // 如果滚动到第一张子视图,其实显示的是倒数第2个子视图

        if (_disx == 0)
        {
            [self setContentOffset:CGPointMake(self.frame.size.width *_imgCount, 0) animated:NO];
        }
        // 如果滚动到最后一张子视图,其实显示的是第2个子视图
        else if (_disx == self.frame.size.width *(_imgCount+1))
        {
            [self setContentOffset:CGPointMake(self.frame.size.width, 0) animated:NO];
        }
        
    }
    /*
          设置分页控制器当前的分页
     */
    // 最后一张图的点
    if (_disx == 0 || _disx == self.frame.size.width * _imgCount)
    {
        self.pageCtl.currentPage = _imgCount-1;
    }
    // 第一张图
    else if (_disx == self.frame.size.width || _disx == self.frame.size.width *(_imgCount +1))
    {
        self.pageCtl.currentPage = 0;
    }
    // 其他图片
    else
    {
        self.pageCtl.currentPage = (int) (_disx / self.frame.size.width)-1;
    }
}

在ViewController中导入头文件

#import "ViewController.h"
#import "ImageScrollView.h"

在书写以下代码

 self.view.backgroundColor = [UIColor whiteColor];
    NSArray *imaArr = @[@"军队1.jpeg",@"军队2.png",@"女排1.jpeg"];
    ImageScrollView *imgScrollView = [[ImageScrollView alloc]initWithFrame:CGRectMake(10, 100, 200, 200) style:ImageScrollType_Banner images:imaArr confirmBtnTitle:nil confirmBtnTitleColor:nil confirmBtnFrame:CGRectNull autoScrollTimeInterval:3.0 delegate:self];
    [self.view addSubview:imgScrollView];
    [imgScrollView addPageControlToSuperView:self.view];
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android和iOS图片轮播
    iOS图片轮播 讲解顺序： 效果图 代码 所用类的官方文档讲解 1、效果图 2、代码 3、官方文档讲解 NSTim...
    狼牙战士阅读 412评论 3赞 5
  • IOS 图片轮播器/浏览器手势缩放
    项目需求：图片浏览器（可以左右切换，需要支持手势缩放的功能）https://github.com/Shannoon...
    Brice_Zhao阅读 1,490评论 0赞 6
  • iOS面试题300+
    *面试心声:其实这些题本人都没怎么背,但是在上海 两周半 面了大约10家 收到差不多3个offer,总结起来就是把...
    Dove_iOS阅读 27,211评论 30赞 472
  • 军迷日更21：若要为国，不当兵一样可以
    我一直奇怪为什么有钱人都喜欢把钱财存在瑞士银行，那么放心那个国家吗？后来专门去查了查这个国家，敬佩之心油然而生，全...
    拾伤青年阅读 886评论 2赞 2
  • 花娘/小小说
    花娘是上世纪五十年代过年时嫁到我村成为我的婶娘。之所以称为花娘，自然与她的长相分不开的。 作为一个农村人家，家底十...
    高安让阅读 545评论 7赞 3