collectionView
2016-06-16 23:23
183 查看
##collectionView图片无限滚动实现的思想
* collectionView只有3个Cell。每次滚动结束后，都让collectionView以非动画方式，滚回到第一个Cell（Cell从序数0开始）上，以保证每次拖拽滚动结束后，collectionView依然可以滚动
* 通过监听collectionView的滚动方向对应修改图片的全局索引值，每次collectionView自动滚回到第一个Cell，在collectionView创建Cell时，将对应的内容设置给collectionView的第一个Cell
* collectionView刷新Cell前关闭动画，刷新后重新开启动画
```objc
// 监听collectionView的滚动事件
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
// 根据滚动结束后，collectionView的内容偏移值，计算出要显示的图片索引的变化
CGFloat offset = self.collectionView.contentOffset.x;
NSInteger offsetPage = (offset / self.view.frame.size.width) - 1;
// 未翻页，什么都不做
if (!offsetPage) {
return;
}
// +总页数对总页数取模，保证不越界
self.imageIndex = (self.imageIndex + offsetPage + self.images.count) % self.images.count;
// 每次滚动结束后，重新让collectionView滚动到中间Cell上
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:1 inSection:0];
[self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
// 必须要刷新Cell。
// 每次新Cell出现时，都调用了代理返回Cell的方法，刷新了数据。为什么会出现Cell显示图片错误的问题？
// 这个显示bug是由于collectionView多线程任务执行完成顺序先后造成的
[UIView setAnimationsEnabled:NO];
[self.collectionView reloadItemsAtIndexPaths:@[indexPath]];
[UIView setAnimationsEnabled:YES];
}
```
###-viewDidAppear:
程序启动viewDidLoad方法执行完时，collectionView的代理方法还没有调用。此时设置collectionView的Cell的相关属性和数据，是无意义的。必须要等到View被显示之后（所有的相关方法都调用执行完毕），才可以设置collectionView的Cell的相关参数和属性
---
##瀑布流布局实现思路及具体步骤
###思路
1. 定宽不定高：列宽相等，每一个item的高度由内容决定。
2. 每列下面一个Cell的Y轴起点，由上一个Cell的底部决定
3. collectionView的内容尺寸，由Cell最大的Y值决定
###实现步骤
1. 为collectionView注册xib模板的Cell，设置Cell的子控件及约束
2. 实现collectionView的数据源协议方法，布局Cell
3. 自定义继承自UICollectionViewFlowLayout类的子类，重写父类的某些方法，手动计算每一个Cell对应的属性
4. 设置collectionView的flowLayout参数关联新建的自定义类
5. storyboard中给collectionView添加footerView，并关联自定义类，实现数据源方法中返回页脚View方法
6. 实现新增数据并刷新的方法，当FooterView 被创建后，自动执行并刷新数据
$$控制器类相关属性$$
```objc
@property (nonatomic, strong) NSMutableArray *goods;
@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;
@property (weak, nonatomic) IBOutlet ASWaterFlowLayout *flowLayout;
@property (nonatomic, weak) ASFooterView *footerView;
```
###自定义flowLayout类计算每个Cell的frame属性
$$属性$$
```objc
@property (nonatomic, assign) NSInteger columnCount; // 排布列数
@property (nonatomic, weak) id<ASWaterFlowLayoutDelegate> delegate; // 获取Cell高度的代理对象
```
$$代理协议$$
```objc
@protocol ASWaterFlowLayoutDelegate <NSObject>
// 根据Cell序数及宽度，获取Cell高度
- (CGFloat)waterFlowLayoutGetCellHeight:(ASWaterFlowLayout *)waterFlowLayout
withIndex:(NSInteger)index andCellWidth:(CGFloat)cellWidth;
@end
```
$$延展属性$$
```objc
@property (nonatomic, strong) NSMutableArray *arrayAttrs; // 自定义保存每个Cell属性的数组
@property (nonatomic, strong) NSMutableDictionary *dictMaxY; // 自定义保存每行当前Cell总高度的字典
@property (nonatomic, copy) NSString *keyMaxY; // 字典中最大Y值对应的key
@property (nonatomic, copy) NSString *keyMinY; // 字典中最小Y值对应的key
```
$$字典和数组的懒加载$$
```objc
- (NSMutableArray *)arrayAttrs{
if (_arrayAttrs == nil) _arrayAttrs = [NSMutableArray array];
return _arrayAttrs;
}
- (NSMutableDictionary *)dictMaxY{
if (!_dictMaxY) _dictMaxY = [NSMutableDictionary dictionary];
return _dictMaxY;
}
```
$$重写prepareLayout方法$$
```objc
- (void)prepareLayout{
[super prepareLayout];
// 初始化字典，让字典拥有三组键值
for (int i=0; i<self.columnCount; i++) {
NSString *key = [NSString stringWithFormat:@"%d", i];
self.dictMaxY[key] = @"0";
}
// 每次刷新数据准备布局collectionView时，清除所有Cell的layout属性
[self.arrayAttrs removeAllObjects];
// 计算所有Cell的属性
// 获取collectionView第0组的总Cell数
NSInteger cellCount = [self.collectionView numberOfItemsInSection:0];
for (int i=0; i<cellCount; i++) {
// 获取当前Cell所在的坐标
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
// 获取对应Cell的属性数据
UICollectionViewLayoutAttributes *attr = [self layoutAttributesForItemAtIndexPath:indexPath];
// 将当前Cell的属性信息添加到Cell属性数组中
[self.arrayAttrs addObject:attr];
}
// 计算footerView的属性
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:0];
UICollectionViewLayoutAttributes *attrFooter = [UICollectionViewLayoutAttributes
layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooter withIndexPath:indexPath];
// 根据内容最大Y值，设置footerView的属性
NSString *maxHeight = self.keyMaxY;
attrFooter.frame = CGRectMake(0, [self.dictMaxY[maxHeight] floatValue],
self.collectionView.frame.size.width, self.footerReferenceSize.height);
[self.arrayAttrs addObject:attrFooter];
}
```
**注：**属性数组中，可以重复为指定indexPath的Cell添加多个不同的属性实例，最后布局时，以最后一个被添加进数组的属性实例为准。但是，不可以添加多于1个footerView的属性实例！新添加进的footerView的属性实例不会在布局时替换旧值，而是直接冲突报错！
$$计算每个item的frame并返回$$
```objc
// 计算Cell的属性。控制器每布局一个Cell，都会来调用一次这个方法
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
// 计算每一个Cell的frame
CGFloat contentW = self.collectionView.frame.size.width - self.sectionInset.left -
self.sectionInset.right - self.minimumInteritemSpacing * (self.columnCount - 1);
// 计算每个Cell的宽，代理获取对应的高
CGFloat cellW = contentW / self.columnCount;
CGFloat cellH = [self.delegate waterFlowLayoutGetCellHeight:self withIndex:indexPath.item andCellWidth:cellW];
// 将Cell布局在Y值最小的列
NSInteger col = [self.keyMinY integerValue];
4000
CGFloat cellX = self.sectionInset.left + col * (cellW + self.minimumInteritemSpacing);
NSString *keyCol = [NSString stringWithFormat:@"%ld", col];
CGFloat cellY = [self.dictMaxY[keyCol] floatValue];
// 更新字典中布局Cell所在列的最大高度
CGFloat maxY = cellY + cellH + self.minimumInteritemSpacing;
self.dictMaxY[keyCol] = [NSString stringWithFormat:@"%f", maxY];
// 修改对应Cell在数组中保存的属性值
UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attr.frame = CGRectMake(cellX, cellY, cellW, cellH);
// 返回Cell的属性值
return attr;
}
```
$$返回可视范围内所有Cell的布局属性泛型数组$$
```objc
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
return self.arrayAttrs;
}
```
$$返回collectionView的contentSize$$
```objc
- (CGSize)collectionViewContentSize{
return CGSizeMake(0, [self.dictMaxY[self.keyMaxY] floatValue] + self.footerReferenceSize.height);
}
```
$$获取字典中最大/小Y值对应的key$$
```objc
- (NSString *)keyMaxY{
// 假定最大的key为第0组键值的key
__block NSString *keyMaxY = @"0";
// block方式遍历字典，比较Y值，获取最大的key
[self.dictMaxY enumerateKeysAndObjectsUsingBlock:^(NSString * _Nonnull key, NSString * _Nonnull value, BOOL * _Nonnull stop) {
if ([self.dictMaxY[keyMaxY] floatValue] < [value floatValue]) {
keyMaxY = key;
}
}];
return keyMaxY;
}
```
###刷新数据功能模块
$$更新数据数组$$
类似于懒加载，根据新数据plist文件，构建模型数组，数组中的模型元素添加到原数据数组中
$$滚出FooterView之后的刷新数据事件$$
```objc
// 监听collectionView的滚动位置。当footerView被显示出来后，执行这个方法中的内容
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
// FooterView没有出现或者指示器还在旋转时，返回
if (!self.footerView || [self.footerView.activityIndicator isAnimating]) return;
[self.footerView.activityIndicator startAnimating]; // 指示器开始动画
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self reloadData]; // 更新数据数组
[self.collectionView reloadData]; // collectionView刷新数据
[self.footerView.activityIndicator stopAnimating]; // 指示器停止动画
self.footerView = nil; // 释放FooterView
});
}
```
* collectionView只有3个Cell。每次滚动结束后，都让collectionView以非动画方式，滚回到第一个Cell（Cell从序数0开始）上，以保证每次拖拽滚动结束后，collectionView依然可以滚动
* 通过监听collectionView的滚动方向对应修改图片的全局索引值，每次collectionView自动滚回到第一个Cell，在collectionView创建Cell时，将对应的内容设置给collectionView的第一个Cell
* collectionView刷新Cell前关闭动画，刷新后重新开启动画
```objc
// 监听collectionView的滚动事件
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
// 根据滚动结束后，collectionView的内容偏移值，计算出要显示的图片索引的变化
CGFloat offset = self.collectionView.contentOffset.x;
NSInteger offsetPage = (offset / self.view.frame.size.width) - 1;
// 未翻页，什么都不做
if (!offsetPage) {
return;
}
// +总页数对总页数取模，保证不越界
self.imageIndex = (self.imageIndex + offsetPage + self.images.count) % self.images.count;
// 每次滚动结束后，重新让collectionView滚动到中间Cell上
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:1 inSection:0];
[self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
// 必须要刷新Cell。
// 每次新Cell出现时，都调用了代理返回Cell的方法，刷新了数据。为什么会出现Cell显示图片错误的问题？
// 这个显示bug是由于collectionView多线程任务执行完成顺序先后造成的
[UIView setAnimationsEnabled:NO];
[self.collectionView reloadItemsAtIndexPaths:@[indexPath]];
[UIView setAnimationsEnabled:YES];
}
```
###-viewDidAppear:
程序启动viewDidLoad方法执行完时，collectionView的代理方法还没有调用。此时设置collectionView的Cell的相关属性和数据，是无意义的。必须要等到View被显示之后（所有的相关方法都调用执行完毕），才可以设置collectionView的Cell的相关参数和属性
---
##瀑布流布局实现思路及具体步骤
###思路
1. 定宽不定高：列宽相等，每一个item的高度由内容决定。
2. 每列下面一个Cell的Y轴起点，由上一个Cell的底部决定
3. collectionView的内容尺寸，由Cell最大的Y值决定
###实现步骤
1. 为collectionView注册xib模板的Cell，设置Cell的子控件及约束
2. 实现collectionView的数据源协议方法，布局Cell
3. 自定义继承自UICollectionViewFlowLayout类的子类，重写父类的某些方法，手动计算每一个Cell对应的属性
4. 设置collectionView的flowLayout参数关联新建的自定义类
5. storyboard中给collectionView添加footerView，并关联自定义类，实现数据源方法中返回页脚View方法
6. 实现新增数据并刷新的方法，当FooterView 被创建后，自动执行并刷新数据
$$控制器类相关属性$$
```objc
@property (nonatomic, strong) NSMutableArray *goods;
@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;
@property (weak, nonatomic) IBOutlet ASWaterFlowLayout *flowLayout;
@property (nonatomic, weak) ASFooterView *footerView;
```
###自定义flowLayout类计算每个Cell的frame属性
$$属性$$
```objc
@property (nonatomic, assign) NSInteger columnCount; // 排布列数
@property (nonatomic, weak) id<ASWaterFlowLayoutDelegate> delegate; // 获取Cell高度的代理对象
```
$$代理协议$$
```objc
@protocol ASWaterFlowLayoutDelegate <NSObject>
// 根据Cell序数及宽度，获取Cell高度
- (CGFloat)waterFlowLayoutGetCellHeight:(ASWaterFlowLayout *)waterFlowLayout
withIndex:(NSInteger)index andCellWidth:(CGFloat)cellWidth;
@end
```
$$延展属性$$
```objc
@property (nonatomic, strong) NSMutableArray *arrayAttrs; // 自定义保存每个Cell属性的数组
@property (nonatomic, strong) NSMutableDictionary *dictMaxY; // 自定义保存每行当前Cell总高度的字典
@property (nonatomic, copy) NSString *keyMaxY; // 字典中最大Y值对应的key
@property (nonatomic, copy) NSString *keyMinY; // 字典中最小Y值对应的key
```
$$字典和数组的懒加载$$
```objc
- (NSMutableArray *)arrayAttrs{
if (_arrayAttrs == nil) _arrayAttrs = [NSMutableArray array];
return _arrayAttrs;
}
- (NSMutableDictionary *)dictMaxY{
if (!_dictMaxY) _dictMaxY = [NSMutableDictionary dictionary];
return _dictMaxY;
}
```
$$重写prepareLayout方法$$
```objc
- (void)prepareLayout{
[super prepareLayout];
// 初始化字典，让字典拥有三组键值
for (int i=0; i<self.columnCount; i++) {
NSString *key = [NSString stringWithFormat:@"%d", i];
self.dictMaxY[key] = @"0";
}
// 每次刷新数据准备布局collectionView时，清除所有Cell的layout属性
[self.arrayAttrs removeAllObjects];
// 计算所有Cell的属性
// 获取collectionView第0组的总Cell数
NSInteger cellCount = [self.collectionView numberOfItemsInSection:0];
for (int i=0; i<cellCount; i++) {
// 获取当前Cell所在的坐标
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
// 获取对应Cell的属性数据
UICollectionViewLayoutAttributes *attr = [self layoutAttributesForItemAtIndexPath:indexPath];
// 将当前Cell的属性信息添加到Cell属性数组中
[self.arrayAttrs addObject:attr];
}
// 计算footerView的属性
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:0];
UICollectionViewLayoutAttributes *attrFooter = [UICollectionViewLayoutAttributes
layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooter withIndexPath:indexPath];
// 根据内容最大Y值，设置footerView的属性
NSString *maxHeight = self.keyMaxY;
attrFooter.frame = CGRectMake(0, [self.dictMaxY[maxHeight] floatValue],
self.collectionView.frame.size.width, self.footerReferenceSize.height);
[self.arrayAttrs addObject:attrFooter];
}
```
**注：**属性数组中，可以重复为指定indexPath的Cell添加多个不同的属性实例，最后布局时，以最后一个被添加进数组的属性实例为准。但是，不可以添加多于1个footerView的属性实例！新添加进的footerView的属性实例不会在布局时替换旧值，而是直接冲突报错！
$$计算每个item的frame并返回$$
```objc
// 计算Cell的属性。控制器每布局一个Cell，都会来调用一次这个方法
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
// 计算每一个Cell的frame
CGFloat contentW = self.collectionView.frame.size.width - self.sectionInset.left -
self.sectionInset.right - self.minimumInteritemSpacing * (self.columnCount - 1);
// 计算每个Cell的宽，代理获取对应的高
CGFloat cellW = contentW / self.columnCount;
CGFloat cellH = [self.delegate waterFlowLayoutGetCellHeight:self withIndex:indexPath.item andCellWidth:cellW];
// 将Cell布局在Y值最小的列
NSInteger col = [self.keyMinY integerValue];
4000
CGFloat cellX = self.sectionInset.left + col * (cellW + self.minimumInteritemSpacing);
NSString *keyCol = [NSString stringWithFormat:@"%ld", col];
CGFloat cellY = [self.dictMaxY[keyCol] floatValue];
// 更新字典中布局Cell所在列的最大高度
CGFloat maxY = cellY + cellH + self.minimumInteritemSpacing;
self.dictMaxY[keyCol] = [NSString stringWithFormat:@"%f", maxY];
// 修改对应Cell在数组中保存的属性值
UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attr.frame = CGRectMake(cellX, cellY, cellW, cellH);
// 返回Cell的属性值
return attr;
}
```
$$返回可视范围内所有Cell的布局属性泛型数组$$
```objc
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
return self.arrayAttrs;
}
```
$$返回collectionView的contentSize$$
```objc
- (CGSize)collectionViewContentSize{
return CGSizeMake(0, [self.dictMaxY[self.keyMaxY] floatValue] + self.footerReferenceSize.height);
}
```
$$获取字典中最大/小Y值对应的key$$
```objc
- (NSString *)keyMaxY{
// 假定最大的key为第0组键值的key
__block NSString *keyMaxY = @"0";
// block方式遍历字典，比较Y值，获取最大的key
[self.dictMaxY enumerateKeysAndObjectsUsingBlock:^(NSString * _Nonnull key, NSString * _Nonnull value, BOOL * _Nonnull stop) {
if ([self.dictMaxY[keyMaxY] floatValue] < [value floatValue]) {
keyMaxY = key;
}
}];
return keyMaxY;
}
```
###刷新数据功能模块
$$更新数据数组$$
类似于懒加载，根据新数据plist文件，构建模型数组，数组中的模型元素添加到原数据数组中
$$滚出FooterView之后的刷新数据事件$$
```objc
// 监听collectionView的滚动位置。当footerView被显示出来后，执行这个方法中的内容
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
// FooterView没有出现或者指示器还在旋转时，返回
if (!self.footerView || [self.footerView.activityIndicator isAnimating]) return;
[self.footerView.activityIndicator startAnimating]; // 指示器开始动画
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self reloadData]; // 更新数据数组
[self.collectionView reloadData]; // collectionView刷新数据
[self.footerView.activityIndicator stopAnimating]; // 指示器停止动画
self.footerView = nil; // 释放FooterView
});
}
```
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 小狗钱钱
- 如果ROOT 用户忘记密码如何实现登陆呢
- eclipse调试 org.apache.ibatis.builder.BuilderException: Error evaluating XPath
- hiho 1297 数论四·扩展欧几里得
- c语言学习笔记29之指针5
- Redis学习之Redis分区
- Chrome开发者工具不完全指南
- HDU 2825 (AC自动机 状压DP)
- 2016-06-16-课程设计日志
- 喊山
- ADO.NET连接数据库防止SQL注入
- MySQL数据库优化
- codeforces Devu and Flowers 母函数 容斥 dp
- 对可变性的封装原则
- win7下如何生成 github ssh公钥 GIT
- UITableView的使用（UITableViewCell\section页眉\section页脚复用、sectionHeaderView点击效果）
- python对象释放顺序
- spring事物
- 牛奶可乐经济学
- 取消MyEclipse 10空格和“=”自动补全代码的方案