iOS开发－banner滚动图自定义

以前老是用别人写的banner滚动图，用起来总感觉不顺手，很多东西改了再改，结果改的面目全非，本着创新精神，博主今天自己封装了一个banner滚动图，这里资源来自爱卡汽车的banner滚动图，这不算侵权吧，仅仅写一个小Demo而已，首先来看下效果吧

下面看代码：

//
//  TopScrollView.h
//  无限轮播
//
//  Created by 刘浩浩 on 16/6/12.
//  Copyright © 2016年 CodingFire. All rights reserved.
//

#import <UIKit/UIKit.h>
@class TopScrollView;
@protocol TopScrollViewDelegate <NSObject>
/*
 *UIScrollViewDelegate  协议方法，把点击的图片的位置传给使用者
 */
-(void)didClickScrollViewWithIndex:(NSInteger)index;

@end

@interface TopScrollView : UIView<UIScrollViewDelegate>

@property (weak,nonatomic) id<TopScrollViewDelegate>delegate;
/*
 *初始化scrollView及其部件
 */
-(instancetype)initWithDataArray:(NSMutableArray *)dataArray;

@end

//
//  TopScrollView.m
//  无限轮播
//
//  Created by 刘浩浩 on 16/6/12.
//  Copyright © 2016年 CodingFire. All rights reserved.
//

#import "TopScrollView.h"
#import "DataModel.h"
#import "UIImageView+WebCache.h"


@implementation TopScrollView
{
    UIScrollView *_mainScrollView;
    UILabel *contentLabel;
    UIImageView *currentImageView;
    NSInteger _currentIndex;
    NSMutableArray *_dataArray;
    UIView *pageSubView;
}
/*
 *初始化部件，添加点击手势和定时器
 */
-(instancetype)initWithDataArray:(NSMutableArray *)dataArray
{
    if (self=[super initWithFrame:CGRectMake(0, 64, WIDTH, 170)]) {
        _mainScrollView = [[UIScrollView alloc] init];
        _mainScrollView.frame = CGRectMake(0, 0, WIDTH, 170);
        _mainScrollView.contentSize = CGSizeMake(WIDTH*3, 170);
        _mainScrollView.backgroundColor = [UIColor whiteColor];
        _mainScrollView.delegate = self;
        _mainScrollView.pagingEnabled = YES;
        _mainScrollView.userInteractionEnabled=YES;
        _mainScrollView.showsHorizontalScrollIndicator = NO;
        _mainScrollView.showsVerticalScrollIndicator=NO;
        _mainScrollView.bounces = NO;
        [_mainScrollView setContentOffset:CGPointMake(WIDTH, 0)];
        [self addSubview:_mainScrollView];
        _currentIndex = 0;
        _dataArray=[NSMutableArray arrayWithArray:dataArray];

        [self setUpWithDataArray:_dataArray];
        [self cretPageControlAndTitle];
        // 手势
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapClick)];
        [self addGestureRecognizer:tap];
        [NSTimer scheduledTimerWithTimeInterval:4 target:self selector:@selector(timerAction) userInfo:nil repeats:YES];

    }
    return self;
}
/*
 *创建标题和pageControl，此处pageCOntrol为自定义的，如需要可修改为系统的，或更换图片即可
 */
-(void)cretPageControlAndTitle
{
    contentLabel = [[UILabel alloc] init];
    contentLabel.frame = CGRectMake(0, self.frame.size.height-30, WIDTH, 30);
    contentLabel.textAlignment = NSTextAlignmentLeft;
    contentLabel.font=[UIFont systemFontOfSize:12];
    contentLabel.text = ((DataModel *)[_dataArray firstObject]).title;
    contentLabel.backgroundColor = [UIColor blackColor];
    contentLabel.textColor=[UIColor whiteColor];
    contentLabel.alpha=0.6;
    [self addSubview:contentLabel];

    pageSubView=[[UIView alloc]initWithFrame:CGRectMake(0, self.frame.size.height-30, WIDTH, 30)];
    pageSubView.backgroundColor=[UIColor clearColor];
    [self addSubview:pageSubView];

    for(int i=0;i<_dataArray.count;i++)
    {
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"News_Pic_Number02@2x.png"]];
        imageView.frame = CGRectMake(WIDTH-(_dataArray.count*12)-10+i*12, 11, 7, 7);
        if(i == 0)
        {
            imageView.image = [UIImage imageNamed:@"News_Pic_Number01@2x.png"];
        }
        [pageSubView addSubview:imageView];

    }

}
/*
 *定时器方法，使banner页无限轮播
 */
-(void)timerAction
{
    UIImageView *imageView = [pageSubView.subviews objectAtIndex:_currentIndex];
    imageView.image = [UIImage imageNamed:@"News_Pic_Number02@2x.png"];

    if (_currentIndex+1<_dataArray.count) {
        _currentIndex++;
    }
    else
    {
        _currentIndex=0;
    }
    [UIView animateWithDuration:1 animations:^{
        [_mainScrollView setContentOffset:CGPointMake(WIDTH*2, 0)];
    } completion:^(BOOL finished) {
        [_mainScrollView setContentOffset:CGPointMake(WIDTH, 0)];
        [self setUpWithDataArray:_dataArray];
    }];

    contentLabel.text = ((DataModel *)[_dataArray objectAtIndex:_currentIndex]).title;

    UIImageView *imageView1 = [pageSubView.subviews objectAtIndex:_currentIndex];
    imageView1.image = [UIImage imageNamed:@"News_Pic_Number01@2x.png"];
}

/*
 *此处为scrollView的复用，比目前网上大部分的同类型控件油画效果好，只需要三张图片依次替换即可实现轮播，不需要有几张图就使scrollView的contentSize为图片数＊宽度
 */
-(void)setUpWithDataArray:(NSArray *)dataArray
{
    for(UIView *view in _mainScrollView.subviews)
    {
        if([view isKindOfClass:[UIImageView class]])
            [view removeFromSuperview];
    }


    // 中间图
    currentImageView = [[UIImageView alloc] init];
    [currentImageView sd_setImageWithURL:[NSURL URLWithString:((DataModel *)[dataArray objectAtIndex:_currentIndex]).imgURL]];
    currentImageView.userInteractionEnabled=YES;
    currentImageView.frame = CGRectMake(WIDTH, 0, WIDTH, 170);
    [_mainScrollView addSubview:currentImageView];
    // 左侧图
    UIImageView *preImageView = [[UIImageView alloc] init];
    NSString *imageStr = _currentIndex-1>=0?((DataModel *)[dataArray objectAtIndex:_currentIndex-1]).imgURL:((DataModel *)[dataArray lastObject]).imgURL;
    preImageView.userInteractionEnabled=YES;
    [preImageView sd_setImageWithURL:[NSURL URLWithString:imageStr]];
    preImageView.frame = CGRectMake(0, 0, WIDTH, 170);
    [_mainScrollView addSubview:preImageView];
    // 右侧
    UIImageView *nextImageView = [[UIImageView alloc] init];
    nextImageView.userInteractionEnabled=YES;
    NSString *imageStr1 = _currentIndex+1<dataArray.count?((DataModel *)[dataArray objectAtIndex:_currentIndex+1]).imgURL:((DataModel *)[dataArray firstObject]).imgURL;
    [nextImageView sd_setImageWithURL:[NSURL URLWithString:imageStr1]];
    nextImageView.frame = CGRectMake(WIDTH*2, 0, WIDTH, 170);
    [_mainScrollView addSubview:nextImageView];
}
/*
 *图片的点击响应方法
 */
-(void)tapClick
{
    if ([self.delegate respondsToSelector:@selector(didClickScrollViewWithIndex:)]) {
        [self.delegate didClickScrollViewWithIndex:_currentIndex];
    }

}
/*
 *UIScrollViewDelegate  协议方法，拖动图片的处理方法
 */
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    if(scrollView == _mainScrollView)
    {
        UIImageView *imageView = [pageSubView.subviews objectAtIndex:_currentIndex];
        imageView.image = [UIImage imageNamed:@"News_Pic_Number02@2x.png"];

        int index = scrollView.contentOffset.x/WIDTH;
        if(index>1)
        {
            _currentIndex = _currentIndex+1<_dataArray.count?_currentIndex+1:0;
            [UIView animateWithDuration:1 animations:^{
                [_mainScrollView setContentOffset:CGPointMake(WIDTH*2, 0)];
            } completion:^(BOOL finished) {
                [_mainScrollView setContentOffset:CGPointMake(WIDTH, 0)];
                [self setUpWithDataArray:_dataArray];
            }];        }
        else if(index<1)
        {
            _currentIndex = _currentIndex-1>=0?_currentIndex-1:_dataArray.count-1;
            [UIView animateWithDuration:1 animations:^{
                [_mainScrollView setContentOffset:CGPointMake(0, 0)];
            } completion:^(BOOL finished) {
                [_mainScrollView setContentOffset:CGPointMake(WIDTH, 0)];
                [self setUpWithDataArray:_dataArray];
            }];
        }
        else
            NSLog(@"没滚动不做任何操作");

        contentLabel.text = ((DataModel *)[_dataArray objectAtIndex:_currentIndex]).title;

        UIImageView *imageView1 = [pageSubView.subviews objectAtIndex:_currentIndex];
        imageView1.image = [UIImage imageNamed:@"News_Pic_Number01@2x.png"];
    }



}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

@end

//
//  DataModel.h
//  无限轮播
//
//  Created by 刘浩浩 on 16/6/12.
//  Copyright © 2016年 CodingFire. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface DataModel : NSObject
/*
 *此模型不可省略，为的是传入图片链接，标题，链接地址，内容ID等数据
 */
@property(nonatomic,strong)NSString *imgURL;
@property(nonatomic,strong)NSString *title;
@property(nonatomic,strong)NSString *webLink;
@property(nonatomic,strong)NSString *contentID;


@end

以上就是工程中的主要代码，下面附上下载地址，请自取banner滚动图自定义