IOS瀑布流UICollectionView的实现方法
来源:爱站网时间:2020-11-03编辑:网友分享
UICollectionView不仅功能强大还非常灵活,但是用处方面有很多限制,那么爱站小编今天在这里就为大家介绍IOS瀑布流UICollectionView的实现方法。
UICollectionView不仅功能强大还非常灵活,但是用处方面有很多限制,那么爱站小编今天在这里就为大家介绍IOS瀑布流UICollectionView的实现方法。
要想实现更灵活的布局,就咬重写UICollectionViewLayout。
先看下实现效果:

废话不多说,直接上代码:
先看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的属性 -(NSArray*)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;i
每个cell要出来时这个方法会被调用,在此方法中设置该cell的frame。
注意heightBlock是外部控制器传进来的block用以计算每个cell的高度,现在我只是设置了随机数。如果没有传block进来我这里直接让他崩溃了。
//为每个item设置属性
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewLayoutAttributes* attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
NSNumber * shortest = self.colsHeight[0];
NSInteger shortCol = 0;
for (NSInteger i =0;irolHeight.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的属性 -(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect{ NSMutableArray* array = [NSMutableArray array]; NSInteger items = [self.collectionView numberOfItemsInSection:0]; for (int i = 0; i
实现下列方法会在出现新的cell时重新布局并调用preparelayout方法
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
return YES;
}
每列高度的存放,初始高度可以改,我这里是0
-(NSMutableArray *)colsHeight{
if(!_colsHeight){
NSMutableArray * array = [NSMutableArray array];
for(int i =0;i
再来看看控制器里就是这么简单
#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; i
以上就是IOS瀑布流UICollectionView的实现方法,其实关于瀑布流的文章特别多,本文主要为大家分享了IOS简单实现瀑布流的方法,希望对大家的学习有所帮助。
