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

下載鏈接：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' 

 

SDCycleScrollView.h文件中的代碼如下：

#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 // >>>>>>>>>>>>>>>>>>>>>>>>>> 數據源接口

/** 本地圖片數組 */ @property (nonatomic, strong) NSArray *localizationImageNamesGroup; /** 網絡圖片 url string 數組 */ @property (nonatomic, strong) NSArray *imageURLStringsGroup; /** 每張圖片對應要顯示的文字數組 */ @property (nonatomic, strong) NSArray *titlesGroup; // >>>>>>>>>>>>>>>>>>>>>>>>> 滾動控制接口

/** 自動滾動間隔時間,默認2s */ @property (nonatomic, assign) CGFloat autoScrollTimeInterval; /** 是否無限循環,默認Yes */ @property(nonatomic,assign) BOOL infiniteLoop; /** 是否自動滾動,默認Yes */ @property(nonatomic,assign) BOOL autoScroll; @property (nonatomic, weak) id<SDCycleScrollViewDelegate> delegate; /** block監聽點擊方式 */ @property (nonatomic, copy) void (^clickItemOperationBlock)(NSInteger currentIndex); // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 自定義樣式接口

/** 輪播圖片的ContentMode，默認為 UIViewContentModeScaleToFill */ @property (nonatomic, assign) UIViewContentMode bannerImageViewContentMode; /** 占位圖，用於網絡未加載到圖片時 */ @property (nonatomic, strong) UIImage *placeholderImage; /** 是否顯示分頁控件 */ @property (nonatomic, assign) BOOL showPageControl; /** 是否在只有一張圖時隱藏pagecontrol，默認為YES */ @property(nonatomic) BOOL hidesForSinglePage; /** pagecontrol 樣式，默認為動畫樣式 */ @property (nonatomic, assign) SDCycleScrollViewPageContolStyle pageControlStyle; /** 分頁控件位置 */ @property (nonatomic, assign) SDCycleScrollViewPageContolAliment pageControlAliment; /** 分頁控件小圓標大小 */ @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; /** 初始輪播圖（推薦使用） */
+ (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; // >>>>>>>>>>>>>>>>>>>>>>>>> 清除緩存接口

/** 清除圖片緩存（此次升級后統一使用SDWebImage管理圖片加載和緩存） */
+ (void)clearImagesCache; /** 清除圖片緩存（兼容舊版本方法） */
- (void)clearCache; @end

 

具體代碼演示如下：

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]; }