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