iOS开发：自定义库实现广告图片轮播

前言

iOS开发中几乎每个app都有一个图片／广告轮播的功能需求，网上已经有很多此类的第三方库，但是这些库不一定100%符合项目需求，本文针对新手筒子，一步步教你做自己的图片轮播库，在此基础上可以针对自己的需求进行修改和完善。

思路

实现广告图片轮播功能有很多种方式，本文采用头尾重叠的障眼法来实现。
比如有 1 2 3 4 5 共五张图片，我们可以设置成这样 5 1 2 3 4 5 1 七张，默认显示第二张也就是 1，当1向左划的时候显示 5，同时把滚动视图显示的位置调整到倒数第二张，也就是 5 ； 同理，5 向右划也返回到第二张的位置，也就是 1 。这样就“在视觉上”实现了轮播。

正片：

1、新建自己的库文件

它继承UIView，采用UIScrollView进行展示，UIPageControl进行页面控制。

2、重写init方法

define WIDTH self.bounds.size.width
define HEIGHT self.bounds.size.height

@interface SUPictureScroll ()<UIScrollViewDelegate>

@property (nonatomic,strong) UIScrollView * scrollView;
@property (nonatomic,strong) UIPageControl * pageControl;

@end

重写initWithFrame方法，并添加一个ScrollView和一个PageControl，注意ScrollView先不要设置ContentSize，PageControl不要设置numberOfPages，这两个是需要后面根据传入的图片数量来设置的。

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self setupScrollView];
        [self setupPageControl];
    }
    return self;
}


//创建scrollView
- (void)setupScrollView {
    self.scrollView = [[UIScrollView alloc]initWithFrame:self.bounds];
    self.scrollView.bounces = NO;
    self.scrollView.pagingEnabled = YES;
    self.scrollView.delegate = self;
    self.scrollView.showsHorizontalScrollIndicator = NO;
    [self addSubview:self.scrollView];
}

//设置pageControl
- (void)setupPageControl {

    self.pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, HEIGHT - 20, WIDTH, 20)];
    self.pageControl.currentPageIndicatorTintColor = [UIColor colorWithRed:0.9646 green:1.0 blue:0.9708 alpha:1.0];
    self.pageControl.pageIndicatorTintColor = [UIColor colorWithRed:0.8443 green:0.4344 blue:0.4678 alpha:1.0];
    [self.pageControl addTarget:self action:@selector(handlePageControl:) forControlEvents:UIControlEventValueChanged];
    [self addSubview:self.pageControl];

}

3、定义图片显示方式

在项目中，不一定都会显示本地的图片，大部分需要显示网络图片，有各种不同的需求，所以我们需要自定义图片显示的方式。
这里我们通过block来实现

@property (nonatomic,retain) NSMutableArray * picUrlArray;
@property (nonatomic,copy) void (^showImg)(UIImageView * imageView, NSString * imgUrl);

给定一个数组和显示方式，在set方法中完成显示

//设置图片
-(void)setPicUrlArray:(NSMutableArray *)picUrlArray {
    if (picUrlArray.count > 1) {
        _picUrlArray = picUrlArray;

        //循环轮播，数组＋2，图片＋2
        self.pageControl.numberOfPages = picUrlArray.count;

        [picUrlArray insertObject:[picUrlArray lastObject] atIndex:0];
        [picUrlArray addObject:picUrlArray[1]];

        self.scrollView.contentSize = CGSizeMake(picUrlArray.count * WIDTH, HEIGHT);
        [self.scrollView setContentOffset:CGPointMake(WIDTH, 0)];


        for (int i = 0; i < picUrlArray.count; i ++) {
            UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(WIDTH * i, 0, WIDTH, HEIGHT)];

            //自定义显示图片的方式
            if (self.showImg) {
                NSString * picUrl = picUrlArray[i];
                self.showImg(imageView,picUrl);
            }
            [self.scrollView addSubview:imageView];
        }

    }
}

4、滚动视图的位置调整

//点击小圆点时动作
- (void)handlePageControl:(UIPageControl *)pageControl {

    [self.scrollView setContentOffset:CGPointMake((pageControl.currentPage + 1) * WIDTH, 0) animated:YES];

}

//滚动结束后调整位置（手动）
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

    CGPoint point = scrollView.contentOffset;
    CGSize size = scrollView.contentSize;
    if (point.x == 0) {
        [self.scrollView setContentOffset:CGPointMake(size.width - WIDTH * 2, 0) animated:NO];
    }else if (point.x == size.width - WIDTH) {
        [self.scrollView setContentOffset:CGPointMake(WIDTH, 0) animated:NO];
    }

    CGPoint newPoint = scrollView.contentOffset;
    self.pageControl.currentPage = (newPoint.x - WIDTH) / WIDTH;
}

//滚动结束后调整位置（动画）
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {
    [self scrollViewDidEndDecelerating:scrollView];
}

5、定时轮播

如果需要定时轮播的功能，我们给它增加新的属性

@property (nonatomic,assign) BOOL isTimingShow;

然后在set方法中实现

//定时器轮播
-(void)setIsTimingShow:(BOOL)isTimingShow {
    _isTimingShow = isTimingShow;

    if (isTimingShow) {
        [NSTimer scheduledTimerWithTimeInterval:2.5 target:self selector:@selector(changePic) userInfo:nil repeats:YES];
    }
}

- (void)changePic {
    CGPoint point = self.scrollView.contentOffset;
    point.x += WIDTH;
    [self.scrollView setContentOffset:point animated:YES];
}

6、其他功能

本文展示的功能仅止于此，如果需要其他功能（比如自定义pageControl的颜色，位置，比如增加一个图片名称展示半透明层等等）原理也是类似的，要筒子们学会举一反三啦。

7、库的使用

在ViewController.m导入我们的库

#import "SUPictureScroll.h"

然后就开工干活：

//新建轮播对象
    SUPictureScroll * PS = [[SUPictureScroll alloc]initWithFrame:CGRectMake(0, 64, 375, 250)];
 //指定图片轮播方式和图片数组
 NSMutableArray * array = [NSMutableArray arrayWithObjects:@"http://pic1.nipic.com/2008-09-08/200898163242920_2.jpg",@"http://i6.topit.me/6/5d/45/1131907198420455d6o.jpg",@"http://pic1a.nipic.com/2008-12-04/2008124215522671_2.jpg", nil];
    [PS setShowImg:^(UIImageView * imageView, NSString * picUrl) {
    //这里我用了SDWebImage第三方库帮助我管理图片，省心省力
        [imageView sd_setImageWithURL:[NSURL URLWithString:picUrl]];
    }];
    PS.picUrlArray = array;
 //是否定时轮播
 PS.isTimingShow = YES;
 //加到视图中
 [self.view addSubview:PS];

大功告成！！看看成果吧！！

8、效果图

9、demo下载

下载地址（点击我）https://github.com/DaMingShen/SUPictureScroll