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