现在很多应用会用到瀑布流的效果,今天试着撸了一下,感觉还可以,下面是效果图:
屏幕快照 2016-08-26 14.30.11.png
我在实现这个瀑布流的时候,做到了类的完全解耦,只暴露了一些基本的设置给控制器,如列数,内边距,及cell之间的间距等,所以完全可以做到将这个布局类应用到所有项目中
下面介绍实现步骤:
首先我们采用的是UICollecionView,布局采用UICollectionViewLayout.
我在写布局的时候 ,不管三七二十一先把这五个方法撸上,这是最重要的方法,也是基本的方法.
/**
* 只要显示的边界发生改变就重新布局:内部会重新调用prepareLayout,layoutAttributesForElementsInRect方法获得所有cell的布局属性
*
*/
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
/**
* 一些初始化工作最好在这里实现
*/
-(void)prepareLayout
{
[super prepareLayout];
}
//相当于ScrollView的contentSize
-(CGSize)collectionViewContentSize
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
我们要想实现瀑布流,酒席需明确知道服务器返回的图片的尺寸,如果没有,那么兄弟记得跟UI的妹子或者后台搞好关系(⊙o⊙)哦
先在init方法中进行一些初始化设置
-(instancetype)init
{
if (self = [super init]) {
self.columnMargin = 10;
self.rowMargin = 10;
self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
self.columnsCount = 3;
}
return self;
}
因为要记录每一列的Y值,我采用字典的方式
@property (nonatomic,strong) NSMutableDictionary *maxYDict;
下面是具体实现,废话不多说,直接上代码
-(void)prepareLayout
{
NSLog(@"prepareLayout");
[super prepareLayout];
//1.清空最大Y值,全部变为0
for (int i = 0; i < self.columnsCount; i++) {
NSString *column = [NSString stringWithFormat:@"%d",i];
self.maxYDict[column] =@(self.sectionInset.top);
}
//2.计算所有cell的属性
[self.attrsArray removeAllObjects];
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (int i = 0; i < count; i ++) {
[self.attrsArray addObject:[self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]]];
}
}
-(CGSize)collectionViewContentSize
{
__block NSString *maxColumn = @"0";
[self.maxYDict enumerateKeysAndObjectsUsingBlock:^(NSString *column, NSNumber *maxY, BOOL * _Nonnull stop) {
if([maxY floatValue] > [self.maxYDict[maxColumn] floatValue])
{
maxColumn = column;
}
}];
return CGSizeMake(0, [self.maxYDict[maxColumn] floatValue] + self.sectionInset.bottom);
}
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
//NSLog(@"%@",self.maxYDict);
__block NSString *minColumn = @"0";
//找出最短的那一列
[self.maxYDict enumerateKeysAndObjectsUsingBlock:^(NSString *column, NSNumber *maxY, BOOL * _Nonnull stop) {
if([maxY floatValue] < [self.maxYDict[minColumn] floatValue])
{
minColumn = column;
}
}];
CGFloat width = (self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right - (self.columnsCount - 1) * self.columnMargin) / self.columnsCount;
CGFloat height = [self.delegate waterflowLayout:self heightForWidth:width atIndexPath:indexPath];
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
CGFloat x = self.sectionInset.left + (width + self.columnMargin) * [minColumn intValue];
CGFloat y = [self.maxYDict[minColumn] floatValue] + self.rowMargin;
//更新这一列的最大Y值
self.maxYDict[minColumn] = @(y + height);
attrs.frame = CGRectMake(x, y, width, height);
return attrs;
}
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.attrsArray;
}
采用代理方式通知控制器,从而设置图片高度等比例
#import <UIKit/UIKit.h>
@class YJWaterFlowLayout;
@protocol YJWaterflowLayoutDelegate <NSObject>
-(CGFloat)waterflowLayout:(YJWaterFlowLayout *)waterflowLayout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath;
@end
@interface YJWaterFlowLayout : UICollectionViewLayout
@property (nonatomic,assign) UIEdgeInsets sectionInset;
@property (nonatomic,assign) CGFloat columnMargin;
@property (nonatomic,assign) CGFloat rowMargin;
@property (nonatomic,assign) int columnsCount;
@property (nonatomic,weak)id<YJWaterflowLayoutDelegate> delegate;
@end
控制器实现方法:
#pragma mark -<YJWaterflowLayoutDelegate>
-(CGFloat)waterflowLayout:(YJWaterFlowLayout *)waterflowLayout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath
{
HMShop *shop = self.shops[indexPath.item];
return shop.h / shop.w * width;
}
