UICollectionView的简单使用

ChildModel.h

#import <Foundation/Foundation.h>

@interface ChildModel : NSObject

@property (nonatomic, strong) NSString *imageString;

@property (nonatomic, strong) NSString *nameString;

- (instancetype)initWithDic:(NSDictionary *)dic;

@end

ChildModel.m

#import "ChildModel.h"

@implementation ChildModel

- (instancetype)initWithDic:(NSDictionary *)dic
{
    self = [super init];
    if (self)
    {
        _imageString = dic[@"image"];
        _nameString = dic[@"name"];
    }
    return self;
}

@end

JFCell.h

#import <UIKit/UIKit.h>
#import "ChildModel.h"

@interface JFCell : UICollectionViewCell

@property (nonatomic ,strong) UIImageView *cellImageView;

@property (nonatomic ,strong) UILabel *cellLabel;

- (void)updateJFCellWithObj:(ChildModel *)childObj;

@end

JFCell.m

#import "JFCell.h"

@implementation JFCell
@synthesize cellImageView,cellLabel;
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        self.cellImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height-20)];
        self.cellImageView.backgroundColor = [UIColor brownColor];
        [self addSubview:self.cellImageView];
        
        self.cellLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, frame.size.height-20, frame.size.width, 20)];
        self.cellLabel.backgroundColor = [UIColor lightGrayColor];
        self.cellLabel.font = [UIFont systemFontOfSize:14];
        self.cellLabel.textAlignment = NSTextAlignmentCenter;
        [self addSubview:self.cellLabel];
    }
    return self;
}

- (void)updateJFCellWithObj:(ChildModel *)childObj
{
    self.cellImageView.image = [UIImage imageNamed:childObj.imageString];
    self.cellLabel.text = childObj.nameString;
}
@end

ViewController.m

#import "ViewController.h"
#import "JFCell.h"

//每行的cell个数
#define counts 3
//边距
#define margin 5

static NSString *cellString = @"cell";

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
{
    UICollectionView *JFCollectionView;
    NSMutableArray *childArray;
}

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    childArray = [[NSMutableArray alloc] init];
    //添加视图
    [self addCollectionView];
    //请求数据                     
    [self requestData];                //-------------------①用户请求
}

- (void)addCollectionView
{
    CGFloat cellWidch = ([[UIScreen mainScreen] bounds].size.width-(counts+1)*margin)/counts;
    //专门负责布局的类
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    //滑动方向(纵向)
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    //元素的size
    flowLayout.itemSize = CGSizeMake(cellWidch, cellWidch+20);
    //元素的横向间距
    flowLayout.minimumLineSpacing = margin;
    //元素的纵向间距
    flowLayout.minimumInteritemSpacing = margin;
    //组距离 视图边上下左右的距离
    flowLayout.sectionInset = UIEdgeInsetsMake(margin, margin, margin, margin);
    JFCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height) collectionViewLayout:flowLayout];
    JFCollectionView.backgroundColor = [UIColor whiteColor];
    JFCollectionView.dataSource = self;
    JFCollectionView.delegate = self;
    //注册cell,重用
    [JFCollectionView registerClass:[JFCell class] forCellWithReuseIdentifier:cellString];
    [self.view addSubview:JFCollectionView];
}
#pragma mark ----------------------UICollectionViewDataSource-------------------
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return childArray.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    JFCell *cell = [JFCollectionView dequeueReusableCellWithReuseIdentifier:cellString forIndexPath:indexPath];
    //根据数据更新视图
    [cell updateJFCellWithObj:childArray[indexPath.row]];                    //------④更新视图，响应用户请求
    return cell;
}

- (void)requestData
{
    //构造虚拟数据（通常是从网络服务器获取到Json数据）
    NSArray *dataArray = @[
                           @{@"image":@"1.jpg",@"name":@"小美"},
                           @{@"image":@"2.jpg",@"name":@"小娜"},
                           @{@"image":@"4.jpg",@"name":@"小明"},
                           @{@"image":@"3.jpg",@"name":@"小娜"},
                           @{@"image":@"1.jpg",@"name":@"小美"},
                           @{@"image":@"5.jpg",@"name":@"小娜"},
                           @{@"image":@"6.jpg",@"name":@"小美"},
                           @{@"image":@"7.jpg",@"name":@"小娜"},
                           @{@"image":@"8.jpg",@"name":@"小苏"},
                           @{@"image":@"2.jpg",@"name":@"小娜"},
                           @{@"image":@"3.jpg",@"name":@"小娜"},
                           @{@"image":@"1.jpg",@"name":@"小娜"},
                           @{@"image":@"3.jpg",@"name":@"小娜"},
                           @{@"image":@"4.jpg",@"name":@"小娜"},
                           @{@"image":@"5.jpg",@"name":@"小娜"},
                           ];
    for (NSDictionary *dic in dataArray)
    {
        ChildModel *model = [[ChildModel alloc] initWithDic:dic];      //----------②请求更新数据
        [childArray addObject:model];
    }
    //得到数据后更新视图
    [JFCollectionView reloadData];                                     //------------③通知视图更新
}
@end