iOS小Demo--瀑布流的实现

我们经常见到一些类似于照片墙的东西,其实它是通过自定义UICollectionViewLayout去实现的.
我们仿照系统定义一些属性,利用这些属性重新布局完成照片墙的效果.

#import <UIKit/UIKit.h>

@class CustomWaterFallLayout ;
@protocol CustomWaterFallLayoutDelegate <NSObject>

// 此方法是为了从ViewController中得到相应位置的item的size值(实际显示的宽高),以便布局
// 第一个参数:将当前类对象传递过去,是为了获得当前类对象的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 columnNumber ;
// 内边距
@property (nonatomic,assign)UIEdgeInsets sectionInsets ;

// 代理对象
@property (nonatomic,assign)id<CustomWaterFallLayoutDelegate> delegate ;

@end

#import "CustomWaterFallLayout.h"

@interface CustomWaterFallLayout ()

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

@end

@implementation CustomWaterFallLayout

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

- (NSMutableArray *)columnHeightArray
{
    if (!_columnHeightArray)
    {
        _columnHeightArray = [[NSMutableArray alloc] init] ;
    }
    return _columnHeightArray ;
}
// 得到最短列在数组(columnHeightArray)中的下标
- (NSInteger)shortestColumnIndex
{
    int index = 0 ; // 存储最短列下标
    float shortestHeight = MAXFLOAT ; // 用来存储最短列长度.
    for (int i = 0; i<self.columnHeightArray.count; i++)
    {
        float height = [[self.columnHeightArray objectAtIndex:i] floatValue] ;
        if (height < shortestHeight)
        {
            shortestHeight = height ;
            index = i ;
        }
    }
    return index ;
}
// 得到最长列在数组(columnHeightArray)中的下标
- (NSInteger)longestColumnIndex
{
    int index = 0 ;
    float longestHeight = 0 ; // 用来存储最短列
    for (int i = 0; i<self.columnHeightArray.count; i++)
    {
        float height = [[self.columnHeightArray objectAtIndex:i] floatValue] ;
        if (height>longestHeight)
        {
            longestHeight = height ;
            index = i ;
        }
    }
    return index ;
}

// 所有单元格的布局方法,实际上就是求所有单元格的frame
- (void)customLayoutItem
{
    // 为所有列赋初始长度(内边距的top值)
    for (int i = 0; i<self.columnNumber; i++)
    {
        //[self.columnHeightArray addObject:[NSNumber numberWithFloat:self.sectionInsets.top]] ;
        self.columnHeightArray[i] = @(self.sectionInsets.top) ;
    }
    // 为了给所有的item布局,我们得得到item的总个数
    NSInteger allItems = [self.collectionView numberOfItemsInSection:0] ;
    // 遍历所有的单元格,为它计算frame
    for (int i = 0; i<allItems; i++)
    {
        // 计算当前item的X值
        // 得到当前item所在的列
        NSInteger shortestIndex = [self shortestColumnIndex] ;
        // 根据列计算X值
        float x = self.sectionInsets.left + shortestIndex * (self.columnSpace + self.itemSize.width) ;
        // 计算item的y值
        // 最短列的长度+行间距
        float y = [self.columnHeightArray[shortestIndex] 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.columnHeightArray[shortestIndex] = @(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.columnHeightArray objectAtIndex:[self longestColumnIndex]] floatValue] ;
    contentSize.height = height ;
    return contentSize ;
}

@end

#pragma mark -- 自定义布局类的代理方法
// 通过该代理方法可以获得相应的indexPath的item的大小
- (CGSize)layoutWithCustomLayout:(CustomWaterFallLayout *)layout indexPath:(NSIndexPath *)indexPath
{
    // 先得到宽度,根据宽度等比例计算高度
    float width = layout.itemSize.width ;
    // 得到原来的宽高
    NSDictionary *dic = [self.allDataArray objectAtIndex:indexPath.item] ;
    float originalHeight = [[dic objectForKey:@"height"] floatValue] ;
    float originalWidth = [[dic objectForKey:@"width"] floatValue] ;
    // 得到真实需要的高度
    float height = width*originalHeight/originalWidth ;
    return CGSizeMake(width, height) ;
}

全部栏目

iOS小Demo--瀑布流的实现