Custom UICollectinviewFlowLayout, that is, implementing waterfall stream. Custom ios flowlayout

Custom UICollectinviewFlowLayout, that is, implementing waterfall stream. Custom ios flowlayout

To display different effects through irregular grid distribution. Because the layout must be specified and displayed in the set view, you can customize the layout to achieve the waterfall flow effect.

// Create the layout object WaterFlowLayout * flowLayout = [[WaterFlowLayout alloc] init]; flowLayout. delegate = self; flowLayout. numberOfColumn = 3; // create set view UICollectionView * collectionView = [[UICollectionView alloc] initWithFrame: [UIScreen mainScreen]. bounds collectionViewLayout: flowLayout];

There are four methods for the system's built-in layout: item size, partition interval, minimum row spacing, and gap size between items.

@protocol UICollectionViewDelegateFlowLayout <UICollectionViewDelegate>@optional- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

Therefore, customize FlowLayout and define the Protocol to define these methods.

@ Protocol WaterFlowLayoutDelegate <NSObject> // key method. This method returns the size of the original image in each item. // (CGSize) collectionView (UICollectionView *) collectionView layout :( WaterFlowLayout *) collectionViewLayout layout :( NSIndexPath *) indexPath; // partition interval-(partition) collectionView :( UICollectionView *) collectionView layout :( WaterFlowLayout *) collectionViewLayout layout :( NSInteger) section; // obtain the gap size between items-(CGFloat) collectionView :( UICollectionView *) collectionView layout :( WaterFlowLayout *) collectionViewLayout minimumLineSpacingForSectionAtIndex :( NSInteger) section; // CGFloat) collectionView :( UICollectionView *) collectionView layout :( WaterFlowLayout *) collectionViewLayout layout :( NSInteger) section; @ end @ interface WaterFlowLayout: Total number of columns of UICollectionViewLayout // waterfall stream @ property (nonatomic, assign) NSUInteger numberOfColumn; @ property (nonatomic, assign) id <WaterFlowLayoutDelegate> delegate;

As shown in the figure, the minimum height of the item is used as the starting point of the next item column.

@ Interface WaterFlowLayout () // store the height of each column @ property (nonatomic, retain) NSMutableArray * columnHeightsArray; // stores the attributes of each item, including frame and subscript @ property (nonatomic, retain) NSMutableArray * attributesArray; @ end @ implementation WaterFlowLayout // method for obtaining the minimum height-(CGFloat) minHeight {CGFloat min = 100000; for (NSNumber * height in _ columnHeightsArray) {CGFloat h = [height floatValue]; if (min> h) {min = h ;}} return min ;}// obtain the maximum value-(CGFloat) maxHeight {CGFloat max = 0; for (NSNumber * height in _ columnHeightsArray) {CGFloat h = [height floatValue]; if (max 
Note: The implementation of the last method, namely-(NSArray *) layoutAttributesForElementsInRect :( CGRect) rect. If this method is not written, the set view cannot be displayed, this method re-tells the set view about each item saved for display.