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協議並實現代理方法，不然不可用。