UIScrollView之轮转图片

在iOS开发中，经常会在APP首页看到多张图片进行轮换。刚开始做的时候，感觉很麻烦，不是很好做，查阅资料后，我总结了一下，自己封装了一个简单的轮转图片库；

UIScrollView无限滑动 ,只需要三个View,左视图，中视图，右视图。无论向左滑动，还是向右滑动，都显示中间的一个View；

( _scrollView.contentOffset =CGPointMake(scrollView.bounds.size.width,0); )

//  CircleScrollView.h

#import <UIKit/UIKit.h>

#import "UIImageView+WebCache.h" // 当使用网络图片的时候，才会用到SDWebImage

@protocol CircleScrollViewDelegate <NSObject>

@optional

/**

 *  滚动图片总数

 *  @return 要滚动的图片的个数

 */

- (NSInteger) numberOfImagesInScrollView;

/**

 *  返回索引位置的图片，仅当滚动的为图片时使用

 *  @param index 索引位置

 *  @return 索引位置的图片

 */

-(UIImage *)imageForIndex:(NSInteger) index;

/**

 *  返回索引位置的图片URL，仅当滚动的为图片时使用

 *  @param index 索引位置

 *  @return 索引位置对应的图片URL

 */

-(NSURL *)imageURLForIndex:(NSInteger)index;

/**

 *  选中相应的视图的操作

 *  @param index 选中的相应的视图

 */

- (void)didSelectAtIndex:(NSInteger) index;

@end

@interface CircleScrollView :UIView <UIScrollViewDelegate>

@property (nonatomic,strong,readonly)UIScrollView *scrollView; 

@property (nonatomic,strong,readonly)UIPageControl *pageControl;

@property (nonatomic,strong,readonly)UIImageView *leftView;

@property (nonatomic,strong,readonly)UIImageView *middleView;

@property (nonatomic,strong,readonly)UIImageView *rightView;

@property (nonatomic,assign)int currentPageNo;

@property (nonatomic,assign,getter=isAutoLoop)BOOL autoLoop;//是否自动轮动

//@property (nonatomic,copy) NSArray *scrollImgs; 

@property (nonatomic,weak)id<CircleScrollViewDelegate> delegate;//代理

@end

//  CircleScrollView.m

#import "CircleScrollView.h"

@interfaceCircleScrollView ()

{

    NSTimer *_timer;

}

@end

@implementation CircleScrollView

/*

    自定义的ScrollView。功能如下：

    循环滑动

    使用分两步：

 （1）创建数据源(数据源中存放要滚动的图片)

 （2）_circleScrollView = [[CircleScrollView alloc] initWithFrame:CGRectMake(20, 20, 128, 128)];

 （3）设置代理 _circleScrollView.delegate = self;

 */

-(instancetype)initWithFrame:(CGRect)frame{

    self = [superinitWithFrame:frame];

    if (self) {

        _scrollView = [[UIScrollViewalloc]initWithFrame:self.bounds];

        _scrollView.delegate =self;

        _scrollView.showsHorizontalScrollIndicator =NO;

        _pageControl = [[UIPageControlalloc]initWithFrame:CGRectMake(0,self.frame.size.height-10,self.frame.size.width,10)];

        _pageControl.backgroundColor = [UIColorlightGrayColor];

        _pageControl.pageIndicatorTintColor = [UIColorredColor];

        _pageControl.currentPageIndicatorTintColor = [UIColorblueColor];

        _pageControl.alpha =0.5;

        _leftView = [[UIImageViewalloc]initWithFrame:CGRectMake(self.frame.size.width*0,0,self.frame.size.width,self.frame.size.height)];

        _middleView = [[UIImageViewalloc]initWithFrame:CGRectMake(self.frame.size.width*1,0,self.frame.size.width,self.frame.size.height)];

        _rightView = [[UIImageViewalloc]initWithFrame:CGRectMake(self.frame.size.width*2,0,self.frame.size.width,self.frame.size.height)];

        [_scrollViewaddSubview:_leftView];

        [_scrollViewaddSubview:_middleView];

        [_scrollViewaddSubview:_rightView];

        _scrollView.pagingEnabled =YES;

        _scrollView.contentSize =CGSizeMake(self.frame.size.width*3,self.frame.size.height);

        _scrollView.contentOffset =CGPointMake(self.frame.size.width,0);

        [selfaddSubview:_scrollView];

        [selfaddSubview:_pageControl];

    }

    returnself;

}

-(void)setDelegate:(id<CircleScrollViewDelegate>)delegate

{

//    NSLog(@"设置代理");

    _delegate = delegate;

    if ([_delegaterespondsToSelector:@selector(numberOfImagesInScrollView)]) {

        NSInteger number = [_delegatenumberOfImagesInScrollView];

        _pageControl.numberOfPages = number;

        _pageControl.currentPage =0;

        _currentPageNo =0;

//        _leftView.image = [_delegate imageForIndex:number-1];

//        _middleView.image = [_delegate imageForIndex:_currentPageNo];

        int nextNo =_currentPageNo;

        if (number >2) {

            nextNo = _currentPageNo+1;

        }

//        _rightView.image = [_delegate imageForIndex:nextNo];

        if ([self.delegaterespondsToSelector:@selector(imageURLForIndex:)]) {

            [_leftViewsd_setImageWithURL:[_delegateimageURLForIndex:number-1]placeholderImage:[UIImagenew]completed:^(UIImage *image,NSError *error,SDImageCacheType cacheType,NSURL *imageURL) {

                //            NSLog(@"");

            }];

            [_middleViewsd_setImageWithURL:[_delegateimageURLForIndex:_currentPageNo]placeholderImage:[UIImagenew]completed:^(UIImage *image,NSError *error,SDImageCacheType cacheType,NSURL *imageURL) {

            }];

            [_rightViewsd_setImageWithURL:[_delegateimageURLForIndex:nextNo]placeholderImage:[UIImagenew]completed:^(UIImage *image,NSError *error,SDImageCacheType cacheType,NSURL *imageURL) {

            }];

        } elseif ([self.delegaterespondsToSelector:@selector(imageForIndex:)]){

            _leftView.image = [_delegateimageForIndex:number-1];

            _middleView.image = [_delegateimageForIndex:_currentPageNo];

            _rightView.image = [_delegateimageForIndex:nextNo];

        }

    }

    if ([_delegaterespondsToSelector:@selector(didSelectAtIndex:)]) {

        _middleView.userInteractionEnabled =YES;

        UITapGestureRecognizer *tap = [[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(selectAction:)];

        [_middleViewaddGestureRecognizer:tap];

    }

}

-(void)selectAction:(UITapGestureRecognizer *)gesture {

    if ([self.delegaterespondsToSelector:@selector(didSelectAtIndex:)]) {

        [self.delegatedidSelectAtIndex:_currentPageNo];

    }

}

-(void)autoLoop{

    _currentPageNo++;

    //自动循环

    [_scrollViewscrollRectToVisible:CGRectMake(_scrollView.bounds.size.width*2,0,_scrollView.bounds.size.width,_scrollView.bounds.size.height)animated:YES];

}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

//    NSLog(@"scrollViewDidEndDecelerating");

    int pageNo = scrollView.contentOffset.x/scrollView.bounds.size.width;

    long imgCount = [_delegatenumberOfImagesInScrollView];

//    NSLog(@"pageNo : %i",pageNo);

    if (pageNo ==0) {

        _currentPageNo--;

    } elseif (pageNo ==2){

        _currentPageNo++;

    }

    if (_currentPageNo <0) {

        _currentPageNo = (int)(imgCount -1);

    } elseif (_currentPageNo > imgCount -1) {

        _currentPageNo =0;

    }

    int previousPage =_currentPageNo -1;

    if (previousPage <0) {

        previousPage = (int)(imgCount -1);

    }

    int nextPage =_currentPageNo +1;

    if (nextPage > imgCount-1) {

        nextPage = 0;

    }

    _pageControl.currentPage =_currentPageNo;

    if ([self.delegaterespondsToSelector:@selector(imageURLForIndex:)]) {

        [_leftViewsd_setImageWithURL:[_delegateimageURLForIndex:previousPage]placeholderImage:[UIImagenew]completed:^(UIImage *image,NSError *error,SDImageCacheType cacheType,NSURL *imageURL) {

        }];

        [_middleViewsd_setImageWithURL:[_delegateimageURLForIndex:_currentPageNo]placeholderImage:[UIImagenew]completed:^(UIImage *image,NSError *error,SDImageCacheType cacheType,NSURL *imageURL) {

        }];

        [_rightViewsd_setImageWithURL:[_delegateimageURLForIndex:nextPage]placeholderImage:[UIImagenew]completed:^(UIImage *image,NSError *error,SDImageCacheType cacheType,NSURL *imageURL) {

        }];

    } elseif ([self.delegaterespondsToSelector:@selector(imageForIndex:)]){

        _leftView.image = [_delegateimageForIndex:previousPage];

        _middleView.image = [_delegateimageForIndex:_currentPageNo];

        _rightView.image = [_delegateimageForIndex:nextPage];

    }

    _scrollView.contentOffset =CGPointMake(scrollView.bounds.size.width,0);

}

@end

　　关于自动循环，我们可以自定义，其实就是加一个NSTimer定时器，每过一定的时间让scrollView滑向下一个View，即：

[_scrollViewscrollRectToVisible:CGRectMake(_scrollView.bounds.size.width*2,0,_scrollView.bounds.size.width,_scrollView.bounds.size.height)animated:YES];
scrollView会自动的滑向第三个View。然后图片就可以自动定时滑动了。

使用上述自定义的轮转图片时，一定要遵守UIScrollViewDelegate协议并实现代理方法，否则不可用。