iOS ZJCollectionViewSummary實現無限輪播、添加索引、拖拽換位等功能總結

###一、ZJCollectionViewSummary的由來git

項目對collectionView使用率較高，就花費了兩週的業餘時間對CollectionView進行了總結，並起名爲ZJCollectionViewSummary發佈到了Github上了，感受有用就給個星吧。github

###二、ZJCollectionViewSummary的功能數組

####基礎用法總結（比較簡單，只是代碼實現、看代碼便可）網絡

一、給CollectionView添加headerView
二、給CollectionView添加/刪除cell以及添加section
三、CollectionView中cell 的多選

####進階用法（抽取出了框架）框架

一、實現圖片輪播
二、CollectionView給添加右邊索引
三、CollectionView長安拖動cell從新排序
四、常見的幾種佈局，包括水平/豎直滑動縮放、水平/豎直流水佈局、環形佈局、網格佈局。（後兩種事網上常見的就拿來了）。

###三、各功能的示意圖、介紹以及相關用法佈局

####3.一、基礎用法：都是UI層面或是處理數據刷新界面ui

3.1.一、給CollectionView添加headerViewatom

設置url

layout.headerReferenceSize = CGSizeMake(SCREEN_WIDTH, 120);

直接將headerView添加到collectionView就可實現。即：.net

[_collectionView addSubview:self.headerView];

也能夠實現代理分組的形式實現添加headerView.若只有一組這是比較好使的代碼簡單，有利於查看。

####3.1.二、給CollectionView添加/刪除cell以及添加section

都是操做數組刷新界面。沒什麼的。

3.1.三、CollectionView中cell 的多選

思路：建立兩個數組，一個是數據源_listArray，一個用做保存選中數據selectedArray。只有全選或非全選才刷新界面，點選只刷新當前cell。

核心代碼：

ZJMultiSelectCollectionViewCell *cell = (ZJMultiSelectCollectionViewCell *)[_collectionView cellForItemAtIndexPath:indexPath];
NSDictionary *dict = _listArray[indexPath.row];
if ([self.selectedArray containsObject:dict]) {
   [self.selectedArray removeObject:dict];
   cell.markV.image = [UIImage imageNamed:@"unselected_icon"];
}else{
   [self.selectedArray addObject:dict];
   cell.markV.image = [UIImage imageNamed:@"select_Icon"];
}

if (self.selectedArray.count < self.listArray.count) {
  self.isSelectAll = NO;//是否全選。
  [self.selectButton setImage:[UIImage imageNamed:@"unselected_icon"] 	forState:UIControlStateNormal];
}

###3.二、進階用法

####3.2.一、實現圖片輪播

ZJCycleView可顯示本地圖片，也能夠是網絡圖片，還能夠本地圖片與網絡圖片混合現實。樣式如圖。相關屬性和方法。

[@class](https://my.oschina.net/liwenlong7758) ZJCycleView;

[@protocol](https://my.oschina.net/u/819710) ZJCycleViewDelegate <NSObject>

@optional

/** 點擊圖片回調 */
- (void)cycleView:(ZJCycleView *)cycleView didSelectItemAtIndex:(NSInteger)index;

@end

@interface ZJCycleView : UIView

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

/** 本地圖片 */
@property (nonatomic, strong) NSArray<NSString *> *images;
/** 圖片連接 */
@property (nonatomic, strong) NSArray<NSString *> *urlA;
/** 每張圖片對應要顯示的文字數組 */
@property (nonatomic, strong) NSArray *titles;

/** 圖片和標題字典（字典結構爲：@{@"imageUrl":@"",@"title":@""}） */
@property (nonatomic, strong) NSArray<NSDictionary *> *arrayD;

@property (nonatomic, assign) ZJCycleViewType cycleViewType;

/** 自動輪播時間間隔,默認2s */
@property (nonatomic, assign) CGFloat autoCycleTimeInterval;

/** 是否顯示分頁控件 */
@property (nonatomic, assign) BOOL showPageControl;

/** 分頁控件的位置 */
@property (nonatomic, assign) ZJCyclePageContolLocation pageControlLocation;

/** pageContol點的樣式 */
@property (nonatomic, assign) ZJCyclePageContolStyle pageContolStyle;

/**
 初始化方法
 
 @param frame 位置尺寸
 @param imageUrls 須要加載的圖片數組，能夠是本地的，也能夠是網絡的圖片
 @param placeholderImage 佔位圖片
 @return ZJCycleView對象
 */
- (instancetype)initWithFrame:(CGRect)frame
                    imageUrls:(NSArray <NSString *> *)imageUrls
             placeholderImage:(UIImage*)placeholderImage;

/**
 初始化方法：圖片帶文字說明的不顯示分頁控件，可是會有總數和當前頁的顯示：2/20
 
 @param frame 位置尺寸
 @param imageUrls 須要加載的圖片數組，能夠是本地的，也能夠是網絡的圖片
 @param titles 每張圖片對應要顯示的文字數組
 @param placeholderImage 佔位圖片
 @return ZJCycleView對象
 */
- (instancetype)initWithFrame:(CGRect)frame
                    imageUrls:(NSArray <NSString *> *)imageUrls
                       titles:(NSArray <NSString *> *)titles
             placeholderImage:(UIImage*)placeholderImage;

/**
 初始化方法：圖片帶文字說明的不顯示分頁控件，可是會有總數和當前頁的顯示：2/20
 
 @param frame 位置尺寸
 @param arrayDict 是字典數組：（字典結構爲：@{@"imageUrl":@"",@"title":@""}）imageUrl能夠是本地的，也能夠是網絡的圖片連接
 @param placeholderImage 佔位圖片
 @return ZJCycleView對象
 */
- (instancetype)initWithFrame:(CGRect)frame
                    arrayDict:(NSArray <NSDictionary *> *)arrayDict
             placeholderImage:(UIImage*)placeholderImage;

/**
 初始化方法
 
 @param frame 位置尺寸
 @param imageUrls 須要加載的圖片數組，能夠是本地的，也能夠是網絡的圖片
 @param placeholderImage 佔位圖片
 @return ZJCycleView對象
 */
+ (instancetype)cycleViewWithFrame:(CGRect)frame
                         imageUrls:(NSArray <NSString *> *)imageUrls
                  placeholderImage:(UIImage *)placeholderImage;

/**
 初始化方法：圖片帶文字說明的不顯示分頁控件，可是會有總數和當前頁的顯示：2/20
 
 @param frame 位置尺寸
 @param imageUrls 須要加載的圖片數組，能夠是本地的，也能夠是網絡的圖片
 @param titles 每張圖片對應要顯示的文字數組
 @param placeholderImage 佔位圖片
 @return ZJCycleView對象
 */
+ (instancetype)cycleViewWithFrame:(CGRect)frame
                         imageUrls:(NSArray <NSString *> *)imageUrls
                            titles:(NSArray <NSString *> *)titles
                  placeholderImage:(UIImage*)placeholderImage;

/**
 初始化方法：圖片帶文字說明的不顯示分頁控件，可是會有總數和當前頁的顯示：2/20
 
 @param frame 位置尺寸
 @param arrayDict 是字典數組：（字典結構爲：@{@"imageUrl":@"",@"title":@""}）imageUrl能夠是本地的，也能夠是網絡的圖片連接
 @param placeholderImage 佔位圖片
 @return ZJCycleView對象
 */
+ (instancetype)cycleViewWithFrame:(CGRect)frame
                         arrayDict:(NSArray <NSDictionary *> *)arrayDict
                  placeholderImage:(UIImage*)placeholderImage;

/**
 當選中的ZJCyclePageContolStyle 是ZJCyclePageContolStyleImage, 圖片類型的時候調用，若是不調用使用默認圖片
 
 @param currentImage 選中圖片
 @param pageImage 默認圖片
 */
- (void)currentImage:(UIImage *)currentImage
           pageImage:(UIImage *)pageImage;

/**
 當選中的ZJCyclePageContolStyle 不是ZJCyclePageContolStyleImage,若是不使用默認顏色，能夠調用此方法設置
 
 @param currentColor 選中顏色
 @param pageColor 默認顏色
 */
-(void)currentColor:(UIColor *)currentColor
pageColor:(UIColor *)pageColor;

###3.2.二、CollectionView給添加右邊索引

核心代碼：

- (ZJCollectionViewRightIndex *)collectionViewIndex
{
    if (_collectionViewIndex == nil) {
        _collectionViewIndex = [[ZJCollectionViewRightIndex alloc] initWithFrame:CGRectMake(SCREEN_WIDTH - 20, 0, 20, SCREEN_HEIGHT)];
        _collectionViewIndex.titleIndexes = self.listArray;
        _collectionViewIndex.color = [UIColor blackColor];
        _collectionViewIndex.isSelectVisible = YES;
        CGRect rect = _collectionViewIndex.frame;
        rect.size.height = _collectionViewIndex.titleIndexes.count * 16;
        rect.origin.y = (SCREEN_HEIGHT - rect.size.height) / 2 + 64;
        _collectionViewIndex.frame = rect;
        _collectionViewIndex.collectionDelegate = self;
    }
    return _collectionViewIndex;
}

#pragma mark- ZJCollectionViewRightIndexDelegate
-(void)collectionViewIndex:(ZJCollectionViewRightIndex *)collectionViewIndex didselectionAtIndex:(NSInteger)index withTitle:(NSString *)title{
    
    if ([_collectionView numberOfSections]>index&&index>-1) {
        
        UICollectionViewLayoutAttributes *attributes = [_collectionView layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:index]];
        CGRect rect = attributes.frame;
        [_collectionView setContentOffset:CGPointMake(_collectionView.frame.origin.x, rect.origin.y - 40) animated:YES];
        
    }
}

###3.2.三、CollectionView長安拖動cell從新排序

主要代碼：

ZJReorderFlowLayout *layout = [[ZJReorderFlowLayout alloc] init];
CGFloat cellWidth = (SCREEN_WIDTH - 20) / 3.0;
layout.itemSize = CGSizeMake(cellWidth, 145);
_collectionView = [[UICollectionView alloc] initWithFrame:size collectionViewLayout:layout];


#pragma mark - ZJReorderCollectionViewDataSource methods
- (void)collectionView:(UICollectionView *)collectionView itemAtIndexPath:(NSIndexPath *)fromIndexPath willMoveToIndexPath:(NSIndexPath *)toIndexPath {
    NSDictionary *dict = self.listArray[fromIndexPath.item];
    
    [self.listArray removeObjectAtIndex:fromIndexPath.item];
    [self.listArray insertObject:dict atIndex:toIndexPath.item];
}

- (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}

- (BOOL)collectionView:(UICollectionView *)collectionView itemAtIndexPath:(NSIndexPath *)fromIndexPath canMoveToIndexPath:(NSIndexPath *)toIndexPath
{
    return YES;
}

#pragma mark - ZJReorderCollectionViewDelegateFlowLayout methods
- (void)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout willBeginDraggingItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"將開始拖動");
}

- (void)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout didBeginDraggingItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"開始拖動完成");
}

- (void)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout willEndDraggingItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"將拖動完成");
}

- (void)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout didEndDraggingItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"拖動完成");
}

###3.2.四、常見的幾種佈局，包括水平/豎直華東縮小、水平/豎直流水佈局、

####A、水平/豎滑動縮小

self.currentIndex = 0;
if (self.layout.lineDirection == ZJWaterHorizontal)
{
    self.layout.lineDirection = ZJWaterVertical;
    [self.collectionView setCollectionViewLayout:self.layout animated:YES];
} else {
    self.layout.lineDirection = ZJWaterHorizontal;
    [self.collectionView setCollectionViewLayout:self.layout animated:YES];
}
[self.collectionView reloadData];

####B、水平/豎直流水佈局

typedef NS_ENUM(NSInteger, ZJWaterDirection) {
 ZJWaterVertical,//豎直方向佈局
 ZJWaterHorizontal//水平方向佈局
};


@protocol ZJWaterLayoutDelegate <NSObject>

@required
/** 寬高轉換：ZJWaterVertical根據寬算高，ZJWaterHorizontal根據高算寬 */
- (CGFloat)waterFlowLayout:(ZJWaterLayout *)layout hieghtForItemAtIndex:(NSUInteger)index itemwidth:(CGFloat)itemwidth;

@optional
/** 列數 */
- (NSInteger)waterFlowLayoutColumnCount:(ZJWaterLayout *)layout;
/** 列間距 */
- (CGFloat)waterFlowLayoutColumnSpacing:(ZJWaterLayout *)layout;
/** 行間距 */
- (CGFloat)waterFlowLayoutRowSpacing:(ZJWaterLayout *)layout;
/** 邊距 */
- (UIEdgeInsets)waterFlowLayoutEdgeInsets:(ZJWaterLayout *)layout;

@end

@interface ZJWaterLayout : UICollectionViewLayout
/** 代理 */
@property (nonatomic,weak) id <ZJWaterLayoutDelegate> delegate;
/** 佈局方向 */
@property (nonatomic, assign) ZJWaterDirection waterDirection;

@end