IOS简单实现瀑布流UICollectionView

茜茜公主堡

茜茜公主堡

2016-02-19 09:02

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享IOS简单实现瀑布流UICollectionView,希望可以对大家能有小小的帮助。

UICollectionView 比tableView 灵活,功能也强大很多。系统实现了流式布局,但用处还有很多限制。

要想实现更灵活的布局,就咬重写UICollectionViewLayout。
先看下实现效果:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/bianchengyuyan/)

废话不多说,直接上代码:

先看WaterfallCollectionLayout.m

#import "WaterfallCollectionLayout.h"#define colMargin 5#define colCount 4#define rolMargin 5@interface WaterfallCollectionLayout ()//数组存放每列的总高度@property(nonatomic,strong)NSMutableArray* colsHeight;//单元格宽度@property(nonatomic,assign)CGFloat colWidth;@end

该类要重写以下方法:

//完成布局前的初始工作-(void)prepareLayout;//collectionView的内容尺寸-(CGSize)collectionViewContentSize;//为每个item设置属性-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;//获取制定范围的所有item的属性-(NSArrayUICollectionViewLayoutAttributes * *)layoutAttributesForElementsInRect:(CGRect)rect;-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;

每次调用会清空colsHeight数组里的信息:

//完成布局前的初始工作-(void)prepareLayout{  [super prepareLayout];  self.colWidth =( self.collectionView.frame.size.width - (colCount+1)*colMargin )/colCount;  //让它重新加载  self.colsHeight = nil;}通过遍历colHeight数组里的所有列来获得最长的那一列,返回contentsize//collectionView的内容尺寸-(CGSize)collectionViewContentSize{  NSNumber * longest = self.colsHeight[0];  for (NSInteger i =0;iself.colsHeight.count;i++) {NSNumber* rolHeight = self.colsHeight[i];if(longest.floatValuerolHeight.floatValue){  longest = rolHeight;}  }  return CGSizeMake(self.collectionView.frame.size.width, longest.floatValue);}

每个cell要出来时这个方法会被调用,在此方法中设置该cell的frame。

注意heightBlock是外部控制器传进来的block用以计算每个cell的高度,现在我只是设置了随机数。如果没有传block进来我这里直接让他崩溃了。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/bianchengyuyan/)
//为每个item设置属性-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{  UICollectionViewLayoutAttributes* attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];  NSNumber * shortest = self.colsHeight[0];  NSInteger shortCol = 0;  for (NSInteger i =0;iself.colsHeight.count;i++) {NSNumber* rolHeight = self.colsHeight[i];if(shortest.floatValuerolHeight.floatValue){  shortest = rolHeight;  shortCol=i;}  }  CGFloat x = (shortCol+1)*colMargin+ shortCol * self.colWidth;  CGFloat y = shortest.floatValue+colMargin;//获取cell高度  CGFloat height=0;  NSAssert(self.heightBlock!=nil, @"未实现计算高度的block ");  if(self.heightBlock){height = self.heightBlock(indexPath);  }  attr.frame= CGRectMake(x, y, self.colWidth, height);  self.colsHeight[shortCol]=@(shortest.floatValue+colMargin+height);return attr;}
//获取所有item的属性-(NSArrayUICollectionViewLayoutAttributes * *)layoutAttributesForElementsInRect:(CGRect)rect{  NSMutableArray* array = [NSMutableArray array];  NSInteger items = [self.collectionView numberOfItemsInSection:0];  for (int i = 0; iitems;i++) {UICollectionViewLayoutAttributes* attr = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];[array addObject:attr];  }  return array;}

实现下列方法会在出现新的cell时重新布局并调用preparelayout方法

-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{  return YES;}

每列高度的存放,初始高度可以改,我这里是0

-(NSMutableArray *)colsHeight{  if(!_colsHeight){NSMutableArray * array = [NSMutableArray array];for(int i =0;icolCount;i++){  //这里可以设置初始高度  [array addObject:@(0)];}_colsHeight = [array mutableCopy];  }  return _colsHeight;}

再来看看控制器里就是这么简单

#pragma mark getter-setter-(UICollectionView *)collectionView{  if(!_collectionView){_collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:self.layout];_collectionView.backgroundColor = [UIColor whiteColor];_collectionView.delegate=self;_collectionView.dataSource=self;[_collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:identifer];  }  return _collectionView;}-(UICollectionViewLayout *)layout{  if(!_layout){_layout = [[WaterfallCollectionLayout alloc]initWithItemsHeightBlock:^CGFloat(NSIndexPath *index) {  return [self.heightArr[index.item] floatValue];}];  }  return _layout;}-(NSArray *)heightArr{  if(!_heightArr){//随机生成高度NSMutableArray *arr = [NSMutableArray array];for (int i = 0; i100; i++) {  [arr addObject:@(arc4random()%50+80)];}_heightArr = [arr copy];  }  return _heightArr;}

关于瀑布流的文章特别多,本文就是为大家分享了IOS简单实现瀑布流的方法,希望对大家的学习有所帮助。

展开更多 50%)
分享

猜你喜欢

IOS简单实现瀑布流UICollectionView

编程语言 网络编程
IOS简单实现瀑布流UICollectionView

IOS实现自定义布局瀑布流

编程语言 网络编程
IOS实现自定义布局瀑布流

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

IOS实现简单的进度条功能

编程语言 网络编程
IOS实现简单的进度条功能

jquery.masonry瀑布流插件用法详解

Web开发
jquery.masonry瀑布流插件用法详解

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

PS简单合成瀑布城堡美景

PS PS基础 PS效果
PS简单合成瀑布城堡美景

iOS开发中实现邮件和短信发送的简单示例

编程语言 网络编程
iOS开发中实现邮件和短信发送的简单示例

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

解析在Direct2D中画Bezier曲线的实现方法

解析在Direct2D中画Bezier曲线的实现方法

WPS编辑的Word文档用Word2003打不开怎么办

WPS编辑的Word文档用Word2003打不开怎么办
下拉加载更多内容 ↓