OC-UICollectionView实现瀑布流
UICollectionView实现瀑布流
在iOS中可以实现瀑布流的目前已知的有2种方案:
- 使用
UIScrollView
自己封装一套,这种方案是应用于iOS6之前的,因为iOS6才出来UICollectionView
,不过现在这种方案已经不怎么用了,还得自己封装。而且自己封装的性能不一定有系统的要好。 - 使用系统自带的
UICollectionView
,然后自定义layout,自己实现瀑布流效果
本文中我们介绍第二种实现方案
首先我们需要自定义一个继承于UICollectionViewLayout
的layout,然后需要重写四个方法:
- (void)prepareLayout
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
- (UICollectionViewLayoutAttributes )layoutAttributesForItemAtIndexPath:(NSIndexPath )indexPath
- (CGSize)collectionViewContentSize
第一个方法是做一些初始化的操作,这个方法必须先调用一下父类的实现
第二个方法返回的是一个装着UICollectionViewLayoutAttributes
的数组
第三个方法返回indexPath
位置的UICollectionViewLayoutAttributes
第四个方法是返回UICollectionView
的可滚动范围
如何实现瀑布流
首先我们需要明白一点瀑布流的排列,瀑布流是大小不规则的一些控件分布在手机屏幕上面,然后肯定有长度高的也有矮的(就像人的身高一样,哈哈哈),当排满第一排的时候就会往下继续排,那么这个应该往哪里放呢,==答案就是把它放到第一排最短的那个下面==,以此类推,按照这个规律排列下去。
明白了这一点我们接下来就该写代码了
首先我们创建两个数组一个装着cell的布局属性,另一个装着当前cell的总高度
//c存放所有cell的布局属性
@property (nonatomic, strong) NSMutableArray *attrsArray;
//存放所有列的当前高度
@property (nonatomic, strong) NSMutableArray *columnHeights;
/** 内容的高度 */
@property (nonatomic, assign) CGFloat contentHeight;
- (void)prepareLayout
{
[super prepareLayout]; self.contentHeight = 0; //清除之前计算的所有高度,因为刷新的时候回调用这个方法
[self.columnHeights removeAllObjects];
for (NSInteger i = 0; i < DefaultColumnCpunt; i++) {
[self.columnHeights addObject:@(self.edgeInsets.top)];
} //把初始化的操作都放到这里
[self.attrsArray removeAllObjects]; //开始创建每一个cell对应的布局属性
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (NSInteger i = 0; i < count; i++) {
// 创建位置
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
// 获取indexPath位置cell对应的布局属性
UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.attrsArray addObject:attrs];
}
}
首先把cell的高度设置为self.edgeInsets.top
不然这里会崩溃。然后取出来item的个数,然后循环取出每个item的UICollectionViewLayoutAttributes
,然后把它加入到attsArray
,然后在- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
这个方法中直接返回attrsArray
即可。
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; CGFloat collectionViewW = self.collectionView.frame.size.width; CGFloat w = (collectionViewW - self.edgeInsets.left - self.edgeInsets.right -(self.columnCount - 1) * self.columnMargin) / self.columnCount; CGFloat h = [self.delegate WaterFlowLayout:self heightForRowAtIndexPath:indexPath.item itemWidth:w]; NSInteger destColumn = 0; CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
for (NSInteger i = 0; i < self.columnCount; i++) {
CGFloat columnHeight = [self.columnHeights[i] doubleValue]; if (minColumnHeight > columnHeight) {
minColumnHeight = columnHeight;
destColumn = i;
}
} CGFloat x = self.edgeInsets.left + destColumn * (w + self.columnMargin);
CGFloat y = minColumnHeight;
if (y != self.edgeInsets.top) {
y += self.rowMargin;
} attrs.frame = CGRectMake(x, y, w, h); self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame)); CGFloat columnHeight = [self.columnHeights[destColumn] doubleValue];
if (self.contentHeight < columnHeight) {
self.contentHeight = columnHeight;
}
return attrs; }
上面这个方法是计算item的位置的代码,首先取出来indexPath
的UICollectionViewLayoutAttributes
对象,然后取出来w,h,核心代码如下:
NSInteger destColumn = 0; CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
for (NSInteger i = 0; i < self.columnCount; i++) {
CGFloat columnHeight = [self.columnHeights[i] doubleValue]; if (minColumnHeight > columnHeight) {
minColumnHeight = columnHeight;
destColumn = i;
}
} CGFloat x = self.edgeInsets.left + destColumn * (w + self.columnMargin);
CGFloat y = minColumnHeight;
if (y != self.edgeInsets.top) {
y += self.rowMargin;
}
首先弄了一个标示destColumn
来做记录是那一列的,然后定义一个minColumnHeight
为最小的列的高度,取出来self.columnHeights[0]
的高度,这里默认为它就是最小的,然后进行for循环遍历,取出来i位置上面的高度,如果这个值小于之前的minColumnHeight,那么取出来的这个高度就是最小的高度了,然后把i的值赋值给destColumn,然后x的值就是上面代码中的相加的结果,y的值就是继续加上间距
- (CGSize)collectionViewContentSize
{
// CGFloat maxColumnHeight = [self.columnHeights[0] doubleValue];
//
// for (NSInteger i = 1; i < DefaultColumnCpunt; i++) {
// // 取得第i列的高度
// CGFloat columnHeight = [self.columnHeights[i] doubleValue];
//
// if (maxColumnHeight < columnHeight) {
// maxColumnHeight = columnHeight;
// }
// }
return CGSizeMake(0, self.contentHeight + self.edgeInsets.bottom);
}
传送门:gitHub
OC-UICollectionView实现瀑布流的更多相关文章
- iOS开发-UICollectionView实现瀑布流
关于瀑布流的实现网上有很多种解法,自定义控件,TableView+ScrollView,UICollectionView是iOS6发布之后用于展示集合视图,算起来已经发布三年左右了,不过知识点是不变的 ...
- iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流
上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewControlle ...
- 利用UICollectionView实现瀑布流
利用UICollectionView实现瀑布流通过自定义布局来实现. - 自定义类继承UICollectionViewLayout: 必须重写的方法有: //决定每个item的位置: - (nulla ...
- iOS开发:一个瀑布流的设计与实现(已实现缓存池功能,该功能使得瀑布流cell可以循环利用)
一个瀑布流的实现有三种方式: 继承自UIScrollView,仿写UITableView的dataSource和delegate,创造一个缓存池用来实现循环利用cell 写多个UITableview( ...
- iOS开发之窥探UICollectionViewController(四) --一款功能强大的自定义瀑布流
在上一篇博客中<iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流>,自定义瀑布流的列数,Cell的外边距,C ...
- 自定义UICollectionLayout布局 —— UIKit之学习UICollectionView记录一《瀑布流》
一.思路 思路一:比较每一行所有列的cell的高度,从上到下(也就是从第一行开始),从最短的开始计算,(记录下b的高度和索引,从开始计算,依次类推) 思路二:设置上.下.左.右间距和行间距.列间距及列 ...
- IOS 瀑布流UICollectionView实现
IOS 瀑布流UICollectionView实现 在实现瀑布流之前先来看看瀑布流的雏形(此方法的雏形 UICollectionView) 对于UICollectionView我们有几点注意事项 它和 ...
- OC - 29.自定义布局实现瀑布流
概述 瀑布流是电商应用展示商品通常采用的一种方式,如图示例 瀑布流的实现方式,通常有以下几种 通过UITableView实现(不常用) 通过UIScrollView实现(工作量较大) 通过UIColl ...
- UICollectionView 很简单的写个瀑布流
你项目中要用到它吗? 可能会在你的项目中用到这玩意,最近也是要用就简单的写了一个 Demo.没多少代码,就不放Git了,下面会详细点的说说代码的,要还有什么问题的小伙伴可以直接Q我,也可以把Demo发 ...
随机推荐
- VS2012打开项目 提示Asp.net4.5未在web服务器上注册
在用vs2012代开项目时,没回都显示Asp.net4.5未在web服务器上注册,最后是由于没有下载一个补丁的原因,只需要下载安装补丁 VS11-KB3002339.exe ,下载地址:https:/ ...
- html5小游戏基础知识
显示一个DIV和隐藏一个DIV 首先,我们要显示一个DIV和隐藏一个DIV需要使用css里面使用: .hide{ display:none;} .show{display:block;} 在需要显示或 ...
- 一款好用的绘图软件gnuplot
漂亮的图片在一篇报告中是必不可少的.这里推荐一款绘图软件Gnuplot. Gnuplot是一种免费分发的绘图工具,可以移植到各种主流平台,无论是在Linux还是在Windows都易于安装使用.最新的版 ...
- spring +springmvc+mybatis组合mybatis-config.xml文件配置
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configurationPUBLIC &q ...
- usaco training 4.2.2 The Perfect Stall 最佳牛栏 题解
The Perfect Stall题解 Hal Burch Farmer John completed his new barn just last week, complete with all t ...
- MyBatis基础
一.大配置 <?xml version="1.0" encoding="UTF-8" ?> <!--文档类型,头文件--> <!D ...
- Python之编写登陆接口
1.输入用户名密码: 2.认证成功后显示欢迎信息: 3.错误三次后,账号被锁定. 账号文件:user.txt 锁定文件:locked.txt 流程图如下: # -*- coding:utf-8 -*- ...
- 利用fputcsv导出数据备份数据
今天,分享一个利用fputcsv导出数据备份数据的方法,我也时看到些零零散散的代码,想着拼起来,所以我只提供些思路,以及简单的代码,至于怎么组合能够让它更强大,尽情去探索吧 讲之前先上一段获取数据库里 ...
- Spring实现IoC的多种方式
目录 一.使用XML配置的方式实现IOC 二.使用Spring注解配置IOC 三.自动装配 四.零配置实现IOC 五.示例下载 控制反转IoC(Inversion of Control),是一种设计思 ...
- updateByPrimaryKey和updateByPrimaryKeySelective insert和insertSelective
这两个update都是使用generator生成的mapper.xml文件中,对dao层的更新操作 updateByPrimaryKey对你注入的字段全部更新(不判断是否为Null) updateBy ...