iOS--瀑布流的实现

最近一直在做项目,没什么时间发博客.现在有空了,整理一下这段时间项目里的一些实用技术.如果有问题欢迎随时找我交流.

iOS瀑布流,实现的是对于不同尺寸控件的合理布局

举个例子:(ONE一个的往期列表)

ONE一个

通过collectionView利用自定义的layout进行布局,cell进行自适应.我个人觉得这个效果特别适合一个这个APP.

下面来看一下具体的代码实现:

首先,看一下数据内容:(这里我找了一个本地的json文件当做数据源)

     {
         "thumbURL":"http://amuse.nen.com.cn/imagelist/11/21/9as70n3ir61b.jpg",
         "width": 482,
         "height": 480
     }

代码内容:

MyLayOut.h

    #import <UIKit/UIKit.h>
    
    @protocol MyLayOutDelegate <NSObject>
    
    /**
     *  获取item的高度
     *
     *  @param indexPath 下标
     *
     *  @return item高度
     */
    - (CGFloat)heightForItemAtIndexPath:(NSIndexPath *)indexPath;
    
    @end
    
    @interface MyLayOut : UICollectionViewLayout
    
    /**
     *  单元格尺寸
     */
    @property (nonatomic, assign) CGSize itemSize;
    
    /**
     *  列数
     */
    @property (nonatomic, assign) NSInteger numberOfColumns;
    
    /**
     *  内边距
     */
    @property (nonatomic, assign) UIEdgeInsets sectionInSet;
    
    /**
     *  item间隔
     */
    @property (nonatomic, assign) CGFloat ItemSpacing;
    
    /**
     *  代理人属性
     */
    @property (nonatomic, assign) id<MyLayOutDelegate>delegate;

    @end

MyLayOut.m

    #import "MyLayOut.h"
    
    @interface MyLayOut ()
    
    /**
     *  列高
     */
    @property (nonatomic, strong) NSMutableArray *columnsHeights;
    
    /**
     *  item的数量
     */
    @property (nonatomic, assign) NSInteger numberOfItems;
    
    /**
     *  存放每个item的位置信息的数组
     */
    @property (nonatomic, strong) NSMutableArray *itemAttributes;
    
    /**
     *  临时存储当前item的x值
     */
    @property (nonatomic, assign) CGFloat item_X;
    
    /**
     *  临时存储当前item的Y值
     */
    @property (nonatomic, assign) CGFloat item_Y;
    
    /**
     *  最矮列下标
     */
    
    @property (nonatomic, assign) NSInteger shortestIndex;
    
    @end
    
    @implementation MyLayOut
    
    #pragma mark -------------------- 懒加载
    - (NSMutableArray *)columnsHeights
    {
        if (!_columnsHeights)
        {
            self.columnsHeights = [NSMutableArray array];
        }
        return _columnsHeights;
    }
    
    - (NSMutableArray *)itemAttributes
    {
        if (!_itemAttributes)
        {
            self.itemAttributes = [NSMutableArray array];
        }
        return _itemAttributes;
    }
    
    #pragma mark -- 获取最矮列的下标
    - (NSInteger)getShortestColumnIndex
    {
        //最矮列下标
        NSInteger shortestIndex = 0;
        
        //column高度
        CGFloat shortestHeight = MAXFLOAT;
        
        //遍历高度数组获得最矮列下标
        for (NSInteger i = 0; i < self.numberOfColumns; i ++)
        {
            CGFloat currentHeight = [[self.columnsHeights objectAtIndex:i] floatValue];
            if (currentHeight < shortestHeight)
            {
                shortestHeight = currentHeight;
                shortestIndex = i;
            }
        }
        return shortestIndex;
    }
    
    #pragma mark -- 获取最高列的下标
    - (NSInteger)getHighestColumnIndex
    {
        //最高列下标
        NSInteger highestIndex = 0;
        
        //column高度
        CGFloat highestHeight = 0;
        
        //遍历高度数组获得最高列下标
        for (NSInteger i = 0; i < self.numberOfColumns; i ++)
        {
            CGFloat currentHeight = [[self.columnsHeights objectAtIndex:i] floatValue];
            if (currentHeight > highestHeight)
            {
                highestHeight = currentHeight;
                highestIndex = i;
            }
        }
        return highestIndex;
    }
    
    #pragma mark -- 添加顶部内边距的值
    - (void)addTopValueForColumns
    {
        for (NSInteger i = 0; i < self.numberOfColumns; i ++)
        {
            self.columnsHeights[i] = @(self.sectionInSet.top);
        }
    }
    
    #pragma mark -- 计算每个item的X和Y
    - (void)getOriginInShortestColumn
    {
        //获取最矮列下标
        self.shortestIndex = [self getShortestColumnIndex];
        
        //获取最矮列的高度
        CGFloat shortestHeight = [[self.columnsHeights objectAtIndex:self.shortestIndex] floatValue];
        
        //设置item的X
        self.item_X = self.sectionInSet.left + (self.itemSize.width + self.ItemSpacing) * self.shortestIndex;
        
        //设置item的Y
        self.item_Y = shortestHeight + self.ItemSpacing;
    }
    
    #pragma mark -- 计算width和height --> 生成frame
    - (void)setFrame:(NSIndexPath *)indexPath
    {
        UICollectionViewLayoutAttributes *layOutAttribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        
        //存放item的高度
        CGFloat itemHeight = 0;
        
        if (self.delegate && [self.delegate respondsToSelector:@selector(heightForItemAtIndexPath:)])
        {
            itemHeight = [self.delegate heightForItemAtIndexPath:indexPath];
        }
        
        layOutAttribute.frame = CGRectMake(_item_X, _item_Y, self.itemSize.width, itemHeight);
        
        //将位置信息加入数组
        [self.itemAttributes addObject:layOutAttribute];
        
        //更新当前列的高度
        self.columnsHeights[_shortestIndex] = @(self.item_Y + itemHeight);
    }
    
    #pragma mark -- 重写父类布局方法
    - (void)prepareLayout
    {
        [super prepareLayout];
        
        //为高度数组添加上边距
        [self addTopValueForColumns];
        
        //获取item个数
        self.numberOfItems = [self.collectionView numberOfItemsInSection:0];
        
        //循环布局
        for (NSInteger i = 0; i < self.numberOfItems; i ++)
        {
            //计算item的X和Y
            [self getOriginInShortestColumn];
            
            //生成indexPath
            NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
            
            //生成frame
            [self setFrame:indexPath];
        }
    }
    
    #pragma mark -- 获取contentView尺寸
    - (CGSize)collectionViewContentSize
    {
        //获取最高列下标
        NSInteger highestIndex = [self getHighestColumnIndex];
        
        //获取最高列高度
        CGFloat highestHeight = [[self.columnsHeights objectAtIndex:highestIndex] floatValue];
        
        //构造contentView的size
        CGSize size = self.collectionView.frame.size;
        
        //修改高度
        size.height = highestHeight + self.sectionInSet.bottom;
        
        //返回size
        return size;
    }
    
    #pragma mark -- 返回位置信息数组
    - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
    {
        return self.itemAttributes;
    }

@end

ViewController.m

    #import "ViewController.h"
    #import "Model.h"
    #import "MyLayOut.h"
    #import "ImageCell.h"
    #import "UIImageView+WebCache.h"
    
    @interface ViewController ()<MyLayOutDelegate, UICollectionViewDelegate, UICollectionViewDataSource>
    
    /**
     *  数据源数组
     */
    @property (nonatomic, strong) NSMutableArray *dataSource;
    
    /**
     *  集合视图
     */
    @property (nonatomic, strong) UICollectionView *collectionView;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        
        [self getData];
        [self createCollectionView];
    }
    
    #pragma mark -------------------- 请求数据
    - (void)getData
    {
        self.dataSource = [NSMutableArray array];
        
        NSData *data = [NSData dataWithContentsOfFile:@"/Users/dllo/Desktop/简书/MyFlowLayOut/MyFlowLayOut/Data.json"];
        NSArray *array = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
        
        for (NSDictionary *dic in array)
        {
            Model *model = [[Model alloc] init];
            [model setValuesForKeysWithDictionary:dic];
            [self.dataSource addObject:model];
        }
    }
    
    #pragma mark -------------------- 创建collectionView
    - (void)createCollectionView
    {
        MyLayOut *layOut = [[MyLayOut alloc] init];
        layOut.delegate = self;
        layOut.itemSize = CGSizeMake((self.view.frame.size.width - 40) / 3.0, (self.view.frame.size.width - 40) / 3.0);
        layOut.ItemSpacing = 10;
        layOut.sectionInSet = UIEdgeInsetsMake(10, 10, 10, 10);
        layOut.numberOfColumns = 3;
        
        self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layOut];
        self.collectionView.delegate = self;
        self.collectionView.dataSource = self;
        self.collectionView.backgroundColor = [UIColor colorWithRed:0.52 green:0.74 blue:0.96 alpha:1.00];
        [self.view addSubview:_collectionView];
        
        //注册cell:
        [self.collectionView registerClass:[ImageCell class] forCellWithReuseIdentifier:@"imageCell"];
    }
    
    #pragma mark -------------------- 实现自定义协议方法
    - (CGFloat)heightForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        CGFloat width = ([UIScreen mainScreen].bounds.size.width - 40) / 3.0;
        
        Model *model = [self.dataSource objectAtIndex:indexPath.row];
        CGFloat height = (model.height / model.width) * width;
        return height;
    }
    
    #pragma mark -------------------- 实现collectionView协议方法
    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
    {
        return self.dataSource.count;
    }
    
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        ImageCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"imageCell" forIndexPath:indexPath];
        cell.backgroundColor = [UIColor lightGrayColor];
        cell.layer.cornerRadius = 5;
        cell.photoImageView.layer.cornerRadius = 5;
        cell.photoImageView.clipsToBounds = YES;
        cell.photoImageView.contentMode = UIViewContentModeScaleAspectFit;
        [cell.photoImageView sd_setImageWithURL:[NSURL URLWithString:[[self.dataSource objectAtIndex:indexPath.row] thumbURL]]];
        return cell;
    }
    
    - (UIStatusBarStyle)preferredStatusBarStyle
    {
        return UIStatusBarStyleLightContent;
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
}

@end

实现效果如下:

实现效果

在写的过程中也遇到了很多问题,因为对于layout的实现我也不是很熟悉,还需要进一步调研,希望大家都能共同进步!