专栏首页coding...Objectiv-c - UICollectionViewLayout自定义布局-瀑布流Demo地址

Objectiv-c - UICollectionViewLayout自定义布局-瀑布流Demo地址

写在前面 弄了下个人站...防止内容再次被锁定...所有东西都在这里面 welcome~ 个人博客

最近刚写的一个简单的瀑布流. 整体思路可能不是很完善. 不过也算是实现效果了. 高手勿喷

瀑布流.gif

思路: 自定义UICollectionViewLayout实际上就是需要返回每个item的fram就可以了. 先说简单的,width值 = (CollectionView的整体宽度 - 左右边距 - 每列的间距 )/列数 height = 按照原图比例缩放就行 x 需要定位 在哪一列上 = 左边距 + (列间距 + width) * 最小列的列号 y 永远是在列高最小的那列下添加 = 最小列高 + 行间距 最小列高的计算需要 将每一列的列高算出来 比较下,最小列高的值是不断被替代.初始化应当就是上边距的值. 由于需要计算出最小列高于是我定义一个字典. { key0:columnHeight0, key1: columnHeight0 ... } 字典元素的个数由 column来决定. 每列存放的是当前列的列高. 通过比较columnHeight中最小的来获得最小 key ,每次更新这个最小key对应的columnHeight就行了

  • 下面看代码:

公开变量以及代理. 公开的变量是可以进行调用时设置,一般就为这些,delegate用来实现动态的高度设置

//
//  WaterFallLayout.h
//  作业3
//
//  Created by gongwenkai on 2016/12/7.
//  Copyright © 2016年 gongwenkai. All rights reserved.
//

#import <UIKit>

@protocol  WaterFallLayoutDelegate<NSObject>

///设置图片高度
//width为cell实际宽度
- (CGFloat) collectionViewHeightAtIndexPath:(NSIndexPath *)indexPath withItemWidth:(CGFloat)width;

@end

@interface WaterFallLayout : UICollectionViewLayout

@property(nonatomic,assign)int column; //设置列数
@property(nonatomic,assign)int rowMargin; //设置行间距
@property(nonatomic,assign)int columnMargin;//设置列间距
@property(nonatomic,assign)UIEdgeInsets edge;//设置边距
@property(nonatomic,strong)id<WaterFallLayoutDelegate>delegate;
@end

由于我们的自定义布局继承UICollectionViewLayout. 每次布局都会调用 //准备布局做一些准备工作,例如初始化

- (void)prepareLayout; 
//这个方法在prepareLayout后调用.每次拖动都会调用,有点类似scrollview的那个.
//这里需要返回一个UICollectionViewLayoutAttributes数组里面就能存放fram信息
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect ;

先做准备工作:初始化字典

- (void)prepareLayout {
    [super prepareLayout];
    
//    NSLog(@"prepareLayout");
    
    //初始化字典
    for (int i = 0; i < _column; i++) {
        [self.maxYDict setObject:[NSNumber numberWithFloat:self.edge.top] forKey:[NSString stringWithFormat:@"%d",i]];
    }
    self.minKey = @"0";
    
    
    NSMutableArray *array = [NSMutableArray array];
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (int i = 0; i<count xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed> height) {
            minY = height;
            self.minKey = [NSString stringWithFormat:@"%d",i];
            columnHeight = minY + heightAtt;

        } else {
            columnHeight = height;
            
            [self.maxYDict setObject:[NSNumber numberWithFloat:columnHeight] forKey:[NSString stringWithFormat:@"%d",i]];

        }
        
    }
    
    //设置X,Y坐标
    CGFloat x = self.edge.left + [self.minKey floatValue] * (width + self.columnMargin);
    CGFloat y = [[self.maxYDict objectForKey:self.minKey] floatValue] ;
    
    //更新最小列的高度
    [self.maxYDict setObject:[NSNumber numberWithFloat:y+heightAtt] forKey:self.minKey];
    
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attrs.frame = CGRectMake(x, y, width, heightAtt);

    return attrs;
}

计算完了就可以让layoutAttributesForElementsInRect设置回布局了

- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
//    NSLog(@"layoutAttributesForElementsInRect");
   
    return self.attrsArray;
}

最后我们需要重写一下内容的范围,高为最大的列高

/*
 重写 设置collectionViewContentSize
 */
- (CGSize)collectionViewContentSize {
    
    //最高列关键字
    int columnHeight = 0;
    //默认取第一个元素
    float maxY = [[self.maxYDict objectForKey:@"0"] floatValue];
    //找到字典中最大的数
    for (int i = 0; i < self.maxYDict.allKeys.count; i++) {
        float height = [[self.maxYDict objectForKey:[NSString stringWithFormat:@"%d",i]] floatValue];
        if (maxY < height) {
            //保持maxY最小
            maxY = height;
            //记录key
            columnHeight = i;
        }
    }
    
    //读取最高列
    CGFloat maxHeight = [[self.maxYDict objectForKey:[NSString stringWithFormat:@"%d",columnHeight]] floatValue];
    
    return CGSizeMake(0, maxHeight + self.edge.bottom);
}

大功告成。

Demo地址

https://github.com/gongxiaokai/WaterFallLayoutDemo

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    gwk_iOS
  • Objective-C AVPlayer播放视频的使用与封装大致效果界面搭建Demo地址

    看下成员变量就知道我怎么搭建的了,这里我将video播放层的size作为参照量,对所有控件的size按照其video的size宽高进行比例缩放

    gwk_iOS
  • iOS开发实战-时光记账Demo 本地数据库版效果分析Demo地址

    由于主页只是一个展示的时光轴界面,UIScrollView加几个按钮就能完成,需要读取数据库内容,所以我们先把内页-增加账单 完成。

    gwk_iOS
  • CNN预测股票走势基于Tensorflow(思路+程序)

    前言 我们希望找出跟随价格上涨的模式。通过每日收盘价,MA,KD,RSI,yearAvgPrice 本次推文研究只是展示深入学习的一个例子。 结果估计不是很好。...

    量化投资与机器学习微信公众号
  • python pyqt5 QFileDialog 常用

    getOpenFileName() getSaveFileName() setFileMode() setFilter()

    用户5760343
  • 我的小工具,用C和python实现远程读卡器,远程读写消费卡片

    这个远程读卡器就是一普通usb口或串口的读卡器,只不过配合一个电脑软件作为tcp服务器。这样,程序员可以在公司电脑上运行程序连到服务器上。服务器端操作控制现场...

    特立独行的猫a
  • Pytorch实现卷积神经网络训练量化(QAT)

    深度学习在移动端的应用越来越广泛,而移动端相对于GPU服务来讲算力较低并且存储空间也相对较小。基于这一点我们需要为移动端定制一些深度学习网络来满足我们的日常续需...

    BBuf
  • 10.带人机对战的五子棋程序

    今天我们带来一个带人机对战功能的五子棋程序。程序基于前面文章中的框架搭建,新增人机对战的策略。程序基于规则进行决策,不考虑禁手,玩家执黑子先行。棋盘规模采用15...

    用户4381798
  • 6.wxPython防止窗体重画棋子消失的机制

    可以画图的类中wx.ClientDC不必依赖窗体绘画事件,可以随时实例化,随时画图。但是窗体最小化之后再恢复,重画的窗体上通过wx.ClientDC绘制的棋子会...

    用户4381798
  • 手把手教你用Python开发“剪刀石头布”小游戏【附源码】

    最近在学习PyQt5可视化界面,这是一个内容非常丰富的gui库,相对于tkinter库,功能更加强大,界面更加美观,操作也不难。于是我开始小试牛刀,用PyQt...

    python学习教程

扫码关注云+社区

领取腾讯云代金券