Objectiv-c - UICollectionViewLayout自定义布局-瀑布流Demo地址

gwk_iOS

发布于 2018-08-23 10:59:31

4950

发布于 2018-08-23 10:59:31

文章被收录于专栏：coding...coding...

写在前面弄了下个人站...防止内容再次被锁定...所有东西都在这里面 welcome~ 个人博客
最近刚写的一个简单的瀑布流. 整体思路可能不是很完善. 不过也算是实现效果了. 高手勿喷

瀑布流.gif

思路: 自定义UICollectionViewLayout实际上就是需要返回每个item的fram就可以了. 先说简单的,width值 = (CollectionView的整体宽度 - 左右边距 - 每列的间距 )/列数 height = 按照原图比例缩放就行 x 需要定位在哪一列上 = 左边距 + (列间距 + width) * 最小列的列号 y 永远是在列高最小的那列下添加 = 最小列高 + 行间距最小列高的计算需要将每一列的列高算出来比较下,最小列高的值是不断被替代.初始化应当就是上边距的值. 由于需要计算出最小列高于是我定义一个字典. { key0:columnHeight0, key1: columnHeight0 ... } 字典元素的个数由 column来决定. 每列存放的是当前列的列高. 通过比较columnHeight中最小的来获得最小 key ,每次更新这个最小key对应的columnHeight就行了

下面看代码:

公开变量以及代理. 公开的变量是可以进行调用时设置,一般就为这些,delegate用来实现动态的高度设置

//
//  WaterFallLayout.h
//  作业3
//
//  Created by gongwenkai on 2016/12/7.
//  Copyright © 2016年 gongwenkai. All rights reserved.
//

#import <UIKit>

@protocol  WaterFallLayoutDelegate<NSObject>

///设置图片高度
//width为cell实际宽度
- (CGFloat) collectionViewHeightAtIndexPath:(NSIndexPath *)indexPath withItemWidth:(CGFloat)width;

@end

@interface WaterFallLayout : UICollectionViewLayout

@property(nonatomic,assign)int column; //设置列数
@property(nonatomic,assign)int rowMargin; //设置行间距
@property(nonatomic,assign)int columnMargin;//设置列间距
@property(nonatomic,assign)UIEdgeInsets edge;//设置边距
@property(nonatomic,strong)id<WaterFallLayoutDelegate>delegate;
@end

由于我们的自定义布局继承UICollectionViewLayout. 每次布局都会调用 //准备布局做一些准备工作,例如初始化

- (void)prepareLayout; 
//这个方法在prepareLayout后调用.每次拖动都会调用,有点类似scrollview的那个.
//这里需要返回一个UICollectionViewLayoutAttributes数组里面就能存放fram信息
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect ;

先做准备工作:初始化字典

- (void)prepareLayout {
    [super prepareLayout];
    
//    NSLog(@"prepareLayout");
    
    //初始化字典
    for (int i = 0; i < _column; i++) {
        [self.maxYDict setObject:[NSNumber numberWithFloat:self.edge.top] forKey:[NSString stringWithFormat:@"%d",i]];
    }
    self.minKey = @"0";
    
    
    NSMutableArray *array = [NSMutableArray array];
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (int i = 0; i<count xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed> height) {
            minY = height;
            self.minKey = [NSString stringWithFormat:@"%d",i];
            columnHeight = minY + heightAtt;

        } else {
            columnHeight = height;
            
            [self.maxYDict setObject:[NSNumber numberWithFloat:columnHeight] forKey:[NSString stringWithFormat:@"%d",i]];

        }
        
    }
    
    //设置X,Y坐标
    CGFloat x = self.edge.left + [self.minKey floatValue] * (width + self.columnMargin);
    CGFloat y = [[self.maxYDict objectForKey:self.minKey] floatValue] ;
    
    //更新最小列的高度
    [self.maxYDict setObject:[NSNumber numberWithFloat:y+heightAtt] forKey:self.minKey];
    
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attrs.frame = CGRectMake(x, y, width, heightAtt);

    return attrs;
}

计算完了就可以让layoutAttributesForElementsInRect设置回布局了

- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
//    NSLog(@"layoutAttributesForElementsInRect");
   
    return self.attrsArray;
}

最后我们需要重写一下内容的范围,高为最大的列高

/*
 重写 设置collectionViewContentSize
 */
- (CGSize)collectionViewContentSize {
    
    //最高列关键字
    int columnHeight = 0;
    //默认取第一个元素
    float maxY = [[self.maxYDict objectForKey:@"0"] floatValue];
    //找到字典中最大的数
    for (int i = 0; i < self.maxYDict.allKeys.count; i++) {
        float height = [[self.maxYDict objectForKey:[NSString stringWithFormat:@"%d",i]] floatValue];
        if (maxY < height) {
            //保持maxY最小
            maxY = height;
            //记录key
            columnHeight = i;
        }
    }
    
    //读取最高列
    CGFloat maxHeight = [[self.maxYDict objectForKey:[NSString stringWithFormat:@"%d",columnHeight]] floatValue];
    
    return CGSizeMake(0, maxHeight + self.edge.bottom);
}

大功告成。