IOS simple to implement waterfall flow Uicollectionview_ios

Uicollectionview is more flexible than TableView and has a powerful function. The system realizes the flow layout, but there are many limitations to its usefulness.

To achieve a more flexible layout, bite and rewrite the uicollectionviewlayout.
First look at the implementation effect:

Nonsense not much to say, directly on the code:

Watch WATERFALLCOLLECTIONLAYOUT.M first.

#import "WaterfallCollectionLayout.h"
#define Colmargin 5
#define COLCOUNT 4
#define Rolmargin 5
@ Interface Waterfallcollectionlayout ()
//array holds the total height of each column
@property (nonatomic,strong) nsmutablearray* colsheight ;
Cell width
@property (nonatomic,assign) cgfloat colwidth;
@end

The class overrides the following methods:

The initial work before the layout is completed
-(void) preparelayout;

CollectionView Content Dimensions
-(cgsize) collectionviewcontentsize;

Set properties for each item
-(Uicollectionviewlayoutattributes *) Layoutattributesforitematindexpath: (Nsindexpath *) Indexpath;

Gets the properties for all item of the scope
-(nsarray<uicollectionviewlayoutattributes *> *) Layoutattributesforelementsinrect: ( CGRect) rect;

-(BOOL) Shouldinvalidatelayoutforboundschange: (CGRect) newbounds;

Each call clears the information in the Colsheight array:

The initial work before the layout is completed
-(void) preparelayout{
  [Super preparelayout];
  Self.colwidth = (Self.collectionView.frame.size.width-(colcount+1) *colmargin)/colcount;
  Let it reload
  self.colsheight = nil;
}
Gets the longest column by traversing all the columns in the Colheight array, returning
the content dimensions of the 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);
}

This method is invoked when each cell comes out, and the cell frame is set in this method.

Note that the Heightblock is the block used by the external controller to compute the height of each cell, and now I just set the random number. If there's no block coming in here, I'll just let him crash.

//Set properties for each 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;
  Get cell height cgfloat height=0;
  Nsassert (Self.heightblock!=nil, @ "not implemented block of compute height");
  if (self.heightblock) {height = Self.heightblock (indexpath);
  } attr.frame= CGRectMake (x, y, self.colwidth, height);
  
  self.colsheight[shortcol]=@ (Shortest.floatvalue+colmargin+height);
return attr; }

Get Properties for all 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;
}

Implementing the following methods will rearrange and invoke the Preparelayout method when a new cell appears

-(BOOL) Shouldinvalidatelayoutforboundschange: (cgrect) newbounds{return
  YES;
}

The height of each column storage, the initial height can be changed, I here is 0

-(Nsmutablearray *) colsheight{
  if (!_colsheight) {
    Nsmutablearray * array = [Nsmutablearray array];
    for (int i =0;i<colcount;i++) {
      //Here you can set the initial height
      [array addobject:@ (0)];
    }
    _colsheight = [array mutablecopy];
  }
  return _colsheight;
}

Let's see how simple the controller is.

 #pragma mark Getter-setter-(Uicollectionview *) collectionview{if (!_collectionview) {_coll
    Ectionview = [[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]initwithitemsheightbl
    Ock:^cgfloat (Nsindexpath *index) {return [Self.heightarr[index.item] floatvalue];
    
  }];
return _layout;
    }-(Nsarray *) heightarr{if (!_heightarr) {//randomly generated height nsmutablearray *arr = [Nsmutablearray array];
    for (int i = 0; i<100; i++) {[Arr addobject:@ (Arc4random ()%50+80)];
  } _heightarr = [arr copy];
return _heightarr; }

About waterfall flow of the article is particularly many, this article is for you to share the simple realization of the waterfall flow of iOS method, I hope to help you learn.