美文网首页ios学习之路iOS学习开发
Objectiv-c - UICollectionViewLay

Objectiv-c - UICollectionViewLay

作者: gwk_iOS | 来源:发表于2016-12-15 00:47 被阅读100次

    写在前面
    弄了下个人站...防止内容再次被锁定...所有东西都在这里面
    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

    相关文章

      网友评论

        本文标题:Objectiv-c - UICollectionViewLay

        本文链接:https://www.haomeiwen.com/subject/xmuwmttx.html