UICollectionView 比tableView 靈活，功能也強大很多。系統(tǒng)實現(xiàn)了流式布局，但用處還有很多限制。
要想實現(xiàn)更靈活的布局，就咬重寫UICollectionViewLayout。
先看下實現(xiàn)效果：
廢話不多說，直接上代碼：
先看WaterfallCollectionLayout.m
#import "WaterfallCollectionLayout.h"#define colMargin 5#define colCount 4#define rolMargin 5@interface WaterfallCollectionLayout ()//數(shù)組存放每列的總高度@property(nonatomic,strong)NSMutableArray* colsHeight;//單元格寬度@property(nonatomic,assign)CGFloat colWidth;@end
該類要重寫以下方法：
//完成布局前的初始工作-(void)prepareLayout;//collectionView的內(nèi)容尺寸-(CGSize)collectionViewContentSize;//為每個item設(shè)置屬性-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;//獲取制定范圍的所有item的屬性-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;
每次調(diào)用會清空colsHeight數(shù)組里的信息：
//完成布局前的初始工作-(void)prepareLayout{ [super prepareLayout]; self.colWidth =( self.collectionView.frame.size.width - (colCount+1)*colMargin )/colCount; //讓它重新加載 self.colsHeight = nil;}通過遍歷colHeight數(shù)組里的所有列來獲得最長的那一列，返回contentsize//collectionView的內(nèi)容尺寸-(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要出來時這個方法會被調(diào)用，在此方法中設(shè)置該cell的frame。
注意heightBlock是外部控制器傳進來的block用以計算每個cell的高度，現(xiàn)在我只是設(shè)置了隨機數(shù)。如果沒有傳block進來我這里直接讓他崩潰了。
//為每個item設(shè)置屬性-(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, @"未實現(xiàn)計算高度的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;}實現(xiàn)下列方法會在出現(xiàn)新的cell時重新布局并調(diào)用preparelayout方法
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{ return YES;}每列高度的存放，初始高度可以改，我這里是0
-(NSMutableArray *)colsHeight{ if(!_colsHeight){ NSMutableArray * array = [NSMutableArray array]; for(int i =0;i<colCount;i++){ //這里可以設(shè)置初始高度 [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;}關(guān)于瀑布流的文章特別多，本文就是為大家分享了IOS簡單實現(xiàn)瀑布流的方法，希望對大家的學(xué)習(xí)有所幫助。
新聞熱點
疑難解答
