iOS瀑布流布局实现

释放双眼,带上耳机,听听看~!

最近开发中遇到了关于瀑布流布局的需求,所有就整理了一个瀑布流布局类,使用时只需要调整列数、行间距、列间距、上下左右边缘就可以做出各种需求的瀑布流布局,下面直接上代码:

 

自定义瀑布流需要继承UICollectionViewLayout布局类

.h文件

#import <UIKit/UIKit.h>
@interface ZYYWaterLayout :UICollectionViewLayout
@end

.m文件

#import "ZYYWaterLayout.h"
//默认的列数
staticconstCGFloat ZYYCollumCoutnt =3;

//列间距

staticconstCGFloat ZYYCollumMargin =10;

//行间距

staticconstCGFloat ZYYRowMargin =10;

//边缘间距

staticconstUIEdgeInsets ZYYEdgeUnsets = {10,10,10,10};

@interfaceZYYWaterLayout()

//用于存放cell属性的数组

@property (strong,nonatomic)NSMutableArray
*attrsArray;

//用于存放所有列高度数组

@property (strong,nonatomic)NSMutableArray
*maxH;

@end

@implementation ZYYWaterLayout


//懒加载属性数组

- (NSMutableArray *)attrsArray{

    if (_attrsArray ==nil) {

        _attrsArray = [NSMutableArrayarray];

       
    }

    return_attrsArray;

}

//懒加载高度属性数组

- (NSMutableArray *)maxH{

    if (_maxH ==nil) {

        _maxH = [NSMutableArrayarray];

        

    }

    return_maxH;

}

//准备布局每次刷新都会调用此方法

- (void)prepareLayout{

    [superprepareLayout];

   //先清除以前计算的所有高度,这种做法比较严谨,如果有下拉刷新,不及时清空数组的话会造成数据混乱

    [self.maxHremoveAllObjects];


   //这里先将数组里面的初始值设为0

    for (NSInteger i =0; i <
ZYYCollumCoutnt; i ++) {

        [self.maxHaddObject:@0];

    }

     NSLog(@"%s",__func__);

   //清除以前的所有属性

    [self.attrsArrayremoveAllObjects];


   //开始创建每个cell对应的布局属性

    //1、获取collectionView里面的有多少个item

    NSInteger count = [self.collectionViewnumberOfItemsInSection:0];


    //创建多少collectionViewcell属性

    for (NSInteger i=1; i<count; i++) {

        //获取item对应的indexPath

        NSIndexPath *indexPath = [NSIndexPathindexPathForItem:i
inSection:0];


        //创建属性调用下面的layoutAttributesForItemAtIndexPath方法

        UICollectionViewLayoutAttributes *attrs = [selflayoutAttributesForItemAtIndexPath:indexPath];

        //设置cell的属性直接调用layoutAttributesForItemAtIndexPath方法即可

        [self.attrsArrayaddObject:attrs];

    }


}


/**

 * 决定布局的关键所在

 *

 *  @param rect 属性rect

 *

 *  @return 返回属性数组

 */

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

    
    NSLog(@"%s",__func__);


    returnself.attrsArray;

}


/**

 *  返回indexPath位置cell对应的布局属性

 * 这个方法是核心算法

 */

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{

    //创建属性

    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributeslayoutAttributesForCellWithIndexPath:indexPath];

    

    //collectionView的宽度

    CGFloat collectionViewW =self.collectionView.frame.size.width;



    //列号

    NSInteger cloumIndex =0;

   //默认第一行是最小的,这样做的话可以让下面的for循环从i=1开始遍历,这样做可以优化性能

    CGFloat minClumnHeight = [self.maxH[0]doubleValue];

    

    for (NSInteger i =1; i <
ZYYCollumCoutnt; i++) {

        //取出第i列元素的y值

        CGFloat cheight = [self.maxH[i]doubleValue];

        if (minClumnHeight > cheight) {

            minClumnHeight = cheight;

            cloumIndex = i;

        }

    }

    

    //每个item的宽度
== (collectionView的宽度 -左边距
-右边距 -(列数-1)*间距)再除于列数

    CGFloat w = (collectionViewW -ZYYEdgeUnsets.left
-ZYYEdgeUnsets.right - (ZYYCollumCoutnt -1)
* ZYYCollumMargin)/3.0;

    

   //高度这里用的是随机数,做项目时根据的是素材的高度

    CGFloat h =50 +
arc4random_uniform(100);

    

    //x可以根据列来算

    CGFloat x =ZYYEdgeUnsets.left + cloumIndex
* (ZYYRowMargin + w);




    //y最小itme值计算

    CGFloat y = minClumnHeight +ZYYRowMargin;




    //设置布局属性的frame,这个frame是最终item的frame

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




   //更新最短那列的高度

    self.maxH[cloumIndex] =@(CGRectGetMaxY(attrs.frame));

    

    return attrs;

}




//尺寸

- (CGSize)collectionViewContentSize{

    

   //找出y值最大的的那一列,和上面找出最小高度相似

    CGFloat maxColunmHeight = [self.maxH[0]doubleValue];

    for (NSInteger i =1; i <
ZYYCollumCoutnt; i++) {

        CGFloat my = [self.maxH[i]doubleValue];

        if (maxColunmHeight < my) {

            maxColunmHeight = my;

        }

    }

    
    returnCGSizeMake(0, maxColunmHeight +ZYYEdgeUnsets.bottom);

}

 

 

结语:上面的注释比较清楚,用的时候直接将代码复制粘贴就可以使用了

 

@end

 

人已赞赏
iOS文章

iOS 设置圆角阴影,避免离屏渲染

2020-2-21 19:11:32

iOS文章

iOS UITableView简介

2020-2-21 19:50:26

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索