1、ZJCollectionViewSummary的由來
項目對collectionView使用率較高，就花費了兩周的業余時間對CollectionView進行了總結，并起名為ZJCollectionViewSummary發布到了Github上了，感覺有用就給個星吧。
2、ZJCollectionViewSummary的功能
基礎用法總結（比較簡單，只是代碼實現、看代碼即可）
1、給CollectionView添加headerView
2、給CollectionView添加/刪除cell以及添加section
3、CollectionView中cell 的多選
進階用法（抽取出了框架）
1、實現圖片輪播
2、CollectionView給添加右邊索引
3、CollectionView長安拖動cell重新排序
4、常見的幾種布局，包括水平/豎直滑動縮放、水平/豎直流水布局、環形布局、網格布局。（后兩種事網上常見的就拿來了）。
3、各功能的示意圖、介紹以及相關用法
3.1、基礎用法：都是UI層面或是處理數據刷新界面
3.1.1、給CollectionView添加headerView
添加headerView.gif
設置
layout.headerReferenceSize = CGSizeMake(SCREEN_WIDTH, 120);
直接將headerView添加到collectionView就可實現。即：
[_collectionView addSubview:self.headerView];
也可以實現代理分組的形式實現添加headerView.若只有一組這是比較好使的代碼簡單，有利于查看。
3.1.2、給CollectionView添加/刪除cell以及添加section
添加cell:section.gif
都是操作數組刷新界面。沒什么的。
3.1.3、CollectionView中cell 的多選
cell的全選.gif
思路：創建兩個數組，一個是數據源_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.2、進階用法
3.2.1、實現圖片輪播
輪播.gif
ZJCycleView可顯示本地圖片，也可以是網絡圖片，還可以本地圖片與網絡圖片混合現實。樣式如圖。相關屬性和方法。
@class ZJCycleView;
@protocol 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.2、CollectionView給添加右邊索引
添加索引.gif
核心代碼：
- (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.3、CollectionView長安拖動cell重新排序
長安拖動.gif
主要代碼：
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.4、常見的幾種布局，包括水平/豎直華東縮小、水平/豎直流水布局、
A、水平/豎直華東縮小
線性布局（水平與豎直）.gif
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、水平/豎直流水布局
流水布局（豎直:水平）.gif
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