前阵子需要做一个需求,在iPhone上实现瀑布流效果。
第一眼看到这个需求,我想到的两种解决方案分别是:
1. 使用多个UITableView,然后控制它们同时滚动;
2. 使用一个UIScrollView,然后参考UITableView的实现自己做一个符合需求并且以后可以重用的控件。
我首先尝试了第一个方案,并且Google过控制多个UITableView同时滚动的代码,在StackOverflow里面找到一段蛮详细的代码了,不过在复杂的用户操作下,仍然会出现滚动不同步的情况。
最终,我放弃了这个方案。
而第二个方案的关键点就在于参考UITableView实现时,如何重用单元格。
下面是我实现的重用代码:
- (void)onScroll
{
for (int i = 0; i < self.columns; ++i) {
NSUInteger basicVisibleRow = 0;
WaterFlowViewCell *cell = nil;
CGRect cellRect = CGRectZero;
NSMutableArray *singleRectArray = [self.cellRectArray objectAtIndex:i];
NSMutableArray *singleVisibleArray = [self.visibleCells objectAtIndex:i];
if (0 == [singleVisibleArray count]) {
// There is no visible cells in current column now, find one.
for (int j = 0; j < [singleRectArray count]; ++j) {
cellRect = [(NSValue *)[singleRectArray objectAtIndex:j] CGRectValue];
if (![self canRemoveCellForRect:cellRect]) {
WFIndexPath *indexPath = [WFIndexPath indexPathForRow:j inColumn:i];
basicVisibleRow = j;
cell = [self.waterFlowDataSource waterFlowView:self cellForRowAtIndexPath:indexPath]; // nil ?
cell.indexPath = indexPath;
cell.frame = cellRect;
if (!cell.superview) [self addSubview:cell];
NSLog(@"Cell Info : %@\n", cell);
[singleVisibleArray insertObject:cell atIndex:0];
break;
}
}
} else {
cell = [singleVisibleArray objectAtIndex:0];
basicVisibleRow = cell.indexPath.row;
}
// Look back to load visible cells
for (int j = basicVisibleRow - 1; j >= 0; --j) {
cellRect = [(NSValue *)[singleRectArray objectAtIndex:j] CGRectValue];
if (![self canRemoveCellForRect:cellRect]) {
WFIndexPath *indexPath = [WFIndexPath indexPathForRow:j inColumn:i];
if ([self containVisibleCellForIndexPath:indexPath]) {
continue ;
}
cell = [self.waterFlowDataSource waterFlowView:self cellForRowAtIndexPath:indexPath]; // nil ?
cell.indexPath = indexPath;
cell.frame = cellRect;
if (!cell.superview) [self addSubview:cell];
NSLog(@"Cell Info : %@\n", cell);
[singleVisibleArray insertObject:cell atIndex:0];
} else {
break;
}
}
// Look forward to load visible cells
for (int j = basicVisibleRow + 1; j < [singleRectArray count]; ++j) {
cellRect = [(NSValue *)[singleRectArray objectAtIndex:j] CGRectValue];
if (![self canRemoveCellForRect:cellRect]) {
WFIndexPath *indexPath = [WFIndexPath indexPathForRow:j inColumn:i];
if ([self containVisibleCellForIndexPath:indexPath]) {
continue ;
}
cell = [self.waterFlowDataSource waterFlowView:self cellForRowAtIndexPath:indexPath]; // nil ?
cell.indexPath = indexPath;
cell.frame = cellRect;
if (!cell.superview) [self addSubview:cell];
NSLog(@"Cell Info : %@\n", cell);
[singleVisibleArray insertObject:cell atIndex:0];
} else {
break;
}
}
// Recycle invisible cells
for (int j = 0; j < [singleVisibleArray count]; ++j) {
cell = [singleVisibleArray objectAtIndex:j];
if ([self canRemoveCellForRect:cell.frame]) {
[cell removeFromSuperview];
[self addReusableCell:cell];
[singleVisibleArray removeObject:cell];
--j;
NSLog(@"Removable Cell Info : %@\n", cell);
}
}
}
}
主要思想就是,1. 找到一个需要展示的Cell;2. 以这个Cell开始,向前、向后推进,为需要展现出来的Cell分配;3. 遍历可见Cell,回收不可见的对象。
最后,把代码稍微做了抽离,弄了个小Demo,放到GitHub:https://github.com/siqin/WaterFlow
分享到:
相关推荐
多个工程打包,多种效果,从简单到复杂!!!从瀑布流的基本布局开始,到这种复杂界面,下拉刷新等等
商品图片不固定高度,...使用masonry实现瀑布流布局展示,搭配imagesloaded保证图片加载完成后再进行瀑布流展示; 使用dropload实现H5界面无缝滚动加载下一页; H5运行在以上终端(微信、安卓、IOS内嵌H5)都可以生效
用UICollectionView实现的视图就是所谓的瀑布流界面,很多的电商网站,图片浏览App都是采用了这种设计方式。在我的这个项目中,我分别使用三种不同的方式来实现CollectionView:storyboard、nib文件和纯代码,可以...
瀑布流界面布局。可以自动根据图片的长宽大小来进行布局。
ZZFLEX主要包含两大部分: 1、为常用控件增加了链式API拓展,可以任性的点点点了 UIButton *butt 0, 100, 35)).title(@"hello").titleColor([UIColor blackColor]).cornerRadius(3.0f).view; ...
两个tableview的瀑布流效果,这个一个列表的布局的效果,改效果可以支持的瀑布流的布局显示效果的,也是一款很好的布局界面的效果,喜欢的朋友可以看一下吧。 详细说明:http://ios.662p.com/thread-1264-1-1.html
自定义流水布局完成界面... 界面上的效果为16个视图为一组展示,并且利用itemSize属性决定collectionView的滚动范围.无论返回多少个item,都能正常滚动到底. 可以在collectionView的数据源方法里面任意设置返回的个数.
4.支持全屏(添加到Window上),缩放(重新添加到最初的父view)上,在初始化的时候给firstSuperView赋值 5.支持自动旋转屏幕,界面全屏和半屏展示,可以通过禁用 isAutoFullScreen 关闭此功能 6.在关闭播放器的时候,只需...
... 也可以加我微信号hao22221111 交个朋友, 以及QQ群...礼物说界面 项目框架 尚衣街 礼物说 德德打车 京东 饿了么定位 评测 IT新闻 猴子 实习生 礼品会 源码 回复 项目源码 就可获取所有项目的源码,
1、全部页面均使用纯代码实现,也是因为公司项目一般都是纯代码,所以没有使用 storyboard 2、自定义 NavigationController,实现页面整体侧滑,侧滑时不隐藏 ...7、自定义视频播放界面,使用 AVPlayer 实现视频播放
... 完整版swift项目花田小憩: ... ...交朋友或者想进招聘微信群的可以加我微信号 hao22221111 ...美团中级 礼物说界面 项目框架 尚衣街 礼物说 德德打车 京东 饿了么定位 评测 IT新闻 猴子 实习生 礼品会 源码
初步写了一下模仿微信上传图片的界面(还不能上传),花了点时间学习了一下如何使用PhotoKit来获取手机本地的相册和图片
UICollectionView iOS8 最新控件,适合初学者参考学习,方便合理规划瀑布流界面的处理
SHCollectionViewFlowLayout通过瀑布流UICollectionView实现类似于iOS原生短信界面的弹簧效果#使用方法导入SHCollectionViewFlowLayout到你自己项目中,舍弃系统的UICollectionViewFlowLayout.具体看demo弹簧效果的...
基于UICollectionView实现,目前支持标签布局,列布局,百分比布局,定位布局,填充式布局,瀑布流布局等。支持纵向布局和横向布局,可以根据不同的section设置不同的布局,支持拖动cell,头部悬浮,设置section背景...
次级页面会读取本地图片,加滤镜,然后按照瀑布流的方式显示出来;第三个页面提供大图显示;运行代码:点击Photos->进入main->点击一张图,进入详情页 ->Pop直到回到第一个页面,重复这段操作,从XCode的内存模块...
综上所述 希望多注册点各种各样的UI模块放入应用,产品汪需要改变就快速改变,最好能通过服务器设置,模块化UI,更加灵活。 更好利用重用机制,全局为CollocationView.整个界面的各个view(如搜索栏 轮播图 9宫格 ...
Android瀑布流加载图片效果实例 Android中利用ViewPager实现视图切换 Android泡泡聊天界面的源码实现 android 实现EditText震动效果 Touch Index Bar (有锤子有真相) Android数据库最基础的一个例子(本人已测试...
这也是为什么安卓系统会在整体感觉少比iOS上了一点贵气。不过新欧朋浏览器却可以打破系统的限制,做出与iOS系统一样精美的界面和流畅的体验。尤其是精致的图标,让整体看起来非常的协调。 新欧朋浏览器统一了图标的...