iOS开发UI篇 -- UICollectionView

一、UICollectionView的使用

1、注册cell(告诉collectionView将来创建怎样的cell)
[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"product"];

2、从缓存池中取出cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"product" forIndexPath:indexPath];

return cell;
}

3、重写init方法,创建布局参数 -- 》 这里重写init方法是因为我们在BaseViewController中都使用的是init方法，为了统一，所以重写了init方法
- (id)init
{
    // 1.流水布局
        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    // 2.每个cell的尺寸
        layout.itemSize = CGSizeMake(100, 100);
    return [super initWithCollectionViewLayout:layout];
}

4、UICollectionViewFlowLayout称为”流水布局”, 用来约束cell的显示

常见属性
Cell的尺寸
@property (nonatomic) CGSize itemSize;

cell之间的水平间距
@property (nonatomic) CGFloat minimumInteritemSpacing;

cell之间的垂直间距
@property (nonatomic) CGFloat minimumLineSpacing;

四周的内边距
@property (nonatomic) UIEdgeInsets sectionInset;

二、上demo -- 某易的“ 产品推荐 ”界面

#import “BJProductViewController.h”

#define BJProductID @"product"

#import "BJProductViewController.h"
#import "BJProduct.h"
#import "BJCollectionCell.h"

@interface BJProductViewController ()

@property(nonatomic,strong)NSMutableArray *products;
@end

@implementation BJProductViewController

static NSString * const reuseIdentifier = @"Cell";

- (instancetype)init{

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
layout.itemSize = CGSizeMake(85, 85);
layout.minimumInteritemSpacing = 0;
layout.minimumLineSpacing = 20;
layout.sectionInset = UIEdgeInsetsMake(layout.minimumLineSpacing,10,0,10);
return [super initWithCollectionViewLayout:layout];
}

- (instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}

- (NSArray *)products{
if(_products == nil){
NSString *path = [[NSBundle mainBundle] pathForResource:@"products.json" ofType:nil];
NSData *json = [NSData dataWithContentsOfFile:path];
NSArray *dictArray = [NSJSONSerialization JSONObjectWithData:json options:NSJSONReadingMutableContainers error:nil];

NSMutableArray *mutArray = [NSMutableArray array];
for (NSDictionary *dict in dictArray) {
BJProduct *product = [BJProduct productWithDict:dict];
[mutArray addObject:product];
}

_products = mutArray;
}
//    NSLog(@"%@",_products);
return  _products;
}

- (void)viewDidLoad
{
[super viewDidLoad];
self.collectionView.backgroundColor = [UIColor whiteColor];
// Uncomment the following line to preserve selection between presentations
// self.clearsSelectionOnViewWillAppear = NO;
UINib *nib = [UINib nibWithNibName:@"BJCollectionCell" bundle:nil];
[self.collectionView registerNib:nib forCellWithReuseIdentifier:BJProductID];
// Register cell classes
//    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier];

// Do any additional setup after loading the view.
}

#pragma mark <UICollectionViewDataSource>

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}

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

return self.products.count;
}

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

BJCollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:BJProductID forIndexPath:indexPath];

// Configure the cell
cell.product = self.products[indexPath.item];

//    cell.backgroundColor = [UIColor orangeColor];
return cell;
}

@end

#import BJCollectionCell.h

#import <UIKit/UIKit.h>

@class BJProduct;

@interface BJCollectionCell : UICollectionViewCell
@property(nonatomic,strong)BJProduct *product;
@end

#import BJCollectionCell.m

#import "BJCollectionCell.h"
#import "BJProduct.h"

@interface BJCollectionCell()
@property (weak, nonatomic) IBOutlet UIImageView *iconImage;

@property (weak, nonatomic) IBOutlet UILabel *nameLable;

@end

@implementation BJCollectionCell

- (void)awakeFromNib // 这里使用的是xib，在这里加载数据，还有需要注意cell的父类和ID
{
// Initialization code
self.iconImage.layer.cornerRadius = 6;
self.iconImage.layer.masksToBounds = YES;
}

- (void)setProduct:(BJProduct *)product{
_product = product;

self.iconImage.image = [UIImage imageNamed:product.icon];
self.nameLable.text = product.title;
}

@end

#import BJProduct.h

#import <Foundation/Foundation.h>

@interface BJProduct : NSObject
@property(nonatomic,copy)NSString *icon;
@property(nonatomic,copy)NSString *title;

+ (instancetype)productWithDict:(NSDictionary *)dict;
+ (instancetype)initWithDict:(NSDictionary *)dict;
@end

#import BJProduct.m

#import "BJProduct.h"

@implementation BJProduct
+ (instancetype)productWithDict:(NSDictionary *)dict{
BJProduct *product = [[self alloc] init];
product.icon = dict[@"icon"];
product.title = dict[@"title"];
return product;
}

+ (instancetype)initWithDict:(NSDictionary *)dict{
return [self productWithDict:dict];
}
@end