瀑布流

作者: ly渐行渐远 | 来源:发表于2015-12-23 10:27 被阅读67次

CustomWaterFallLayout.h

#import <UIKit/UIKit.h>

@class CustomWaterFallLayout;
@protocol CustomWaterFallLayoutDelegate <NSObject>

//此方法是为了从viewController中得到相应位置的item,以便布局
//第一个参数:将当前类对象传递过去,是为了获得当前对象的itemSize属性,进一步得到该item的宽度,根据比例计算高度
//第二个参数:是为了在viewController根据indexPath得到对应位置的item,然后从相应的数据源中取出对应的数据,以便计算。
//返回值就是我们想要得到的单元格的size
- (CGSize)layoutWithCustomLayout: (CustomWaterFallLayout *)layout indexPath: (NSIndexPath *)indexPath;

@end

@interface CustomWaterFallLayout : UICollectionViewLayout

//得到item的大小
@property (nonatomic,assign) CGSize itemSize;

//行间距
@property (nonatomic,assign) float lineSpace;

//列间距
@property (nonatomic,assign) float columnSpace;

//共多少列
@property (nonatomic,assign) int numberColumn;

//内边距
@property (nonatomic,assign) UIEdgeInsets sectionInsets;

@property (nonatomic,assign) id<CustomWaterFallLayoutDelegate> delegate;

@end

CustomWaterFallLayout.m

#import "CustomWaterFallLayout.h"

@interface CustomWaterFallLayout ()

@property (nonatomic,retain) NSMutableArray *attributesArray;//保存所有的单元格属性模型,属性模型里面包含单元格的frame值
@property (nonatomic,retain) NSMutableArray *columnLengthArray;//保存所有列的长度,用来比较以便找出最短列来布局新的单元格。
- (NSInteger)shortColumnIndex;//得到最短列的下标,来确定最短列是那一列,根据列数来计算item的x坐标的位置,根据最短列的列数,从上面的数组中可以取出对应的长度,根据长度,就可以确定当前item的y坐标
- (NSInteger)longColumnIndex;//得到最长列的下标,根据下标从上面的数组中取出最长长度,用来确定collectionView的可滚动区域。

@end

@implementation CustomWaterFallLayout

- (NSMutableArray *)attributesArray
{
    if (!_attributesArray) {
        _attributesArray = [[NSMutableArray alloc] init];
    }
    
    return _attributesArray;
}

- (NSMutableArray *)columnLenthArray
{
    if (!_columnLengthArray) {
        _columnLengthArray = [[NSMutableArray alloc] init];
    }
    
    return _columnLengthArray;
}


- (NSInteger)shortColumnIndex{
    int index = 0;      //存储最短列下标
    float shortLength = MAXFLOAT;       //用来存储最短列长度
    for (int i = 0; i < self.columnLengthArray.count; i++) {
        float length = [[self.columnLengthArray objectAtIndex:i] floatValue];
        if (length < shortLength) {
            shortLength = length;
            index = i;
        }
    }
    return index;
}

- (NSInteger)longColumnIndex
{
    int index = 0;//存储最长列下标
    float longLength = 0;//用来存储最长列的长度
    for (int i = 0; i < self.columnLengthArray.count; i++) {
        float length = [self.columnLengthArray[i] floatValue];
        if (length > longLength) {
            longLength = length;
            index = i;
        }
    }
    
    return index;
}

//所有单元格的布局方法,实际上就是确定所有单元格的frame
-(void)customLayoutItem{
    //为所有列赋值初始长度,实际上就是内边距的top
    for (int i = 0; i < self.numberColumn; i++) {
        
//        [self.columnLenthArray addObject:[NSNumber numberWithFloat:self.sectionInsets.top]];
        
        self.columnLenthArray[i] = @(self.sectionInsets.top);
    }
    //为了给所有的item布局,我们得得到item的总个数
    NSInteger allItems = [self.collectionView numberOfItemsInSection:0];
    //    遍历所有的单元格,为他计算ftame
    for (int i = 0; i<allItems; i++) {
        //计算item的X值
        //得到当前item所在的列
        NSInteger shortIndex = self.shortColumnIndex;
        //根据列计算X值
        float x = self.sectionInsets.left + (self.itemSize.width+self.columnSpace)*shortIndex;
        //算item的Y值
        //最短列的长度加上行间距
        float y = [self.columnLenthArray[shortIndex] floatValue]+ self.lineSpace;
        //得到该item的宽高
        //需要一个indexPath来确定是要那个item的宽高
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        CGSize size = [self.delegate layoutWithCustomLayout:self indexPath:indexPath];
        //声明一个属性模型,来承载对应item的frame
        UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        attributes.frame = CGRectMake(x, y, size.width, size.height);
        [self.attributesArray addObject:attributes];
        //每次增加一个item,当前列的长度肯定会发生变化,所以我们要更新数组中当前列的长度,以便下次找最短列使用。
        self.columnLenthArray[shortIndex] = @(y + size.height);
    }
}

//开始布局时所调用的系统方法
- (void)prepareLayout
{
    [super prepareLayout];
    
    //在开始布局时使用我们的布局方法
    [self customLayoutItem];
}

//为当前区域保存所有的属性模型
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    return self.attributesArray;
}

////返回每个item的属性模型
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return self.attributesArray[indexPath.item];
}


//collectionView的可滚动区域
- (CGSize)collectionViewContentSize
{
    CGSize contentSize = self.collectionView.frame.size;
    //得到可滚动高度
    float height = [[self.columnLengthArray objectAtIndex:self.longColumnIndex] floatValue];
    contentSize.height = height;
    return contentSize;
}

@end

相关文章

网友评论

      本文标题:瀑布流

      本文链接:https://www.haomeiwen.com/subject/wckvhttx.html