IOS简单实现瀑布流UICollectionView
程序员文章站
2022-07-11 18:15:21
uicollectionview 比tableview 灵活,功能也强大很多。系统实现了流式布局,但用处还有很多限制。
要想实现更灵活的布局,就咬重写uicollecti...
uicollectionview 比tableview 灵活,功能也强大很多。系统实现了流式布局,但用处还有很多限制。
要想实现更灵活的布局,就咬重写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<uicollectionviewlayoutattributes *> *)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<self.colsheight.count;i++) { nsnumber* rolheight = self.colsheight[i]; if(longest.floatvalue<rolheight.floatvalue){ longest = rolheight; } } return cgsizemake(self.collectionview.frame.size.width, longest.floatvalue); }
每个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;i<self.colsheight.count;i++) { nsnumber* rolheight = self.colsheight[i]; if(shortest.floatvalue>rolheight.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<uicollectionviewlayoutattributes *> *)layoutattributesforelementsinrect:(cgrect)rect{ nsmutablearray* array = [nsmutablearray array]; nsinteger items = [self.collectionview numberofitemsinsection:0]; for (int i = 0; i<items;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;i<colcount;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; i<100; i++) { [arr addobject:@(arc4random()%50+80)]; } _heightarr = [arr copy]; } return _heightarr; }
关于瀑布流的文章特别多,本文就是为大家分享了ios简单实现瀑布流的方法,希望对大家的学习有所帮助。
上一篇: 韭菜炒猪肝怎样做才最好呢
下一篇: 糖尿病的危害以及科学饮食有哪些