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

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

時間： 2016-01-19 19:13:43      閱讀：630      評論：0      收藏：0      [點我收藏+]

標籤：

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

View Code

 

具體代碼演示以下：

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