閑言碎語(yǔ)不要講，直接看demo效果
瀑布流效果
再來(lái)看看整個(gè)項(xiàng)目截圖吧取董，很簡(jiǎn)單
項(xiàng)目結(jié)構(gòu)
首先我們來(lái)了解一下瀑布流咬扇，這種形式大多用于電商的app廊勃，像Pinterest经窖，蘑菇街之類(lèi)的，展示一些高度不同的圖片画侣，這種布局適合于小數(shù)據(jù)塊堡妒，每個(gè)數(shù)據(jù)塊內(nèi)容相近且沒(méi)有側(cè)重配乱。通常皮迟，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部伏尼。所以，我決定基于scrollView來(lái)寫(xiě)這個(gè)demo燥透，同時(shí)當(dāng)說(shuō)到上下滾動(dòng)并且展示內(nèi)容辨图，我們第一時(shí)間想到了UITableView班套，那么讓我們來(lái)想想怎么使用tableView故河，下面列出它的數(shù)據(jù)源和代理中一些常用的方法。
#pragma mark UITableViewDataSource method
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
@optional
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
#pragma mark - UITableViewDelegate method
-(void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
我們通過(guò)調(diào)用這些代理方法基本就能布局好一個(gè)tableView杉女，當(dāng)然，作為一個(gè)iOS開(kāi)發(fā)工程師铭拧，我們當(dāng)然要以apple的標(biāo)準(zhǔn)來(lái)锚扎，所以我決定模仿tableView的代理API方式担忧，寫(xiě)一個(gè)自己的waterFallView养匈，下面上代碼，是waterFallView的代理方法呕乎。
@class YLWaterFallCell, YLWaterFallView;
/**
* 數(shù)據(jù)源
*/
@protocol YLWaterFallViewDataSource <NSObject>
/**
* 返回index所在位置的cell
*/
-(YLWaterFallCell *)waterFallView:(YLWaterFallView *)waterFallView cellForIndex:(NSUInteger)index;
/**
* 返回一共有多少個(gè)cell
*/
-(NSUInteger)numbersOfCellsInWaterFallView:(YLWaterFallView *)waterFallView;
@optional
/**
* 返回有多少列
*/
-(NSUInteger)numbersOfColumnsInWaterFallView:(YLWaterFallView *)waterFallView;
@end
/**
* 代理
*/
@protocol YLWaterFallViewDelegate <NSObject>
@optional
/**
* 返回index位置cell的高度
*/
-(CGFloat)waterFallView:(YLWaterFallView *)waterFallView heightForCellAtIndex:(NSUInteger)index;
/**
* 返回間距
*/
-(CGFloat)waterFallView:(YLWaterFallView *)waterFallView marginForType:(YLWaterFallViewMarginType)type;
/**
* 處理選中事件
*/
-(void)waterFallView:(YLWaterFallView *)waterFallView didSelectedAtIndex:(NSUInteger)index;
整個(gè)view的兩個(gè)代理就寫(xiě)好了，大家一定躍躍欲試想趕緊到controller里面去調(diào)用帝璧，布局整個(gè)界面了吧先誉，不過(guò)先不著急的烁，再想想，我們用tableView布局的時(shí)候铃芦，用什么顯示數(shù)據(jù)襟雷？沒(méi)錯(cuò)是一個(gè)cell刃滓，所以我們先定義一個(gè)cell嗤军，繼承UIView，就這么簡(jiǎn)單叙赚，其他什么事情也不做這里一個(gè)cell就是一個(gè)小塊，放置一塊內(nèi)容震叮，但是既然有了cell我們就要調(diào)用，我們?cè)傧胂雝able怎么創(chuàng)建cell呢／相信大家都很熟悉
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
if (!cell) {
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];
}
cell.textLabel.text = [NSString stringWithFormat:@"This is %ld", (long)indexPath.row];
return cell;
沒(méi)錯(cuò)尉间，就是dequeueReusableCellWithIdentifier:方法击罪，那我們不妨也先定義在頭文件里哲嘲，用到時(shí)候再說(shuō)嘛媳禁。然后呢，調(diào)完代理之后還要顯示數(shù)據(jù)竣稽，于是我們想到了reloadData方法，OK毫别，現(xiàn)在讓我們來(lái)看看頭文件吧
YLWaterFallView.h
@interface YLWaterFallView : UIScrollView
@property (nonatomic, weak) id<YLWaterFallViewDataSource> datasource;
@property (nonatomic, weak) id<YLWaterFallViewDelegate> delegate;
/**
* 刷新數(shù)據(jù)
*/
-(void)reloadData;
/**
* 得到緩存池的cell
*/
-(id)dequeueReusableCellWithIdentifier:(NSString *)identifier;
@end
下面我們先不著急實(shí)現(xiàn)方法，現(xiàn)在controller里面調(diào)用台丛，就和tableView一樣砾肺，相信大家都比我熟練挽霉，什么創(chuàng)建view，遵守協(xié)議，設(shè)置代理就不再多言疫衩，直接進(jìn)入調(diào)用部分
YLWaterFallViewController.m
#pragma mark - YLWaterFallViewDelegate method
-(CGFloat)waterFallView:(YLWaterFallView *)waterFallView heightForCellAtIndex:(NSUInteger)index
{
switch (index % 3) {
case 0:
return 150;
case 1:
return 110;
case 2:
return 200;
default:
return 100;
}
}
-(CGFloat)waterFallView:(YLWaterFallView *)waterFallView marginForType:(YLWaterFallViewMarginType)type
{
switch (type) {
case YLWaterFallViewMarginTypeBottom:
case YLWaterFallViewMarginTypeLeft:
case YLWaterFallViewMarginTypeRight:
case YLWaterFallViewMarginTypeTop:
return 10;
break;
case YLWaterFallViewMarginTypeColumns:
return 12;
break;
case YLWaterFallViewMarginTypeRows:
return 15;
break;
default:
return 11;
break;
}
}
-(void)waterFallView:(YLWaterFallView *)waterFallView didSelectedAtIndex:(NSUInteger)index
{
NSLog(@"點(diǎn)擊了第%ld個(gè)", index);
}
#pragma mark - YLWaterFallViewDataSource method
-(YLWaterFallCell *)waterFallView:(YLWaterFallView *)waterFallView cellForIndex:(NSUInteger)index
{
YLWaterFallCell *cell = [waterFallView dequeueReusableCellWithIdentifier:@"cell"];
if (!cell) {
cell = [[YLWaterFallCell alloc] init];
cell.identifier = @"cell";
}
cell.backgroundColor = YLRandomColor;
return cell;
}
-(NSUInteger)numbersOfCellsInWaterFallView:(YLWaterFallView *)waterFallView
{
return 100;
}
-(NSUInteger)numbersOfColumnsInWaterFallView:(YLWaterFallView *)waterFallView
{
return 4;
}
關(guān)于這里的這些數(shù)據(jù)都是我隨意設(shè)置的，看官可隨心意更改童芹，就把它當(dāng)作tableView的代理一樣鲤拿。
當(dāng)然假褪，如果真的是tableView的話(huà)近顷，此時(shí)就大功告成啦，其實(shí)這才是剛剛開(kāi)始窒升，下面我們回到waterFallView.m文件中完成那些方法吧。
先說(shuō)說(shuō)我的想法吧域醇，和tableView一樣，這個(gè)控件最大的核心在于cell的重用譬挚，也是最難的地方酪呻，我所做的就是先根據(jù)代理方法的返回值計(jì)算出每一個(gè)cell的frame减宣，然后密切關(guān)注每個(gè)cell号杠，如果它一直在屏幕上，就不去管它姨蟋，讓它隨心所欲的滾，只要它滾出屏幕看不見(jiàn)了眼溶，就將其放進(jìn)緩存池，一旦有新的cell進(jìn)入屏幕灌旧，優(yōu)先從緩存池中去找是否有閑置的cell，如果沒(méi)有枢泰，就用代理方法創(chuàng)建一個(gè)，直到cell完全夠用衡蚂，循環(huán)利用，子子孫孫毛甲，無(wú)窮匱也。于是我用了三個(gè)屬性只损，諸君一看便知
YLWaterFallView.m
/**
* 存放frame的數(shù)組
*/
@property (nonatomic, strong) NSMutableArray *frameArray;
/**
* 存放顯示在屏幕上的cell七咧，用字典
*/
@property (nonatomic, strong) NSMutableDictionary *cellsOnScreen;
/**
* 緩存池
*/
@property (nonatomic, strong) NSMutableSet *reusableCells;
這里字典里存儲(chǔ)的key/value對(duì)應(yīng)cell的index/該cell跃惫，set里存儲(chǔ)的就是cell艾栋，因?yàn)閟et是無(wú)序的，符合緩存池的特性裹粤。
關(guān)于計(jì)算cell的frame問(wèn)題，大家不要疑惑拇泣，我們是先根據(jù)代理方法返回的那些值來(lái)計(jì)算frame，并不是傳統(tǒng)意義上的根據(jù)上一個(gè)顯示的cell來(lái)計(jì)算下一個(gè)霉翔，這里是先講cell的frame都計(jì)算完畢苞笨，再等著屏幕滾動(dòng)债朵，我來(lái)判斷誰(shuí)滾蛋了瀑凝，誰(shuí)還在。另外粤咪，這里cell的排列原則是，取y值最小的一列，將最新的cell擺放上去磁奖，這樣才能造成層次不齊的效果某筐，比如有三列cell，我們遍歷每一列的y值南誊，取出最小的，加上間距就是最新cell的y值弟疆，很簡(jiǎn)單的一個(gè)取最小值的算法盗冷，我們其中一段核心代碼。在reloadData方法里仪糖。
//5.計(jì)算cell的frame
//先用一個(gè)c類(lèi)型數(shù)組存起每一列的最大值
CGFloat maxYOfColumns[numberOfColumns];
for (NSUInteger i = 0; i < numberOfColumns; i++) {
maxYOfColumns[i] = 0.0;
}
//計(jì)算每一個(gè)cell所在的位置，這里的原則是依次遍歷每一列的y值攒驰，取最小的一列放置最新的cell，這樣才能達(dá)到瀑布流的效果
for (NSUInteger i = 0; i < numberOfCells; i++) {
//從第0列開(kāi)始一個(gè)一個(gè)對(duì)比玻粪，有比它的y值小的就取出來(lái)诬垂，直到所有列數(shù)遍歷完剩下的就是最小值劲室，一個(gè)很基礎(chǔ)的算法
NSUInteger theColumn = 0;
CGFloat yOfTheColumn = maxYOfColumns[theColumn];
for (NSUInteger j = 0; j < numberOfColumns; j++) {
if (maxYOfColumns[j] < yOfTheColumn) {
theColumn = j;
yOfTheColumn = maxYOfColumns[j];
}
}
//取出該cell的高度
CGFloat cellH = [self heightAtIndex:i];
//x值
CGFloat cellX = left + theColumn * (cellW + column);
//y值
CGFloat cellY;
if (yOfTheColumn == 0) {
cellY = top;
}else{
cellY = yOfTheColumn + row;
}
CGRect cellFrame = CGRectMake(cellX, cellY, cellW, cellH);
//添加到frame數(shù)組中
[self.frameArray addObject:[NSValue valueWithCGRect:cellFrame]];
//更新這一列的y值
maxYOfColumns[theColumn] = CGRectGetMaxY(cellFrame);
}
我覺(jué)得注釋也寫(xiě)得挺清楚的很洋，下面再看重用的問(wèn)題，這個(gè)問(wèn)題重在監(jiān)控view的滾動(dòng)喉磁，然后根據(jù)cell是否在視圖上，如果不在是否能從緩存池里取得以及移除view的cell及時(shí)扔進(jìn)緩存池协怒，大家可能會(huì)想到用scrollView的代理方法監(jiān)聽(tīng)滾動(dòng)卑笨，但是這里有更好的斤讥，因?yàn)樯婕癴rame，使用layoutSubviews會(huì)更合適派草，因?yàn)関iew一滾動(dòng)，這個(gè)也會(huì)調(diào)用近迁，實(shí)在是監(jiān)聽(tīng)滾動(dòng)簸州，設(shè)置frame，居家旅行岸浑，殺人越貨的神器∈钢蓿看代碼。
-(void)layoutSubviews
{
for (NSUInteger i = 0; i < self.frameArray.count; i++) {
//取出frame
CGRect cellFrame = [self.frameArray[i] CGRectValue];
//先從屏幕顯示cell的數(shù)組中取出
YLWaterFallCell *cell = self.cellsOnScreen[@(i)];
if ([self cellIsOnScreen:cellFrame]) {
if (cell == nil) {//緩存池里沒(méi)有可重用的cell
cell = [self.datasource waterFallView:self cellForIndex:i];//找代理要
cell.frame = cellFrame;
self.cellsOnScreen[@(i)] = cell;
[self addSubview:cell];
}
}else{
if (cell) {
[cell removeFromSuperview];
[self.cellsOnScreen removeObjectForKey:@(i)];
//放入緩存池
[self.reusableCells addObject:cell];
}
}
}
}
好了责静，如果大家想要用這個(gè)控件的話(huà)盖桥，直接導(dǎo)入
