通过自定义UICollectionViewLayout实现瀑布流布局。
首先看一下效果图:
下面贴上代码:
ViewController:
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@end
/*** ---------------分割线--------------- ***/
#import "ViewController.h"
#import "HWWaterFallLayout.h"
@interface ViewController ()<UICollectionViewDataSource>
@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) NSArray *array;
@end
@implementation ViewController
static NSString *const reuseIdentifier = @"waterfall";
- (void)viewDidLoad {
[super viewDidLoad];
//获取数据
[self getInfo];
}
- (void)getInfo
{
self.array = @[@"1.jpg", @"2.jpg", @"3.jpg", @"4.jpg", @"5.jpg", @"6.jpg", @"7.jpg", @"1.jpg", @"2.jpg", @"3.jpg", @"4.jpg", @"5.jpg", @"6.jpg", @"7.jpg", @"1.jpg", @"2.jpg", @"3.jpg", @"4.jpg", @"5.jpg", @"6.jpg", @"7.jpg", @"1.jpg", @"2.jpg", @"3.jpg", @"4.jpg", @"5.jpg", @"6.jpg", @"7.jpg"];
//创建控件
[self creatControl];
}
- (void)creatControl
{
//创建瀑布流布局
HWWaterFallLayout *waterfall = [HWWaterFallLayout waterFallLayoutWithColumnCount:3];
waterfall.rowSpacing = 10;
waterfall.columnSpacing = 10;
waterfall.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
[waterfall setItemHeightBlock:^CGFloat(CGFloat itemWidth, NSIndexPath *indexPath) {
//根据图片的原始尺寸,及显示宽度,等比例缩放来计算显示高度
UIImage *image = [UIImage imageNamed:_array[indexPath.item]];
return image.size.height / image.size.width * itemWidth;
}];
//创建collectionView
_collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:waterfall];
_collectionView.backgroundColor = [UIColor whiteColor];
_collectionView.dataSource = self;
[self.view addSubview: _collectionView];
//注册标识
[ _collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier];
}
#pragma mark - UICollectionViewDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return _array.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:_array[indexPath.item]]];
return cell;
}
@end
HWWaterFallLayout:
#import <UIKit/UIKit.h>
@interface HWWaterFallLayout : UICollectionViewLayout
@property (nonatomic, assign) NSInteger columnCount;
@property (nonatomic, assign) NSInteger columnSpacing;
@property (nonatomic, assign) NSInteger rowSpacing;
@property (nonatomic, assign) UIEdgeInsets sectionInset;
@property (nonatomic, copy) CGFloat(^itemHeightBlock)(CGFloat itemHeight, NSIndexPath *indexPath);
+ (instancetype)waterFallLayoutWithColumnCount:(NSInteger)columnCount;
@end
/*** ---------------分割线--------------- ***/
#import "HWWaterFallLayout.h"
@interface HWWaterFallLayout ()
@property (nonatomic, strong) NSMutableDictionary *maxYDic;
@property (nonatomic, strong) NSMutableArray *attributesArray;
@end
@implementation HWWaterFallLayout
//懒加载
- (NSMutableDictionary *)maxYDic
{
if (!_maxYDic) {
_maxYDic = [NSMutableDictionary dictionary];
}
return _maxYDic;
}
- (NSMutableArray *)attributesArray
{
if (!_attributesArray) {
_attributesArray = [NSMutableArray array];
}
return _attributesArray;
}
//初始化类方法
+ (instancetype)waterFallLayoutWithColumnCount:(NSInteger)columnCount
{
return [[self alloc] initWithColumnCount:columnCount];
}
//私有init方法
- (instancetype)initWithColumnCount:(NSInteger)columnCount
{
if (self = [super init]) {
self.columnCount = columnCount;
}
return self;
}
- (void)prepareLayout
{
[super prepareLayout];
//初始化字典,有几列就有几个键值对,key为列,value为列的最大y值,初始值为上内边距
for (int i = 0; i < self.columnCount; i++) {
self.maxYDic[@(i)] = @(self.sectionInset.top);
}
//清空attributes数组
[self.attributesArray removeAllObjects];
//根据collectionView获取总共有多少个item
NSInteger itemCount = [self.collectionView numberOfItemsInSection:0];
//为每一个item创建一个attributes并存入数组
for (int i = 0; i < itemCount; i++) {
UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
[self.attributesArray addObject:attributes];
}
}
//计算collectionView的contentSize
- (CGSize)collectionViewContentSize
{
__block NSNumber *maxIndex = @0;
//遍历字典,找出最长的那一列
[self.maxYDic enumerateKeysAndObjectsUsingBlock:^(NSNumber *key, NSNumber *obj, BOOL *stop) {
if ([self.maxYDic[maxIndex] floatValue] < obj.floatValue) {
maxIndex = key;
}
}];
//collectionView的contentSize.height就等于最长列的最大y值+下内边距
return CGSizeMake(0, [self.maxYDic[maxIndex] floatValue] + self.sectionInset.bottom);
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
//根据indexPath获取item的attributes
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//获取collectionView的宽度
CGFloat collectionViewWidth = self.collectionView.frame.size.width;
//item的宽度 = (collectionView的宽度 - 内边距与列间距) / 列数
CGFloat itemWidth = (collectionViewWidth - self.sectionInset.left - self.sectionInset.right - (self.columnCount - 1) * self.columnSpacing) / self.columnCount;
CGFloat itemHeight = 0;
//获取item的高度,由外界计算得到
if (self.itemHeightBlock) itemHeight = self.itemHeightBlock(itemWidth, indexPath);
//找出最短的那一列
__block NSNumber *minIndex = @0;
[self.maxYDic enumerateKeysAndObjectsUsingBlock:^(NSNumber *key, NSNumber *obj, BOOL *stop) {
if ([self.maxYDic[minIndex] floatValue] > obj.floatValue) {
minIndex = key;
}
}];
//根据最短列的列数计算item的x值
CGFloat itemX = self.sectionInset.left + (self.columnSpacing + itemWidth) * minIndex.integerValue;
//item的y值 = 最短列的最大y值 + 行间距
CGFloat itemY = [self.maxYDic[minIndex] floatValue] + self.rowSpacing;
//设置attributes的frame
attributes.frame = CGRectMake(itemX, itemY, itemWidth, itemHeight);
//更新字典中的最大y值
self.maxYDic[minIndex] = @(CGRectGetMaxY(attributes.frame));
return attributes;
}
//一个cell对应一个UICollectionViewLayoutAttributes对象
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.attributesArray;
}
@end
猜你喜欢:iOS UICollectionView实用练习 —— HERO博客
iOS UICollectionView简介 —— HERO博客