IOS簡單實(shí)現(xiàn)瀑布流UICollectionView

更新時間：2020年04月20日 11:30:10 作者：tanhui_ui

這篇文章主要為大家介紹了IOS簡單實(shí)現(xiàn)瀑布流UICollectionView的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

UICollectionView 比tableView 靈活，功能也強(qiáng)大很多。系統(tǒng)實(shí)現(xiàn)了流式布局，但用處還有很多限制。

要想實(shí)現(xiàn)更靈活的布局，就咬重寫UICollectionViewLayout。
先看下實(shí)現(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是外部控制器傳進(jìn)來的block用以計算每個cell的高度，現(xiàn)在我只是設(shè)置了隨機(jī)數(shù)。如果沒有傳block進(jìn)來我這里直接讓他崩潰了。

//為每個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, @"未實(shí)現(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;
}

實(shí)現(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){
  //隨機(jī)生成高度
  NSMutableArray *arr = [NSMutableArray array];
  for (int i = 0; i<100; i++) {
   [arr addObject:@(arc4random()%50+80)];
  }
  _heightArr = [arr copy];
 }
 return _heightArr;
}

關(guān)于瀑布流的文章特別多，本文就是為大家分享了IOS簡單實(shí)現(xiàn)瀑布流的方法，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: