iOS-瀑布流实现

2018-02-27 11:11:07来源:https://www.jianshu.com/p/fb705d271c30作者:逾期的誓言人点击

分享





屏幕快照 2018-01-15 上午11.40.53.png


思路:
先说一下这个效果的实现思路,首先需要确定该瀑布流有多少列,然后需要确定每个cell 的高度,用一个数组记录下每一列的已添加上去的cell的高度和.然后添加下一个cell的时候找出所有列中高度最小的列,再添加上去.



自定义布局-YJPCollectionLayout

YJPCollectionLayout.h



制定协议



@class YJPCollectionLayout;
@protocol YJPCollectionLayoutDelegate <NSObject>
@required
/**
决定cell的高度,必须实现方法
@param layout 布局类
@param index 第index个Cell
@param width cell 宽度
@return cell 高度
*/
- (CGFloat)collectionLayout: (YJPCollectionLayout *)layout heightForRowAtIndex:(NSInteger)index itemWidth:(CGFloat)width;
@optional
/**
确定有多少列
@param collectionLayout 布局类
@return 列数(默认3列)
*/
- (NSInteger)cloumnCountInCollectionLayout:(YJPCollectionLayout *)collectionLayout;
/**
决定cell 的列的距离
@param collectionLayout 布局类
@return 列的距离(默认10)
*/
- (CGFloat)columMarginInCollectionLayout:(YJPCollectionLayout *)collectionLayout;
/**
决定cell 的行的距离
@param collectionLayout 布局类
@return 行的距离(默认10)
*/
- (CGFloat)rowMarginInCollectionLayout:(YJPCollectionLayout *)collectionLayout;
/**
决定cell 的边缘距
@param collectionLayout 布局类
@return 边距
*/
- (UIEdgeInsets)edgeInsetInCollectionLayout:(YJPCollectionLayout *)collectionLayout;
@end


声明协议,提供方法



@interface YJPCollectionLayout : UICollectionViewFlowLayout
@property (nonatomic,assign) id <YJPCollectionLayoutDelegate>delegate;
@end

YJPCollectionLayout.m



设置默认值



/**  列数*/
static const CGFloat columCount = 3;
/** 每一列间距*/
static const CGFloat columMargin = 10;
/** 每一列间距*/
static const CGFloat rowMargin = 10;
/** 边缘间距*/
static const UIEdgeInsets defaultEdgeInsets = {10,10,10,10};

- (NSInteger)columCount{

if ([self.delegate respondsToSelector:@selector(cloumnCountInWaterFlowLayout:)]) {
return [self.delegate cloumnCountInWaterFlowLayout:self];
}
else{
return columCount;
}
}
- (CGFloat)columMargin{

if ([self.delegate respondsToSelector:@selector(columMarginInWaterFlowLayout:)]) {
return [self.delegate columMarginInWaterFlowLayout:self];
}
else{
return columMargin;
}
}
- (CGFloat)rowMargin{

if ([self.delegate respondsToSelector:@selector(rowMarginInWaterFlowLayout:)]) {
return [self.delegate rowMarginInWaterFlowLayout:self];
}
else{
return rowMargin;
}
}
- (UIEdgeInsets)defaultEdgeInsets{

if ([self.delegate respondsToSelector:@selector(edgeInsetInWaterFlowLayout:)]) {
return [self.delegate edgeInsetInWaterFlowLayout:self];
}
else{
return defaultEdgeInsets;
}
}


声明集合



@interface YJPCollectionLayout ()
/** 布局属性数组*/
@property (nonatomic,strong) NSMutableArray *attrsArray;
/** 存放所有列的当前高度*/
@property (nonatomic,strong) NSMutableArray *columnHeight;
@end

@implementation YJPCollectionLayout
- (NSMutableArray *)attrsArray
{
if (!_attrsArray) {

_attrsArray = [NSMutableArray array];
}
return _attrsArray;
}
- (NSMutableArray *)columnHeight
{
if (!_columnHeight) {

_columnHeight = [NSMutableArray array];
}
return _columnHeight;
}


重写prepareLayout, layoutAttributesForItemAtIndexPath, layoutAttributesForElementsInRect, collectionViewContentSize 方法



/**  初始化*/
- (void)prepareLayout
{
[super prepareLayout];

//如果刷新布局就会重新调用prepareLayout这个方法,所以要先把高度数组清空
[self.columnHeight removeAllObjects];
for (int i = 0; i < self.columCount; i++) {

[self.columnHeight addObject:@(self.defaultEdgeInsets.top)];
}

NSInteger count = [self.collectionView numberOfItemsInSection:0];

[self.attrsArray removeAllObjects];
for (NSInteger i = 0; i < count; i++) {

NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
//获取indexPath 对应cell 的布局属性
UICollectionViewLayoutAttributes *attr = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.attrsArray addObject:attr];
}
}
/**
* 返回indexPath 位置cell对应的布局属性
*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

//使用for循环,找出高度最短的那一列
//最短高度的列
NSInteger destColumn = 0;
CGFloat minColumnHeight = [self.columnHeight[0] doubleValue];

for (NSInteger i = 1; i < self.columCount; i++) {

CGFloat columnHeight =[self.columnHeight[i] doubleValue];
if (minColumnHeight > columnHeight) {

minColumnHeight = columnHeight;
destColumn = I;
}
}

CGFloat w = (self.collectionView.frame.size.width - self.defaultEdgeInsets.left - self.defaultEdgeInsets.right - (self.columCount - 1) * self.columMargin )/self.columCount;

//(使用代理在外部决定cell 的高度,下面会介绍)
CGFloat h = [self.delegate waterFlowLayout:self heightForRowAtIndex:indexPath.item itemWidth:w];

CGFloat x = self.defaultEdgeInsets.left + destColumn*(w + self.columMargin);
CGFloat y = minColumnHeight ;

if (y != self.defaultEdgeInsets.top) {

y += self.rowMargin;
}

attr.frame = CGRectMake(x,y,w,h);

self.columnHeight[destColumn] = @(y+ h);
return attr;
}
/**
* 决定cell 的排布
*/
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.attrsArray;
}

/**
决定collectionView的可滚动范围
*/
- (CGSize)collectionViewContentSize
{

CGFloat maxHeight = [self.columnHeight[0] doubleValue];
for (int i = 1; i < self.columCount; i++) {

CGFloat value = [self.columnHeight[i] doubleValue];
if (maxHeight < value) {

maxHeight = value;
}
}
return CGSizeMake(0, maxHeight+self.defaultEdgeInsets.bottom);
}

走到这一步,你的瀑布流布局以完成


使用
#pragma mark - YJPCollectionLayoutDelegate
- (CGFloat)collectionLayout:(YJPCollectionLayout *)layout heightForRowAtIndex:(NSInteger)index itemWidth:(CGFloat)width
{
return random()%100 + 80;
}
- (CGFloat)columMarginInCollectionLayout:(YJPCollectionLayout *)collectionLayout
{
return 10;
}
- (CGFloat)rowMarginInCollectionLayout:(YJPCollectionLayout *)collectionLayout
{
return 10;
}
- (NSInteger)cloumnCountInCollectionLayout:(YJPCollectionLayout *)collectionLayout
{
return 3;
}
- (void)configCollectionView
{
YJPCollectionLayout *layout = [[YJPCollectionLayout alloc]init];
layout.delegate = self;
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, NavigationHeight, K_Screen.width, K_Screen.height - NavigationHeight) collectionViewLayout:layout];
collectionView.delegate = self;
collectionView.dataSource = self;
collectionView.backgroundColor = [UIColor whiteColor];
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"UICollectionViewCell"];
[self.view addSubview:collectionView];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 50;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"UICollectionViewCell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor randomColor];
return cell;
}
@end







最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台