iOS ZJCollectionViewSummary实现无限轮播、Collectionview添加索引、拖拽换位等功能总结

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 143,736评论 1 303
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,631评论 1 258
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 95,145评论 0 213
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,213评论 0 181
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 49,025评论 1 259
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,893评论 1 178
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,497评论 2 273
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,240评论 0 167
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 29,114评论 6 235
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,596评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,363评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,717评论 1 232
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,279评论 0 32
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,183评论 2 214
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,629评论 3 209
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,647评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,047评论 0 167
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,625评论 2 232
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,734评论 2 236

推荐阅读更多精彩内容