iOS：實現圖片的無限輪播－－－之使用第三方庫SDCycleScrollView

SDCycleScrollView API 

//

//  SDCycleScrollView.h

//  SDCycleScrollView

 

#import <UIKit/UIKit.h>

 

typedef enum {

    SDCycleScrollViewPageContolAlimentRight,

    SDCycleScrollViewPageContolAlimentCenter

} SDCycleScrollViewPageContolAliment;

 

typedef enum {

    SDCycleScrollViewPageContolStyleClassic,        // 系統自帶經典樣式

    SDCycleScrollViewPageContolStyleAnimated,       // 動畫效果pagecontrol

    SDCycleScrollViewPageContolStyleNone            // 不顯示pagecontrol

} SDCycleScrollViewPageContolStyle;

 

@class SDCycleScrollView;

 

@protocol SDCycleScrollViewDelegate <NSObject>

 

@optional

 

/** 點擊圖片回調 */

- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didSelectItemAtIndex:(NSInteger)index;

 

/** 圖片滾動回調 */

- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didScrollToIndex:(NSInteger)index;

 

@end

 

@interface SDCycleScrollView : UIView

 

 

/** 初始輪播圖（推薦使用） */

+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame delegate:(id<SDCycleScrollViewDelegate>)delegate placeholderImage:(UIImage *)placeholderImage;

 

+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame imageURLStringsGroup:(NSArray *)imageURLStringsGroup;

 

 

/** 本地圖片輪播初始化方式 */

+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame imageNamesGroup:(NSArray *)imageNamesGroup;

 

/** 本地圖片輪播初始化方式2,infiniteLoop:是否無限循環 */

+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame shouldInfiniteLoop:(BOOL)infiniteLoop imageNamesGroup:(NSArray *)imageNamesGroup;

 

 

//////////////////////  數據源接口  //////////////////////

 

/** 網絡圖片 url string 數組 */

@property (nonatomic, strong) NSArray *imageURLStringsGroup;

 

/** 每張圖片對應要顯示的文字數組 */

@property (nonatomic, strong) NSArray *titlesGroup;

 

/** 本地圖片數組 */

@property (nonatomic, strong) NSArray *localizationImageNamesGroup;

 

  

 

//////////////////////  滾動控制接口 //////////////////////

 

/** 自動滾動間隔時間,默認2s */

@property (nonatomic, assign) CGFloat autoScrollTimeInterval;

 

/** 是否無限循環,默認Yes */

@property (nonatomic,assign) BOOL infiniteLoop;

 

/** 是否自動滾動,默認Yes */

@property (nonatomic,assign) BOOL autoScroll;

 

/** 圖片滾動方向，默認為水平滾動 */

@property (nonatomic, assign) UICollectionViewScrollDirection scrollDirection;

 

@property (nonatomic, weak) id<SDCycleScrollViewDelegate> delegate;

 

/** block方式監聽點擊 */

@property (nonatomic, copy) void (^clickItemOperationBlock)(NSInteger currentIndex);

 

/** block方式監聽滾動 */

@property (nonatomic, copy) void (^itemDidScrollOperationBlock)(NSInteger currentIndex);

 

/** 解決viewWillAppear時出現時輪播圖卡在一半的問題，在控制器viewWillAppear時調用此方法 */

- (void)adjustWhenControllerViewWillAppera;

 

//////////////////////  自定義樣式接口  //////////////////////

 

 

/** 輪播圖片的ContentMode，默認為 UIViewContentModeScaleToFill */

@property (nonatomic, assign) UIViewContentMode bannerImageViewContentMode;

 

/** 占位圖，用於網絡未加載到圖片時 */

@property (nonatomic, strong) UIImage *placeholderImage;

 

/** 是否顯示分頁控件 */

@property (nonatomic, assign) BOOL showPageControl;

 

/** 是否在只有一張圖時隱藏pagecontrol，默認為YES */

@property(nonatomic) BOOL hidesForSinglePage;

 

/** 只展示文字輪播 */

@property (nonatomic, assign) BOOL onlyDisplayText;

 

/** pagecontrol 樣式，默認為動畫樣式 */

@property (nonatomic, assign) SDCycleScrollViewPageContolStyle pageControlStyle;

 

/** 分頁控件位置 */

@property (nonatomic, assign) SDCycleScrollViewPageContolAliment pageControlAliment;

 

/** 分頁控件距離輪播圖的底部間距（在默認間距基礎上）的偏移量 */

@property (nonatomic, assign) CGFloat pageControlBottomOffset;

 

/** 分頁控件距離輪播圖的右邊間距（在默認間距基礎上）的偏移量 */

@property (nonatomic, assign) CGFloat pageControlRightOffset;

 

/** 分頁控件小圓標大小 */

@property (nonatomic, assign) CGSize pageControlDotSize;

 

/** 當前分頁控件小圓標顏色 */

@property (nonatomic, strong) UIColor *currentPageDotColor;

 

/** 其他分頁控件小圓標顏色 */

@property (nonatomic, strong) UIColor *pageDotColor;

 

/** 當前分頁控件小圓標圖片 */

@property (nonatomic, strong) UIImage *currentPageDotImage;

 

/** 其他分頁控件小圓標圖片 */

@property (nonatomic, strong) UIImage *pageDotImage;

 

/** 輪播文字label字體顏色 */

@property (nonatomic, strong) UIColor *titleLabelTextColor;

 

/** 輪播文字label字體大小 */

@property (nonatomic, strong) UIFont  *titleLabelTextFont;

 

/** 輪播文字label背景顏色 */

@property (nonatomic, strong) UIColor *titleLabelBackgroundColor;

 

/** 輪播文字label高度 */

@property (nonatomic, assign) CGFloat titleLabelHeight;

 

 

 

//////////////////////  清除緩存接口  //////////////////////

 

/** 清除圖片緩存（此次升級后統一使用SDWebImage管理圖片加載和緩存）  */

+ (void)clearImagesCache;

 

/** 清除圖片緩存（兼容舊版本方法） */

- (void)clearCache;

 

@end

 

說明

下載鏈接：github不斷更新地址：https://github.com/gsdios/SDCycleScrollView

使用原理：采用UICollectionView的重用機制和循環滾動的方式實現圖片的無限輪播，播放非常順暢，解決了UISCrollView使用時從最后一張跳到第一張時的生硬狀態。

主要類截圖：

SDCollectionViewCell:用來重用的item，即顯示圖片的視圖；

SDCycleScrollView: 對外提供的一個創建輪播器的接口類，使用者就是直接使用這個類來實現圖片輪播的；

：這幾個類主要是用來處理分頁節點的，可以使用默認的原點分頁節點，也可以使用圖片節點；

TAPageControl:顧名思義，可知這個是用來設置分頁的；

：一個簡化使用視圖frame結構體及其結構體中屬性的視圖分類。 

 

無限循環自動圖片輪播器(一步設置即可使用)

 

// 網絡加載圖片的輪播器
SDCycleScrollView *cycleScrollView = [cycleScrollViewWithFrame:frame delegate:delegate placeholderImage:placeholderImage];
cycleScrollView.imageURLStringsGroup = imagesURLStrings;

// 本地加載圖片的輪播器
SDCycleScrollView *cycleScrollView = [SDCycleScrollView cycleScrollViewWithFrame:frame  imageNamesGroup:圖片數組];

 

 

詳情頁面地址：http://code.cocoachina.com/view/129190
更改記錄：
2016.01.15 -- 兼容assets存放的本地圖片
2016.01.06 -- 0.圖片管理使用SDWebImage；1.優化內存，提升性能；2.添加圖片contentmode接口；3.block監聽點擊接口；4.滾動到某張圖片監聽；5.增加自定義圖片pageControl接口；6.其他等等。其中有一處接口改動：pagecontrol的小圓點自定義接口改為：currentPageDotColor、pageDotColor、currentPageDotImage、pageDotImage。

PS:
現已支持cocoapods導入：pod ‘SDCycleScrollView‘,‘~> 1.6‘ 

 

 

 

 

具體代碼演示如下：

1.倒入頭文件和設置屬性

#import <SDCycleScrollView.h> // 我采用的是CopcoaPods管理工具導入的第三方庫，所以使用<>導入頭文件名

@interface ViewController ()<SDCycleScrollViewDelegate>
@property (strong,nonatomic)NSArray *localImages;//本地圖片
@property (strong,nonatomic)NSArray *netImages;  //網絡圖片
@property (strong,nonatomic)SDCycleScrollView *cycleScrollView;//輪播器
@end

2.懶加載本地圖片和網絡圖片

/**
 *  懶加載本地圖片數據
 */
-(NSArray *)localImages{
    
    if (!_localImages) {
        _localImages = @[@"1.png",@"2.png",@"3.png",@"4.png"];
    }
    return _localImages;
}

/**
 *  懶加載網絡圖片數據
 */
-(NSArray *)netImages{
    
    if (!_netImages) {
        _netImages = @[
                       @"http://d.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40f507b2e99aa64034f78f01930.jpg",
                       @"http://b.hiphotos.baidu.com/zhidao/pic/item/4b90f603738da9770889666fb151f8198718e3d4.jpg",
                       @"http://g.hiphotos.baidu.com/zhidao/pic/item/f2deb48f8c5494ee4e84ef5d2cf5e0fe98257ed4.jpg",
                       @"http://d.hiphotos.baidu.com/zhidao/pic/item/9922720e0cf3d7ca104edf32f31fbe096b63a93e.jpg"
                     ];
    }
    return _netImages;
}

3－1.封裝方法，輪播本地圖片

/**
 *  輪播本地圖片
 */
-(void)ScrollLocalImages{
    
    /** 測試本地圖片數據*/
    CGRect rect = CGRectMake(0,150, self.view.bounds.size.width, 400);
    self.cycleScrollView = [SDCycleScrollView cycleScrollViewWithFrame:rect imageNamesGroup:self.localImages];
    
    //設置圖片視圖顯示類型
    self.cycleScrollView.bannerImageViewContentMode = UIViewContentModeScaleToFill;
    
    //設置輪播視圖的分頁控件的顯示
    self.cycleScrollView.showPageControl = YES;
    
    //設置輪播視圖分也控件的位置
    self.cycleScrollView.pageControlAliment = SDCycleScrollViewPageContolAlimentCenter;
    
    //當前分頁控件小圓標顏色
    self.cycleScrollView.currentPageDotColor = [UIColor redColor];
    
    //其他分頁控件小圓標顏色
    self.cycleScrollView.pageDotColor = [UIColor purpleColor];
    
    [self.view addSubview:self.cycleScrollView];
}

3－2.封裝方法，輪播網絡圖片

/**
 *  輪播網絡圖片
 */

-(void)ScrollNetWorkImages{
    
    /** 測試本地圖片數據*/
    CGRect rect = CGRectMake(0,150, self.view.bounds.size.width, 400);
    self.cycleScrollView = [SDCycleScrollView cycleScrollViewWithFrame:rect delegate:self placeholderImage:[UIImage imageNamed:@"PlacehoderImage.png"]];
    
    //設置網絡圖片數組
    self.cycleScrollView.imageURLStringsGroup = self.netImages;
    
    //設置圖片視圖顯示類型
    self.cycleScrollView.bannerImageViewContentMode = UIViewContentModeScaleToFill;
    
    //設置輪播視圖的分頁控件的顯示
    self.cycleScrollView.showPageControl = YES;
    
    //設置輪播視圖分也控件的位置
    self.cycleScrollView.pageControlAliment = SDCycleScrollViewPageContolAlimentCenter;
    
    //當前分頁控件小圓標圖片
    self.cycleScrollView.pageDotImage = [UIImage imageNamed:@"pageCon.png"];

    //其他分頁控件小圓標圖片
    self.cycleScrollView.currentPageDotImage = [UIImage imageNamed:@"pageConSel.png"];
    
    
    [self.view addSubview:self.cycleScrollView];
}
#pragma mark - 代理方法
/** 點擊圖片回調 */
- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didSelectItemAtIndex:(NSInteger)index{
    
    //NSLog(@"%ld",index);
}

/** 圖片滾動回調 */
- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didScrollToIndex:(NSInteger)index{
    
   //NSLog(@"%ld",index);
}

 

測試1:

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self ScrollLocalImages];
}

測試2: (一開始有占位圖片，因為已經測試過，做了緩存，所以沒有貼出截圖)

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self ScrollNetWorkImages];
}