現(xiàn)在很多應用會用到瀑布流的效果,今天試著擼了一下,感覺還可以,下面是效果圖:
屏幕快照 2016-08-26 14.30.11.png
我在實現(xiàn)這個瀑布流的時候,做到了類的完全解耦,只暴露了一些基本的設置給控制器,如列數(shù),內(nèi)邊距,及cell之間的間距等,所以完全可以做到將這個布局類應用到所有項目中
下面介紹實現(xiàn)步驟:
首先我們采用的是UICollecionView,布局采用UICollectionViewLayout.
我在寫布局的時候 ,不管三七二十一先把這五個方法擼上,這是最重要的方法,也是基本的方法.
/**
* 只要顯示的邊界發(fā)生改變就重新布局:內(nèi)部會重新調(diào)用prepareLayout,layoutAttributesForElementsInRect方法獲得所有cell的布局屬性
*
*/
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
/**
* 一些初始化工作最好在這里實現(xiàn)
*/
-(void)prepareLayout
{
[super prepareLayout];
}
//相當于ScrollView的contentSize
-(CGSize)collectionViewContentSize
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
我們要想實現(xiàn)瀑布流,酒席需明確知道服務器返回的圖片的尺寸,如果沒有,那么兄弟記得跟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;
下面是具體實現(xiàn),廢話不多說,直接上代碼
-(void)prepareLayout
{
NSLog(@"prepareLayout");
[super prepareLayout];
//1.清空最大Y值,全部變?yōu)?
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
控制器實現(xiàn)方法:
#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;
}
