瀑布流

作者: ly渐行渐远 | 来源:发表于2015-12-23 10:27 被阅读67次

    CustomWaterFallLayout.h

    #import <UIKit/UIKit.h>
    
    @class CustomWaterFallLayout;
    @protocol CustomWaterFallLayoutDelegate <NSObject>
    
    //此方法是为了从viewController中得到相应位置的item,以便布局
    //第一个参数:将当前类对象传递过去,是为了获得当前对象的itemSize属性,进一步得到该item的宽度,根据比例计算高度
    //第二个参数:是为了在viewController根据indexPath得到对应位置的item,然后从相应的数据源中取出对应的数据,以便计算。
    //返回值就是我们想要得到的单元格的size
    - (CGSize)layoutWithCustomLayout: (CustomWaterFallLayout *)layout indexPath: (NSIndexPath *)indexPath;
    
    @end
    
    @interface CustomWaterFallLayout : UICollectionViewLayout
    
    //得到item的大小
    @property (nonatomic,assign) CGSize itemSize;
    
    //行间距
    @property (nonatomic,assign) float lineSpace;
    
    //列间距
    @property (nonatomic,assign) float columnSpace;
    
    //共多少列
    @property (nonatomic,assign) int numberColumn;
    
    //内边距
    @property (nonatomic,assign) UIEdgeInsets sectionInsets;
    
    @property (nonatomic,assign) id<CustomWaterFallLayoutDelegate> delegate;
    
    @end
    

    CustomWaterFallLayout.m

    #import "CustomWaterFallLayout.h"
    
    @interface CustomWaterFallLayout ()
    
    @property (nonatomic,retain) NSMutableArray *attributesArray;//保存所有的单元格属性模型,属性模型里面包含单元格的frame值
    @property (nonatomic,retain) NSMutableArray *columnLengthArray;//保存所有列的长度,用来比较以便找出最短列来布局新的单元格。
    - (NSInteger)shortColumnIndex;//得到最短列的下标,来确定最短列是那一列,根据列数来计算item的x坐标的位置,根据最短列的列数,从上面的数组中可以取出对应的长度,根据长度,就可以确定当前item的y坐标
    - (NSInteger)longColumnIndex;//得到最长列的下标,根据下标从上面的数组中取出最长长度,用来确定collectionView的可滚动区域。
    
    @end
    
    @implementation CustomWaterFallLayout
    
    - (NSMutableArray *)attributesArray
    {
        if (!_attributesArray) {
            _attributesArray = [[NSMutableArray alloc] init];
        }
        
        return _attributesArray;
    }
    
    - (NSMutableArray *)columnLenthArray
    {
        if (!_columnLengthArray) {
            _columnLengthArray = [[NSMutableArray alloc] init];
        }
        
        return _columnLengthArray;
    }
    
    
    - (NSInteger)shortColumnIndex{
        int index = 0;      //存储最短列下标
        float shortLength = MAXFLOAT;       //用来存储最短列长度
        for (int i = 0; i < self.columnLengthArray.count; i++) {
            float length = [[self.columnLengthArray objectAtIndex:i] floatValue];
            if (length < shortLength) {
                shortLength = length;
                index = i;
            }
        }
        return index;
    }
    
    - (NSInteger)longColumnIndex
    {
        int index = 0;//存储最长列下标
        float longLength = 0;//用来存储最长列的长度
        for (int i = 0; i < self.columnLengthArray.count; i++) {
            float length = [self.columnLengthArray[i] floatValue];
            if (length > longLength) {
                longLength = length;
                index = i;
            }
        }
        
        return index;
    }
    
    //所有单元格的布局方法,实际上就是确定所有单元格的frame
    -(void)customLayoutItem{
        //为所有列赋值初始长度,实际上就是内边距的top
        for (int i = 0; i < self.numberColumn; i++) {
            
    //        [self.columnLenthArray addObject:[NSNumber numberWithFloat:self.sectionInsets.top]];
            
            self.columnLenthArray[i] = @(self.sectionInsets.top);
        }
        //为了给所有的item布局,我们得得到item的总个数
        NSInteger allItems = [self.collectionView numberOfItemsInSection:0];
        //    遍历所有的单元格,为他计算ftame
        for (int i = 0; i<allItems; i++) {
            //计算item的X值
            //得到当前item所在的列
            NSInteger shortIndex = self.shortColumnIndex;
            //根据列计算X值
            float x = self.sectionInsets.left + (self.itemSize.width+self.columnSpace)*shortIndex;
            //算item的Y值
            //最短列的长度加上行间距
            float y = [self.columnLenthArray[shortIndex] floatValue]+ self.lineSpace;
            //得到该item的宽高
            //需要一个indexPath来确定是要那个item的宽高
            NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
            CGSize size = [self.delegate layoutWithCustomLayout:self indexPath:indexPath];
            //声明一个属性模型,来承载对应item的frame
            UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
            attributes.frame = CGRectMake(x, y, size.width, size.height);
            [self.attributesArray addObject:attributes];
            //每次增加一个item,当前列的长度肯定会发生变化,所以我们要更新数组中当前列的长度,以便下次找最短列使用。
            self.columnLenthArray[shortIndex] = @(y + size.height);
        }
    }
    
    //开始布局时所调用的系统方法
    - (void)prepareLayout
    {
        [super prepareLayout];
        
        //在开始布局时使用我们的布局方法
        [self customLayoutItem];
    }
    
    //为当前区域保存所有的属性模型
    - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
    {
        return self.attributesArray;
    }
    
    ////返回每个item的属性模型
    - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        return self.attributesArray[indexPath.item];
    }
    
    
    //collectionView的可滚动区域
    - (CGSize)collectionViewContentSize
    {
        CGSize contentSize = self.collectionView.frame.size;
        //得到可滚动高度
        float height = [[self.columnLengthArray objectAtIndex:self.longColumnIndex] floatValue];
        contentSize.height = height;
        return contentSize;
    }
    
    @end
    

    相关文章

      网友评论

          本文标题:瀑布流

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