我们经常见到一些类似于照片墙的东西,其实它是通过自定义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) ;
}
