可分组的瀑布流布局

效果图:
iPhone.gif
  • 不同组之间可以设置不同的布局属性
  • 每组可添加头部/尾部视图
  • 通过delegate计算出头部/尾部/item frame
  • 从写父类 UICollectionViewLayout 方法
自定义HJCollectionViewWaterfallLayout
#import 

static NSString *const HJElementKindSectionHeader = @"HJElementKindSectionHeader";
static NSString *const HJElementKindSectionFooter = @"HJElementKindSectionFooter";

@class HJCollectionViewWaterfallLayout;
@protocol HJCollectionViewWaterfallLayoutDelegate 

@required
/**
 item size
 */
- (CGSize)hj_collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

@optional
/**
 每组单行的排布个数
 */
- (NSInteger)hj_collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout columCountAtSection:(NSInteger)section;
/**
 每组头部视图的高度
 */
- (CGFloat)hj_collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout heightForHeaderAtSection:(NSInteger)section;
/**
 每组尾部视图的高度
 */
- (CGFloat)hj_collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout heightForFooterAtSection:(NSInteger)section;

/**
 每组的UIEdgeInsets
 */
- (UIEdgeInsets)hj_collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSection:(NSInteger)section;

/**
 每组的minimumLineSpacing 行与行之间的距离
 */
- (CGFloat)hj_collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSection:(NSInteger)section;

/**
 每组的minimumInteritemSpacing 同一行item之间的距离 
 */
- (CGFloat)hj_collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSection:(NSInteger)section;

@end

@interface HJCollectionViewWaterfallLayout : UICollectionViewLayout

@property (nonatomic, weak)   iddelegate;
@property (nonatomic, assign) NSInteger columCount;            // 每行多少个item 默认为 1
@property (nonatomic, assign) CGFloat minimumLineSpacing;      // 行于行之间的距离 默认 10.0
@property (nonatomic, assign) CGFloat minimumInteritemSpacing; // 同一行item之间的距离 默认 10.0
@property (nonatomic, assign) CGFloat sectionHeaderH;          // 组头部视图的高度
@property (nonatomic, assign) CGFloat sectionFooterH;          // 组尾部视图的高度
@end
需重写的父类方法
- (void)prepareLayout;
- (CGSize)collectionViewContentSize ;
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path ;
- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;
demo地址:demo

你可能感兴趣的:(可分组的瀑布流布局)