瀑布流的实现

现在很多应用会用到瀑布流的效果,今天试着撸了一下,感觉还可以,下面是效果图:

屏幕快照 2016-08-26 14.30.11.png

我在实现这个瀑布流的时候,做到了类的完全解耦,只暴露了一些基本的设置给控制器,如列数,内边距,及cell之间的间距等,所以完全可以做到将这个布局类应用到所有项目中

下面介绍实现步骤:
首先我们采用的是UICollecionView,布局采用UICollectionViewLayout.
我在写布局的时候 ,不管三七二十一先把这五个方法撸上,这是最重要的方法,也是基本的方法.

/**
 *  只要显示的边界发生改变就重新布局:内部会重新调用prepareLayout,layoutAttributesForElementsInRect方法获得所有cell的布局属性
 *
 */
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

/**
 *  一些初始化工作最好在这里实现
 */
-(void)prepareLayout
{
    [super prepareLayout];
   
}

//相当于ScrollView的contentSize
-(CGSize)collectionViewContentSize

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath

-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect

我们要想实现瀑布流,酒席需明确知道服务器返回的图片的尺寸,如果没有,那么兄弟记得跟UI的妹子或者后台搞好关系(⊙o⊙)哦

先在init方法中进行一些初始化设置

-(instancetype)init
{
    if (self = [super init]) {
        self.columnMargin = 10;
        self.rowMargin = 10;
        self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
        self.columnsCount = 3;
    }
    return self;
}

因为要记录每一列的Y值,我采用字典的方式

@property (nonatomic,strong) NSMutableDictionary *maxYDict;

下面是具体实现,废话不多说,直接上代码

-(void)prepareLayout
{
    NSLog(@"prepareLayout");
    
    [super prepareLayout];
  
    //1.清空最大Y值,全部变为0
    for (int i = 0; i < self.columnsCount; i++) {
        NSString *column = [NSString stringWithFormat:@"%d",i];
        self.maxYDict[column] =@(self.sectionInset.top);
    }
    
    //2.计算所有cell的属性
    [self.attrsArray removeAllObjects];
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (int i = 0; i < count; i ++) {
        [self.attrsArray addObject:[self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]]];
    }

}


-(CGSize)collectionViewContentSize
{
    __block NSString *maxColumn = @"0";
    [self.maxYDict enumerateKeysAndObjectsUsingBlock:^(NSString *column, NSNumber *maxY, BOOL * _Nonnull stop) {
        if([maxY floatValue] > [self.maxYDict[maxColumn] floatValue])
        {
            maxColumn = column;
        }
    }];
    
    return CGSizeMake(0, [self.maxYDict[maxColumn] floatValue] + self.sectionInset.bottom);
}

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //NSLog(@"%@",self.maxYDict);
    __block NSString *minColumn = @"0";
    //找出最短的那一列
    [self.maxYDict enumerateKeysAndObjectsUsingBlock:^(NSString *column, NSNumber *maxY, BOOL * _Nonnull stop) {
        if([maxY floatValue] < [self.maxYDict[minColumn] floatValue])
        {
            minColumn = column;
        }
    }];
    
    CGFloat width = (self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right - (self.columnsCount - 1) * self.columnMargin) / self.columnsCount;
    
    CGFloat height = [self.delegate waterflowLayout:self heightForWidth:width atIndexPath:indexPath];
    
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    
    CGFloat x = self.sectionInset.left + (width + self.columnMargin) * [minColumn intValue];
    CGFloat y = [self.maxYDict[minColumn] floatValue] + self.rowMargin;
    
    //更新这一列的最大Y值
    self.maxYDict[minColumn] = @(y + height);
    
    attrs.frame = CGRectMake(x, y, width, height);
    
    return attrs;
}

-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    
    return self.attrsArray;
}

采用代理方式通知控制器,从而设置图片高度等比例

#import <UIKit/UIKit.h>
@class YJWaterFlowLayout;

@protocol YJWaterflowLayoutDelegate <NSObject>

-(CGFloat)waterflowLayout:(YJWaterFlowLayout *)waterflowLayout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath;

@end

@interface YJWaterFlowLayout : UICollectionViewLayout
@property (nonatomic,assign) UIEdgeInsets sectionInset;
@property (nonatomic,assign) CGFloat columnMargin;
@property (nonatomic,assign) CGFloat rowMargin;
@property (nonatomic,assign) int columnsCount;

@property (nonatomic,weak)id<YJWaterflowLayoutDelegate> delegate;

@end

控制器实现方法:

#pragma mark -<YJWaterflowLayoutDelegate>
-(CGFloat)waterflowLayout:(YJWaterFlowLayout *)waterflowLayout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath
{
    HMShop *shop = self.shops[indexPath.item];
    return shop.h / shop.w * width; 
}