iOS小Demo--瀑布流的实现

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

#import 

@class CustomWaterFallLayout ;
@protocol CustomWaterFallLayoutDelegate 

// 此方法是为了从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 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; ilongestHeight)
        {
            longestHeight = height ;
            index = i ;
        }
    }
    return index ;
}

// 所有单元格的布局方法,实际上就是求所有单元格的frame
- (void)customLayoutItem
{
    // 为所有列赋初始长度(内边距的top值)
    for (int i = 0; i *)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) ;
}