专栏首页ShaoYLiOS---UICollectionView自定义流布局实现瀑布流效果

iOS---UICollectionView自定义流布局实现瀑布流效果

自定义布局,实现瀑布流效果

自定义流水布局,继承UICollectionViewLayout

实现一下方法

// 每次布局之前的准备
- (void)prepareLayout;

// 返回所有的尺寸
- (CGSize)collectionViewContentSize;

// 返回indexPath这个位置Item的布局属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath

// 返回rect范围内的布局属性
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;

思路:默认有三列,添加图片时,往三列中最大长度最小的那一列添加,

  • 主要工作就在计算最大Y值,然后布局图片
    • 用一个字典用来存储每一列最大的Y值(每一列的高度)

遍历字典找出最短的那一列

 // 找出最短的那一列
    [self.maxYDict enumerateKeysAndObjectsUsingBlock:^(NSString *column, NSNumber *maxY, BOOL *stop) {
        if ([maxY floatValue] < [self.maxYDict[minColumn] floatValue]) {
            minColumn = column;
        }
    }];

服务端返回的数据,必须包含图片的高度和宽度,以此可以根据宽高比布局,根据宽度可以通过代理计算高度。

示例代码
YLCollectionLayout.h
//
//  YLCollectionLayout.h
//  Created by 邵银岭.
//

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

@protocol YLCollectionLayoutDelegate <NSObject>

- (CGFloat)flowLayout:(YLCollectionLayout *)flowLayout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath;

@end

@interface YLCollectionLayout : UICollectionViewLayout

/** 列间距 */
@property(nonatomic,assign)CGFloat columnMargin;
/** 行间距 */
@property(nonatomic,assign)CGFloat rowMargin;
/** 列数 */
@property(nonatomic,assign)int columnsCount;
/** 外边距 */
@property (nonatomic, assign) UIEdgeInsets sectionInset;
@property (nonatomic, weak) id<YLCollectionLayoutDelegate> delegate;
@end
YLCollectionLayout.m
//
//  YLCollectionLayout.m
//  Created by 邵银岭
//

#import "YLCollectionLayout.h"

@interface YLCollectionLayout()

/** 这个字典用来存储每一列最大的Y值(每一列的高度) */
@property (nonatomic, strong) NSMutableDictionary *maxYDict;
/** 存放所有的布局属性 */
@property(nonatomic,strong)NSMutableArray *attributeArray;
@end
@implementation YLCollectionLayout

- (NSMutableDictionary *)maxYDict
{
    if (!_maxYDict) {

        self.maxYDict = [[NSMutableDictionary alloc] init];
    }
    return _maxYDict;
}

- (NSMutableArray *)attributeArray
{
    if (!_attributeArray) {
        self.attributeArray = [[NSMutableArray alloc] init];
    }
    return _attributeArray;
}

#pragma mark -初始化默认值
- (instancetype)init
{
    if (self = [super init]) {
        self.columnMargin = 15;
        self.rowMargin = 10;
        self.columnsCount = 3;
        self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    }
    return self;
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

// 布局每一个indexPath的位置
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 1.计算尺寸
    CGFloat width = (self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right - (self.columnsCount - 1) * self.columnMargin) / self.columnsCount;
    // 代理计算传入高的值
    CGFloat height = [self.delegate flowLayout:self heightForWidth:width atIndexPath:indexPath];

    // 2.0假设最短的那一列的第0列
    __block NSString *minColumn = @"0";
    // 遍历字典找出最短的那一列
    [self.maxYDict enumerateKeysAndObjectsUsingBlock:^(NSString *column, NSNumber *maxY, BOOL *stop) {
        if ([maxY floatValue] < [self.maxYDict[minColumn] floatValue]) {
            minColumn = column;
        }
    }];

    // 2.1计算位置
    CGFloat x = self.sectionInset.left + (self.columnMargin + width) * [minColumn intValue];
    CGFloat y = [self.maxYDict[minColumn] floatValue]+ _rowMargin;

    self.maxYDict[minColumn] = @(y + height);
    // 3.创建属性
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attrs.frame = CGRectMake(x, y, width, height);
    return attrs;
}

- (void)prepareLayout
{
    [super prepareLayout];
    // 1.清空最大的Y值
    for (int i = 0; i<self.columnsCount; i++) {
        NSString *column = [NSString stringWithFormat:@"%d", i];
        self.maxYDict[column] = @(self.sectionInset.top);
    }
    [self.attributeArray removeAllObjects];

    // 总 item 数
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (int i = 0; i <count; i++) {
        UICollectionViewLayoutAttributes *attris = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForRow:i inSection:0]];
        [self.attributeArray addObject:attris];
    }

}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{

    return self.attributeArray;
}

// 计算ContentSize
- (CGSize)collectionViewContentSize
{
    // 默认最大Y值在第0列
    __block NSString *maxColumn = @"0";
    [self.maxYDict enumerateKeysAndObjectsUsingBlock:^(NSString *column, NSNumber *maxY, BOOL *stop) {
        if ([maxY floatValue] > [self.maxYDict[maxColumn] floatValue]) {
            maxColumn = column;
        }
    }];
    return CGSizeMake(0, [self.maxYDict[maxColumn] floatValue] + self.sectionInset.bottom);

}
@end

效果

另一个案例--图片查看器---链接

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iOS循环引用

    用户1941540
  • UI动画效果

    用户1941540
  • iOS---小经验分享

    用户1941540
  • Python|Huffman编码的python代码实现

    Huffman编码是依靠Huffman树来实现的,Huffman树是带全路径长度最小的二叉树。

    算法与编程之美
  • 项目演练 | Python制作一个圣诞抽奖程序,原来如此简单

    下周我们公司的圣诞 Party 活动安排有抽奖环节,由于不方便采用手机抽奖,且目前选用的电脑端在线抽奖会出现卡顿情况,最近我就尝试着用 Python 实现抽奖功...

    龙哥
  • Scrapy爬取知乎------获取用户主页信息

    新建一个scrapy项目,scrapy startproject zhihuspider

    andrew_a
  • MicroPython开发实例之自制小型家庭气象站

    众所周知,iPhone6/6Plus内置气压传感器,不过大家对于气压传感器还是很陌生。跟字面的意思一样,气压传感器就是用来测量气压的,但测量气压对于普通的手机用...

    周俊辉
  • python TCP包注入方式

    以上这篇python TCP包注入方式就是小编分享给大家的全部内容了,希望能给大家一个参考。

    砸漏
  • 从0到1使用python开发一个半自动答题小程序的实现

    最近每天都有玩微信读书上面的每日一答的答题游戏,完全答对12题后,可以瓜分无限阅读卡。但是从小就不太爱看书的我,很难连续答对12道题,由此,产生了写一个半自动答...

    砸漏
  • Python PyQt5模块实现窗口GUI界面代码实例

    PyQt5是基于Digia公司强大的图形程式框架Qt5的python接口,由一组python模块构成。PyQt5本身拥有超过620个类和6000函数及方法。在可...

    砸漏

扫码关注云+社区

领取腾讯云代金券