自定义轮播视图


#import "UIScrollView_leftAndRight.h"
#define kwidth self.frame.size.width  //自定义View的宽
#define kheight self.frame.size.height//自定义View的高

@interface UIScrollView_leftAndRight ()<UIScrollViewDelegate>//遵守协议
@property (nonatomic,strong)UIScrollView *scrollView;
//定义三个imageView属性
@property (nonatomic,strong)UIImageView *leftImageView;
@property (nonatomic,strong)UIImageView *middleImageView;
@property (nonatomic,strong)UIImageView *rightImageView;
//定时器
@property (nonatomic,strong)NSTimer *timer;
//在初始化时用来接收方法调用时需要传入的数组
@property (nonatomic,strong)NSArray *array;
@property (nonatomic,strong)UIPageControl *pageControl;
@end

创建UI

@implementation UIScrollView_leftAndRight

//重写初始化方法病传入存放图片的数组，并声明在.h文件中
- (instancetype)initWithFrame:(CGRect)frame   Array:(NSArray *)array{
    self = [super initWithFrame:frame];
    if (self) {
        self.array = array;
        //设置scrollView的偏移量在视图出现的时候为一个屏宽
        self.scrollView.contentOffset = CGPointMake(kwidth, 0);
        //小圆点的个数
        self.pageControl.numberOfPages = array.count;
        [self createView];
    }
    return self;
}
-(void)createView{
    [self addSubview:self.scrollView];
    [self addSubview:self.pageControl];
    [self.scrollView addSubview:self.leftImageView];
    [self.scrollView addSubview:self.middleImageView];
    [self.scrollView addSubview:self.rightImageView];
    //延迟执行timer方法，时间与timer重复执行方法的时间相同
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        //开启定时器
        self.timer.fireDate = [NSDate distantPast];
    });
}
//滚动视图懒加载
-(UIScrollView *)scrollView{
    if (!_scrollView) {
        _scrollView = [[UIScrollView alloc]initWithFrame:self.frame];
        //三个图片大小的宽度
        _scrollView.contentSize = CGSizeMake(kwidth*3, 0);
        //以下是设置一些基本属性
        _scrollView.pagingEnabled = YES;
        _scrollView.bounces = NO;
        //设置代理
        _scrollView.delegate = self;
    }
    return _scrollView;
}
//三个ImageView的懒加载
-(UIImageView *)leftImageView{
    if (!_leftImageView) {
        _leftImageView = [[UIImageView alloc]initWithFrame:self.frame];
        _leftImageView.image = self.array[self.array.count-1];//数组中最后一张图片
    }
    return _leftImageView;
}
-(UIImageView *)middleImageView{
    if (!_middleImageView) {
        _middleImageView = [[UIImageView alloc]initWithFrame:CGRectMake(kwidth, 0, kwidth, kheight)];
        _middleImageView.image = self.array[0];//数组中第一张图片
    }
    return _middleImageView;
}

-(UIImageView *)rightImageView{
    if (!_rightImageView) {
        _rightImageView = [[UIImageView alloc]initWithFrame:CGRectMake(kwidth*2, 0, kwidth, kheight)];
        _rightImageView.image = self.array[1];
    }
    return _rightImageView;
}
//圆点指示器懒加载
-(UIPageControl *)pageControl{
    if (!_pageControl) {
        _pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, kheight-99, kwidth, 50)];
     }
    return _pageControl;
}

关键代码


#pragma mark 实现协议方法
//视图滑动时候的设置偏移量均为中间imageView及准备左右图片
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //右滑时设置
    if (scrollView.contentOffset.x == kwidth * 2) {
        scrollView.contentOffset = CGPointMake(kwidth,0);
        self.middleImageView.image = self.rightImageView.image;
        //数组临界值判断
        if ([self.array indexOfObject:self.middleImageView.image ] >= self.array.count-1) {
            self.rightImageView.image = self.array.firstObject;
            self.leftImageView.image = self.array[[self.array indexOfObject:self.middleImageView.image]-1];
        }else  if ([self.array indexOfObject:self.middleImageView.image ] <= 0){
            self.rightImageView.image = self.array[[self.array indexOfObject:self.middleImageView.image]+1 ];
            self.leftImageView.image = self.array.lastObject;
        }else{
            self.rightImageView.image = self.array[[self.array indexOfObject:self.middleImageView.image]+1 ];
            self.leftImageView.image = self.array[[self.array indexOfObject:self.middleImageView.image]-1];
        }
    }
    //左滑时设置
    if (scrollView.contentOffset.x == 0) {
        scrollView.contentOffset = CGPointMake(kwidth, 0);
        self.middleImageView.image = self.leftImageView.image;
        //数组临界值判断
        if ([self.array indexOfObject:self.middleImageView.image] <= 0) {
            self.leftImageView.image = self.array.lastObject;
            self.rightImageView.image = self.array[[self.array indexOfObject:self.middleImageView.image]+1 ];
        }else  if ([self.array indexOfObject:self.middleImageView.image ] >= self.array.count-1){
            self.leftImageView.image = self.array[[self.array indexOfObject:self.middleImageView.image]-1];
            self.rightImageView.image = self.array.firstObject;
        }else{
            self.leftImageView.image = self.array[[self.array indexOfObject:self.middleImageView.image]-1];
            self.rightImageView.image = self.array[[self.array indexOfObject:self.middleImageView.image]+1 ];
        }
    }
    //指示器与显示图片同步
    self.pageControl.currentPage = [self.array indexOfObject:self.middleImageView.image];
}
//定时器懒加载
-(NSTimer *)timer{
    if (!_timer) {
        _timer  = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(timerAction) userInfo:nil repeats:YES];
    }
    return _timer;
}
//定时器开启后重复执行的方法
-(void)timerAction{
    [self.scrollView setContentOffset:CGPointMake(kwidth*2, 0)];
}
@end

轮播图调用



在控制器中引入头文件，并在viewDidLoad中调用

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationController.navigationBar.translucent = NO;

//创建数组，语法糖写法不需要初始化数组
    self.array = @[[UIImage imageNamed:@"1-1.jpg"],[UIImage imageNamed:@"1-2.jpg"],[UIImage imageNamed:@"1-3.jpg"],[UIImage imageNamed:@"1-4.jpg"],[UIImage imageNamed:@"1-5.jpg"],[UIImage imageNamed:@"1-6.jpg"],[UIImage imageNamed:@"1-7.jpg"],[UIImage imageNamed:@"1-8.jpg"],[UIImage imageNamed:@"1-9.jpg"],[UIImage imageNamed:@"1-10.jpg"],[UIImage imageNamed:@"1-11.jpg"]];

    self.scrollViewLeftAndRight = [[UIScrollView_leftAndRight alloc]initWithFrame:self.view.frame Array:self.array];
    
    [self.view addSubview:self.scrollViewLeftAndRight];

}

自定义轮播视图

推荐阅读更多精彩内容