UICollectionView

#import "ViewController.h"
#import "Model.h"
#import "MyCollectionViewCell.h"
#import "UIImageView+WebCache.h"
#import "CustomLayout.h"
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout,CustomLayoutDelegate>

///声明一个数组用于存储model的数据类
@property (nonatomic,strong)NSMutableArray *saveModelArray;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //首先知道要显示的数据是数组套字典的格式
    //创建Model类用于处理数据
    //解析数据
    [self analysizeData];
    
    //创建UICollectionView
    [self createCollectionView];
    
    //现在效果图片发虚，不是我们真正想要的一个效果，用户体验相当不好，所以说我们需要自定义flowLayout显示图片
    
    
    
    
    
    
}

#pragma mark - 创建UICollectionView(在创建此视图之前必须设置UICollectionViewFlowLayout进行布局)
- (void)createCollectionView{
    /*
    //1.创建UICollectionViewFlowLayout
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    //设置行间距
    layout.minimumLineSpacing = 10;
    //设置列间距的
    layout.minimumInteritemSpacing = 10;
    //设置item大小的
    layout.itemSize = CGSizeMake(100, 100);
    //设置视图距离上左下右的一个距离
    layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    
    //设置头部和尾部的高度
    layout.headerReferenceSize = CGSizeMake(10, 10);
    layout.footerReferenceSize = CGSizeMake(10, 10);
    //设置滚动方向
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
     */
    
    //使用自定义的layout进行布局
    CustomLayout *layout = [[CustomLayout alloc] init];
    layout.delegate = self;
    
    //设置布局的一个宽度
    CGFloat width = ([[UIScreen mainScreen] bounds].size.width - 40)/3;
    //设置item的一个大小
    layout.itemSize = CGSizeMake(width, width);
    //设置距离上下左右的间距
    layout.sectionInsets = UIEdgeInsetsMake(10, 10, 10, 10);

    layout.insertItemSpacing = 10;
    layout.numberOfColumns = 3;
    
    
    //创建UICollectionView
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[[UIScreen mainScreen] bounds] collectionViewLayout:layout];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    collectionView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:collectionView];
    
    
    //千万不要忘记注册cell
    [collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"MyCollectionViewCell"];
    
    
    
}

//设置item的高度
- (CGFloat)heightItemForIndexpath:(NSIndexPath *)indexPath{
    
    //获取model的对象
    Model *model = _saveModelArray[indexPath.row];
    
    CGFloat width = ([UIScreen mainScreen].bounds.size.width - 40)/3;
    
    CGFloat height = (model.height / model.width) * width;
    
    return height;
    
}

#pragma mark - 实现相关的代理方法
//设置item的数量
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    
    return _saveModelArray.count;
}
//设置区的个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}
//设置cell的一个样式
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    //重用池里取出与之对应的cell
    MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MyCollectionViewCell" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor whiteColor];
    
    //设置cell上显示的内容
    //首先取出model对象
    Model *model = _saveModelArray[indexPath.row];
    //然后将model对象中字符串类型的url转换成NSURL类型，以备使用
    NSURL *url = [NSURL URLWithString:model.thumbURL];
    
    [cell.imageView sd_setImageWithURL:url placeholderImage:[UIImage imageNamed:@"placeHoderImage.png"]];
    
    
    
    
    return cell;
    
}

#pragma mark - 解析数据
-  (void)analysizeData{
    
    //读取文件
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"Data" ofType:@"json"];
    
    //因为准备的数据是json数据，所以解析要遵循json数据的解析方式
    NSData *data = [NSData dataWithContentsOfFile:filePath];
    NSMutableArray *array = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
    //给数组初始化
    self.saveModelArray = [NSMutableArray array];
    //使用for..in遍历取出数组中的字典，然后赋值给model，存储起来
    for (NSDictionary *dic in array) {
        //使用kvc给model赋值
        Model *model = [[Model alloc] init];
        [model setValuesForKeysWithDictionary:dic];
        [_saveModelArray addObject:model];
    }
    
    NSLog(@"%@",_saveModelArray);   
   
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

#import <UIKit/UIKit.h>

//第一步：创建继承与UICollectionViewLayout的类，声明一个协议，只是先一个代理方法

@protocol CustomLayoutDelegate <NSObject>

//用于获取item的高度
- (CGFloat)heightItemForIndexpath:(NSIndexPath *)indexPath;

@end


@interface CustomLayout : UICollectionViewLayout

//第二步：设置相关的属性(设置外部可以访问到的)
///item的大小
@property (nonatomic,assign)CGSize itemSize;
///设置collectionView的内间距
@property (nonatomic,assign)UIEdgeInsets sectionInsets;

///item间距的设置
@property (nonatomic,assign)CGFloat insertItemSpacing;
///列的数目
@property (nonatomic,assign)NSInteger numberOfColumns;

///代理
@property (nonatomic,weak)id <CustomLayoutDelegate>delegate;




@end

#import "CustomLayout.h"

//第三步：声明一些不暴露在外部使用的属性，只有当前文件可以使用的
@interface CustomLayout ()

///获取item的总数量
@property (nonatomic,assign)NSInteger numberOfItems;

///存储每一列高度的数组
@property (nonatomic,strong)NSMutableArray *columnHeights;

///存储距离上下左右的数组(x,y,w,h)
@property (nonatomic,strong)NSMutableArray *itemAtrributes;

///存储item的x值
@property (nonatomic,assign)CGFloat detalX;

///存储item相对应的y值
@property (nonatomic,assign)CGFloat detalY;

///记录最短的列
@property (nonatomic,assign)NSInteger shortestIndex;

///获取最长列的索引值
- (NSInteger)p_indexForLongestColumn;

///获取最短列的索引值
- (NSInteger)p_indexForShortestColumn;



@end

@implementation CustomLayout

//第四步：懒加载一些数据源
- (NSMutableArray *)columnHeights{
    if (!_columnHeights) {
        self.columnHeights = [NSMutableArray array];
    }
    
    return _columnHeights;
}

- (NSMutableArray *)itemAtrributes{
    if (!_itemAtrributes) {
        self.itemAtrributes = [NSMutableArray array];
    }
    
    return _itemAtrributes;
}

//第五步：实现获取最长列的方法
- (NSInteger)p_indexForLongestColumn{
    //定义一个变量用于记录哪一列是最长列
    NSInteger longestIndex = 0;
    //当前最长列的一个高度
    CGFloat longestHeight = 0;

    //遍历数组取出相关数据然后返回
    for (int i = 0; i < self.numberOfColumns; i++) {
        //获取相关的一个高度
        CGFloat currentHeight = [self.columnHeights[i] floatValue];
        
        //判断选出最高的一个高度
        if (currentHeight > longestHeight) {
            longestHeight = currentHeight;
            longestIndex = i;
        }
    }
    
    return longestIndex;

}

//第六步：实现获取最短列的一个方法
- (NSInteger)p_indexForShortestColumn{
    
    //记录索引
    NSInteger shortestIndex = 0;

    //记录最小的一个高度
    CGFloat shortestHeight = MAXFLOAT;
    
    //遍历赋值取出最小的下标
    for (int i = 0; i < self.numberOfColumns; i++) {
        //获取一个当前高度
        CGFloat currentHeight = [self.columnHeights[i] floatValue];
        if (currentHeight < shortestHeight) {
            shortestHeight = currentHeight;
            shortestIndex = i;
        }
    }
    return shortestIndex;
    
}

//第七步：实现给每一列添加top高度
- (void)addHeightWithColumns{
    
    //遍历取出相关的数值
    for (int i = 0;i < self.numberOfColumns;i++){
        self.columnHeights[i] = @(self.sectionInsets.top);
    }

}

//第八步：查找最短的列，并设置相关属性
// 查找最短的列，并设置相关属性
- (void)searchShortColumns
{
    _shortestIndex = [self p_indexForShortestColumn];
    CGFloat shortestH = [self.columnHeights[_shortestIndex] floatValue];
    // 计算x值：内边距left + （item宽 + item的间距）* 索引
    self.detalX = self.sectionInsets.left + (self.itemSize.width +self.insertItemSpacing) * _shortestIndex;
    // 计算y值
    self.detalY = shortestH + self.insertItemSpacing;
    
}

//第九步：查找最短的列，并设置相关属性
// 设置属性和frame
- (void)setFrame:(NSIndexPath *)indexPath
{
    // 设置属性
    UICollectionViewLayoutAttributes *layoutArr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    // 保存item的高
    CGFloat itemHeight = 0;
    if (_delegate && [_delegate respondsToSelector:@selector(heightItemForIndexpath:)]) {
        // 使用代理方法获取item的高
        itemHeight = [_delegate heightItemForIndexpath:indexPath];
    }
    // 设置frame
    layoutArr.frame = CGRectMake(_detalX, _detalY, self.itemSize.width, itemHeight);
    // 放入数组
    [self.itemAtrributes addObject:layoutArr];
    // 更新高度
    self.columnHeights[_shortestIndex] = @(_detalY +itemHeight);
}

//步骤十：在实现文件中必须要的实现三个方法
/*
 - (void)prepareLayout 准备布局方法,在每个UICollectionViewLayout将要被使用的时候调用这个方法
 
 - (CGSize)collectionViewContentSize  计算每个item的大小,会走很多次
 
 - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect 返回所有的item的位置信息和大小
 */

//第十一步：实现准备布局的代理方法
// 准备布局
- (void)prepareLayout
{
    // 调用父类布局
    [super prepareLayout];
    [self addHeightWithColumns];
    // 获取item的数量
    self.numberOfItems = [self.collectionView numberOfItemsInSection:0];
    // 为每一个item设置frame和indexPath
    for(int i = 0;i < self.numberOfItems;i++)
    {
        // 查找最短的列，并设置相关属性
        [self searchShortColumns];
        // 设置indexPath
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        [self setFrame:indexPath];
    }
}

//第十二步：计算每个item的大小
// 计算每个item的大小
- (CGSize)collectionViewContentSize
{
    // 获取最长高度索引
    NSInteger longerstIndex = [self p_indexForLongestColumn];
    // 通过索引获取高度
    CGFloat longestH = [self.columnHeights[longerstIndex] floatValue];
    // 获取collectionView的Size
    CGSize contentSize = self.collectionView.frame.size;
    // 最大高度+bottom
    contentSize.height = longestH + self.sectionInsets.bottom;
    return contentSize;
}

//第十三步：将每个item的布局返回
// 返回每一个item的布局
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    // 返回每一个item的Attribute
    return self.itemAtrributes;
    
}



@end

#import <UIKit/UIKit.h>

@interface MyCollectionViewCell : UICollectionViewCell
///用来展示图片的控件
@property (nonatomic,strong)UIImageView *imageView;

@end

#import "MyCollectionViewCell.h"

@implementation MyCollectionViewCell

//重写初始化方法
- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        self.imageView = [[UIImageView alloc] init];
        [self.contentView addSubview:self.imageView];
    }
    return self;
}
//设置控件的frame
- (void)layoutSubviews{
    [super layoutSubviews];
    self.imageView.frame = self.bounds;
}

@end

#import <Foundation/Foundation.h>

@interface Model : NSObject

///图片的网址
@property (nonatomic,strong)NSString *thumbURL;

///图片的宽
@property (nonatomic,assign)NSInteger width;

///图片的高度
@property (nonatomic,assign)NSInteger height;

@end

#import "Model.h"

@implementation Model

- (void)setValue:(id)value forUndefinedKey:(NSString *)key{
    
}

@end