iOS瀑布流

瀑布流Demo


瀑布流截图.gif

使用UICollectionView实现瀑布流

自定义UICollectionViewLayout中的主要代码:

YJWaterFlowLayout.h中代码:

#import <UIKit/UIKit.h>
@class YJWaterFlowLayout;

@protocol YJWaterFlowLayoutDelegate <NSObject>
@required
-(CGFloat)waterFlowLayout:(YJWaterFlowLayout *)waterFlowLayout heightForItemAtIndexPath:(NSUInteger)index itemWidth:(CGFloat)itemWidth;

@optional
/** 列数*/
-(CGFloat)columnCountInWaterFlowLayout:(YJWaterFlowLayout *)waterFlowLayout;
/** 列间距*/
-(CGFloat)columnMarginInWaterFlowLayout:(YJWaterFlowLayout *)waterFlowLayout;
/** 行间距*/
-(CGFloat)rowMarginInWaterFlowLayout:(YJWaterFlowLayout *)waterFlowLayout;
/** 边缘之间的间距*/
-(UIEdgeInsets)edgeInsetInWaterFlowLayout:(YJWaterFlowLayout *)waterFlowLayout;

@end

@interface YJWaterFlowLayout : UICollectionViewLayout

/** delegate*/
@property (nonatomic, weak) id<YJWaterFlowLayoutDelegate> delegate;

@end

YJWaterFlowLayout.m文件代码:

#import "YJWaterFlowLayout.h"
/** 默认的列数*/
static const NSInteger YJDefaultColumeCount = 3;
/** 每一列之间的间距*/
static const NSInteger YJDefaultColumeMargin = 10;
/** 每一行之间的间距*/
static const CGFloat YJDefaultRowMargin = 10;
/** 边缘之间的间距*/
static const UIEdgeInsets YJDefaultEdgeInset = {10, 10, 10, 10};

@interface YJWaterFlowLayout ()
/** 存放所有cell的布局属性*/
@property (strong, nonatomic) NSMutableArray *attrsArray;
/** 存放每一列的最大y值*/
@property (nonatomic, strong) NSMutableArray *columnHeights;
/** 每一行之间的间距*/
-(CGFloat)rowMargin;
/** 每一列之间的间距*/
-(CGFloat)columnMargin;
/** 列数*/
-(NSInteger)columnCount;
/** 边缘之间的间距*/
-(UIEdgeInsets)edgeInsets;

/** 内容的高度*/
@property (nonatomic, assign) CGFloat maxColumnHeight;

@end

@implementation YJWaterFlowLayout

#pragma mark 代理方法处理
-(CGFloat)rowMargin {
    if ([self.delegate respondsToSelector:@selector(rowMarginInWaterFlowLayout:)]) {
       return [self.delegate rowMarginInWaterFlowLayout:self];
    } else {
        return YJDefaultRowMargin;
    }
}

-(CGFloat)columnMargin {
    if ([self.delegate respondsToSelector:@selector(columnMarginInWaterFlowLayout:)]) {
        return [self.delegate columnMarginInWaterFlowLayout:self];
    } else {
        return YJDefaultColumeMargin;
    }
}

-(NSInteger)columnCount {
    if ([self.delegate respondsToSelector:@selector(columnCountInWaterFlowLayout:)]) {
        return [self.delegate columnCountInWaterFlowLayout:self];
    } else {
        return YJDefaultColumeCount;
    }
}

-(UIEdgeInsets)edgeInsets {
    if ([self.delegate respondsToSelector:@selector(edgeInsetInWaterFlowLayout:)]) {
        return [self.delegate edgeInsetInWaterFlowLayout:self];
    } else {
        return YJDefaultEdgeInset;
    }
}

#pragma mark - 懒加载
- (NSMutableArray *)columnHeights {
    if (!_columnHeights) {
        _columnHeights = [NSMutableArray array];
    }
    return _columnHeights;
}

-(NSMutableArray *)attrsArray {
    if (_attrsArray == nil) {
        _attrsArray = [NSMutableArray array];
    }
    return _attrsArray;
}

/** 初始化*/
-(void)prepareLayout {
    [super prepareLayout];
    
    //清除以前计算的所有高度
    self.maxColumnHeight = 0;
    [self.columnHeights removeAllObjects];
    for (NSInteger i = 0; i < self.columnCount; i++) {
        [self.columnHeights addObject:@(self.edgeInsets.top)];
    }
    
    //清除之前数组
    [self.attrsArray removeAllObjects];
    
    //开始创建每一个cell
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (NSInteger i = 0; i < count; i++) {
        //创建位置
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        //获取indexPath位置cell对应的成员属性
        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
        [self.attrsArray addObject:attrs];
    }
}

/** 决定cell的排布*/
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    return self.attrsArray;
}

/** 返回indexPath位置cell对应的布局属性*/
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    //设置布局属性
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes  layoutAttributesForCellWithIndexPath:indexPath];
    //collectionView的宽度
    CGFloat collectionW = self.collectionView.frame.size.width;
    //设置布局属性的frame
    CGFloat w = (collectionW - self.edgeInsets.left - self.edgeInsets.right - (self.columnCount - 1) * self.columnMargin) / self.columnCount;
    CGFloat h = [self.delegate waterFlowLayout:self heightForItemAtIndexPath:indexPath.item itemWidth:w];
    
    //找出高度最短的那一列
    NSInteger destColumn = 0;
    CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
    for (NSInteger i = 1; i < self.columnCount; i++) {
        //取出第i列
        CGFloat columnHeight = [self.columnHeights[i] doubleValue];
        if (minColumnHeight > columnHeight) {
            minColumnHeight = columnHeight;
            destColumn = i;
        }
    }
    
    CGFloat x = self.edgeInsets.left + destColumn * (w + self.rowMargin);
    CGFloat y = minColumnHeight;
    if (y != self.edgeInsets.top) {
        if ([self.delegate respondsToSelector:@selector(rowMarginInWaterFlowLayout:)]) {
            y += [self.delegate rowMarginInWaterFlowLayout:self];
        } else {
            y += self.rowMargin;
        }
    }
    
    attrs.frame = CGRectMake(x, y, w, h);
    //更新最短那列的高度
    self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));
    //记录内容的高度
    CGFloat columnHeight = [self.columnHeights[destColumn] doubleValue];
    if (self.maxColumnHeight < columnHeight) {
        self.maxColumnHeight = columnHeight;
    }
    
    return attrs;
}


-(CGSize)collectionViewContentSize {
    return CGSizeMake(0, self.maxColumnHeight + self.edgeInsets.bottom);
}

@end

瀑布流Demo地址

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏谈补锅

Quartz2D复习(四) --- 图层CALayer和动画CAAnimation

1)、在ios中,能看得见摸得着的东西基本上都是UIView, 比如按钮、文本标签、文本输入框、图标等,这些都是UIView

963
来自专栏谈补锅

记录下UIButton的图文妙用和子控件的优先显示

  UIButton的用处特别多,这里只记录下把按钮应用在图文显示的场景,和需要把图片作为按钮的背景图片显示场景;

893
来自专栏iOS开发攻城狮的集散地

iOS小结

2066
来自专栏我和未来有约会

为UINavigationBar添加自定义背景

@implementation UINavigationBar (UINavigationBarCategory) - (void)drawRect:(CGRe...

1979
来自专栏進无尽的文章

实践-小效果 Ⅳ

设置一个UIImageView为倒立的同等控件,设置这个UIImageView的layer的mask为一个渐变图层,效果就出来了。

1262
来自专栏vue学习

偏移量、客户区大小、视口大小、滚动大小、确定元素大小

1、偏移量 先讲几个偏移量属性: offsetHeight:元素在垂直方向上占用的空间大小;相当于border-top+padding-top+height...

1402
来自专栏coding...

Objective-C 自定义UISlider滑杆 分段样式效果需求分析代码部分DEMO地址

查看UISlider控件发现这个类是继承自UIControl,那么就自定义一个UIControl来实现UISlider没有的效果。 公开的变量中都是一些通用的...

2053
来自专栏一“技”之长

带动画渐进效果与颜色渐变的圆弧进度控件设计 原

     今天帮朋友写了一个小巧的圆弧进度控件,控件十分简单,主要设计思路采用CAShapeLayer来创建控件圆弧形状,使用CAGradientLayer来进...

1412
来自专栏Alice

上边半透明的效果并且显示的是上一页的内容

项目介绍:首先上边显示的是透明的视图,透明度为0.8 这是一个vc 设置vc的view的背景颜色为clearcolor  上边是一个按钮,设置按钮的透明度为0....

2005
来自专栏狂码一生

js 获取屏幕各种宽高的方法(浏览器兼容)

屏幕的有效宽高: window.screen.availHeight window.screen.availWidth 网页可见区域宽:document.bod...

51910

扫码关注云+社区

领取腾讯云代金券