UICollectionViewCell

重点分析:
1. 从xib中加载cell,创建nib文件注册cell设置标识符,在创建cell中加入标识符,在xib右侧窗口添加标识符与上面一致.
2. 设置CollectionViewCell时,必须设置layout.
3. 设置CollectionViewCell中图片圆角 self.productImage.layer.cornerRadius = 10;
self.productImage.clipsToBounds = YES;

一.数据模型(M)

功能分析: 配置数据模型,将解析的数据传入数据模型中.

#import <Foundation/Foundation.h>
@interface ProductsModel : NSObject
/**标题*/
@property (copy, nonatomic) NSString *title;
/**ID*/
@property (copy, nonatomic) NSString *ID;
/**网址*/
@property (copy, nonatomic) NSString *url;
/**图片*/
@property (copy, nonatomic) NSString *icon;
/**自定义网址*/
@property (copy, nonatomic) NSString *customUrl;
- (instancetype)initWithDictionary:(NSDictionary *)dic;
+ (instancetype)productModelWithDictionary:(NSDictionary *)dic;
@end
/**实现方法*/
#import "ProductsModel.h"
@implementation ProductsModel
+ (instancetype)productModelWithDictionary:(NSDictionary *)dic{
    return [[self alloc] initWithDictionary:dic];
}
- (instancetype)initWithDictionary:(NSDictionary *)dic{
    if (self = [super init]){
        [self setValuesForKeysWithDictionary:dic];
        self.ID = dic[@"id"];
    }
    return self;
}
/**当找不到的话,不会崩*/
- (void)setValue:(id)value forUndefinedKey:(NSString *)key{  
}
@end

二. 控制器(C)

功能分析: 当设置UICollectionViewCell必须设置 UICollectionViewFlowLayout(流水布局),

#import "ProductCollection.h"
#import "ProductsModel.h"
#import "ProductCell.h"
@interface ProductCollection ()

@property (strong, nonatomic) NSArray *collectionArray;
@end

@implementation ProductCollection
/**创建标识符*/

static NSString * const reuseIdentifier = @"products";
- (NSArray *)collectionArray{

    if (_collectionArray == nil){
        /**1.读取json文件*/
        NSString *path = [[NSBundle mainBundle] pathForResource:@"products.json" ofType:nil];
        /**2.转换成data*/
        NSData *data = [NSData dataWithContentsOfFile:path];
        /**3.换json格式文件解析成数组*/
        NSArray *array  = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
        /**4.创建数据模型*/
        NSMutableArray *dataArray = [NSMutableArray array];
        for (NSDictionary *dic in array) {
            ProductsModel *products = [ProductsModel productModelWithDictionary:dic];
            [dataArray addObject:products];
        }
        _collectionArray = dataArray;
    }
    return _collectionArray;
}
#pragma mark--重写init方法,添加layout,因为CollectionView必须设置layout
- (instancetype)init{

    /**1.流水布局*/
    UICollectionViewFlowLayout *layouts = [[UICollectionViewFlowLayout alloc] init];

    /**2.每个cell的尺寸*/
    layouts.itemSize = CGSizeMake(80, 80);

    /**3.设置cell之间的水平间距*/
    layouts.minimumInteritemSpacing = 2;

    /**4.设置cell之间的垂直间距*/
    layouts.minimumLineSpacing = 10;

    /**5.设置四周间距*/
    layouts.sectionInset = UIEdgeInsetsMake(layouts.minimumLineSpacing, 5, 0, 5);

    return [super  initWithCollectionViewLayout:layouts];

}

- (void)viewDidLoad {
    [super viewDidLoad];
    /**设置背景颜色*/
    self.collectionView.backgroundColor = [UIColor whiteColor];
    /**注册cell标识符*/
    UINib *nib = [UINib nibWithNibName:@"ProductCell" bundle:nil];
    [self.collectionView registerNib:nib forCellWithReuseIdentifier:reuseIdentifier];
}

#pragma mark <UICollectionViewDataSource>


- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

   return  self.collectionArray.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    ProductCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];

    cell.products = self.collectionArray[indexPath.item];
    return cell;
}

@end

三. UICollectionViewCell视图(V)

#import <UIKit/UIKit.h>
@class ProductsModel;
@interface ProductCell : UICollectionViewCell
/**配置数据模型*/
@property (strong, nonatomic) ProductsModel *products;
@end


#import "ProductCell.h"
#import "ProductsModel.h"
@interface ProductCell()
/**图片*/
@property (weak, nonatomic) IBOutlet UIImageView *productImage;
/**标题*/
@property (weak, nonatomic) IBOutlet UILabel *ProductTitle;

@end
@implementation ProductCell

- (void)awakeFromNib {
    // Initialization code
    /**设置圆角*/
    self.productImage.layer.cornerRadius = 10;
    self.productImage.clipsToBounds = YES;

}

#pragma mark--设置模型
- (void)setProducts:(ProductsModel *)products{
    _products = products;
    self.productImage.image = [UIImage imageNamed:products.icon];
    self.ProductTitle.text = products.title;

}
@end