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

最新推荐文章于 2022-02-08 13:57:06 发布
最新推荐文章于 2022-02-08 13:57:06 发布
阅读量256 收藏
点赞数
文章标签： ui
原文链接：https://juejin.im/post/5b3047a46fb9a00e717ede22
版权

一、ZJCollectionViewSummary的由来

项目对collectionView使用率较高，就花费了两周的业余时间对CollectionView进行了总结，并起名为ZJCollectionViewSummary发布到了Github上了，感觉有用就给个星吧。

二、ZJCollectionViewSummary的功能

1、基础用法总结（比较简单，只是代码实现、看代码即可）

  1. 给CollectionView添加headerView
  2. 给CollectionView添加/删除cell以及添加section
  3. CollectionView中cell 的多选

2、进阶用法（抽取出了框架）

  1. 实现图片轮播
  2. CollectionView给添加右边索引
  3. CollectionView长安拖动cell重新排序
  4. 常见的几种布局，包括水平/竖直滑动缩放、水平/竖直流水布局、环形布局、网格布局。（后两种事网上常见的就拿来了）。

3、各功能的示意图、介绍以及相关用法

3.1、基础用法：都是UI层面或是处理数据刷新界面

3.1.1、给CollectionView添加headerView

设置

layout.headerReferenceSize = CGSizeMake(SCREEN_WIDTH, 120);
复制代码

直接将headerView添加到collectionView就可实现。即：

 [_collectionView addSubview:self.headerView];
复制代码

也可以实现代理分组的形式实现添加headerView.若只有一组这是比较好使的代码简单，有利于查看。

3.1.2、给CollectionView添加/删除cell以及添加section

都是操作数组刷新界面。没什么的。

3.1.3、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.2、进阶用法

3.2.1、实现图片轮播

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给添加右边索引

核心代码：

- (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重新排序

主要代码： 

 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、水平/竖直华东缩小

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
复制代码

转载于:https://juejin.im/post/5b3047a46fb9a00e717ede22

weixin_34301307
关注
3_2_iOS开发_分段显示 右边索引栏:
m0_52635912的博客
04-29 92
3_2_iOS开发_分段显示 右边索引栏:
iOS使用UICollectionView实现列表头部拉伸效果
08-27
主要介绍了iOS使用UICollectionView实现列表头部拉伸效果，OC和Swift两个版本，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
通过layout实现可拖拽自动排序的UICollectionView
weixin_34303897的博客
03-28 126
文／CenturyGuo（简书作者）原文链接：http://www.jianshu.com/p/8d1bf1838882著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。 Translate from http://blog.karmadust.com/drag-and-rearrange-uicollectionviews-through-layouts/ （Github...
在ListView的GroupItem头中显示每列的Summary
weixin_33860553的博客
09-04 109
问题描述      WPF自带的ListView和DataGrid控，都提供了数据分组的支持，并可以对分组的Header进行自定义。但是，如果想在每个分组的Header中，显示出本分组的"小计"就不是一件容易的事情了。      假设要用一个ListView用于显示全校学生成绩。按班级分组，并在分组头中显示班级平均分。      最终效果大致如下：                  ...
UICollectionView 索引条被挡住
共由石石石的博客
05-22 433
ios11之后会出现区头挡住索引条的bug 修复：１.创建class继承CALayer 2.UICollectionReusableView类
iOS tableview/collectionview索引联动之滚动时索引字母跳动 （ndexPathsForVisibleItems返回不按顺序）
ihoudf
10-28 1205
在设置索引条与tableview（或collectionView）联动时，滑动tableview，索引条字母不按顺序变色，会隔几个。这是因为： indexPathsForVisibleItems 或者visibleCells 返回值 不是按照你列表的顺序返回的item，你要把这个数组排序。 以swift为例： func scrollViewDidScroll(_ scrollView: UIScrollView) { if scrollView == cw { ...
IOS使用UICollectionView实现无限轮播效果
09-02
总结，通过UICollectionView结合NSTimer，我们可以轻松实现iOS中的无限轮播效果。关键在于理解UICollectionView的布局和数据源，以及合理利用NSTimer来控制轮播的自动切换。在实际项目中，还可以根据需求添加更多...
iOS Swift利用UICollectionView实现无限轮播功能（原理）详解
08-26
iOS Swift利用UICollectionView实现无限轮播功能（原理）详解 iOS Swift利用UICollectionView实现无限轮播功能是指通过使用UICollectionView实现无限轮播图的功能。无限轮播图是指可以无限次循环播放的轮播图，常...
ios-使用collectionView的无限轮播图.zip
07-11
使用collectionView制作的无限轮播图， 下面是Demo,GitHub： https://github.com/Super-lying/LyScrollBanner 简单使用方法 CGRect rect1 = CGRectMake(0, 300, 320, 220); NSArray *arrHttp = @[@...
ios-利用collectionView上嵌套tableview实现的答题卡.zip
07-11
本项目“ios-利用collectionView上嵌套tableview实现的答题卡”就展示了如何实现这种效果。 首先，我们来看UICollectionView。UICollectionView是一种灵活的布局控件，它可以自定义单元格（UICollectionViewCell）...
ios-swfit-collectionView实现轮播图，支持上下和左右滚动.zip
07-11
本项目“ios-swift-collectionView实现轮播图，支持上下和左右滚动.zip”提供了一个用Swift实现的轮播图示例，它不仅支持常见的左右滚动，还创新地加入了上下滚动的功能，并且具备定时自动滚动的能力。 首先，让...
UICollectionView 索引，城市列表
chuotongtuan8831的博客
11-08 411
#import "ViewController.h" // 自定义头部 #import "HeaderCollectionReusableView.h" // 自定义cell #import "MainCollectionViewCell.h" // 需要导入的文件 #import "DSCo...
iOS中UITableView的索引设置
热门推荐
一只小菜鸟
11-16 1万+
看到很多app的关于UITableView的页面在右手边，都有一系列的索引设置；简单的学习了下，其实主要是调用了UITableView的相关代理方法来实现的： 主要是实现下面四个方法： //返回section中的row -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)secti
【推荐】iOS集合视图的可重新排序的layout
weixin_34109408的博客
02-21 93
　　在实际项目中你或许会遇到在一个集合视图中移动一项到另外一个位置，那么此时我们需要对视图中的元素进行重新排序，今天推荐一个很好用的第三方类LXReorderableCollectionViewFlowLayout【点此链接进入GITHUB】 下面附上实现代码 // // LXReorderableCollectionViewFlowLayout.h // // Create...
iOS 10 UICollectionView 索引不存在问题 UICollectionView received layout attributes for a cell with an index
SCDNBB的博客
02-08 2122
iOS 10 UICollectionView 索引不存在问题 UICollectionView received layout attributes for a cell with an index path that does not exist 报的错误是 解决方法，在reloadData后添加.collectionViewLayout invalidateLayout [self.tagCollectionView reloadData]; [self.tagCollectionView.co
iOS讲解迷惑深入浅出值UICollectionView(集合视图)
风起云涌的博客
09-26 2727
1.创建一个集合视图, 先创建网格布局 UICollectionViewFlowLayout, 设置其诸多属性 再用其设置好属性的对象 初始化集合视图. - (void)createCollectView { // UICollectionViewFlowLayout 继承自 UICollectionViewLayout // UICollectionViewLayout 是一个
IOS 实现多种分类 添加删除排序功能（LXReorderableCollectionViewFlowLayout）
wanglj7525的专栏
08-01 5060
在项目中需要实现用户对可显示分类的自由配置（添加、删除、排序），不是对分类的编辑添加，而是在总分类中选择显示。只是做一下笔记，积累知识。 .h代码#import <UIKit/UIKit.h> #import "LXReorderableCollectionViewFlowLayout.h" @interface SetViewController : UIViewController< LXRe
（swift）UICollectionView方法/属性详解
sinat_34194127的博客
07-04 8850
1.UICollectionView的常用属性// 1.设置位置和大小 init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout)// 2.设置子视图的布局方式 var collectionViewLayout: UICollectionViewLayout// 3.设置UICollectionView的代理对象
iOS一行代码实现无限轮播器的实战教程
在iOS开发中，实现图片无限轮播器并不一定要写很多代码，尤其是当我们利用UICollectionView进行设计时。这篇文章提供了一种简单且高效的方法，仅用一行代码就能构建一个图片无限轮播器。以下是该实现的关键知识点： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值