UI22_UICollectionView

引用三方SDWebImage, 改-fobjc-arc
ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController


@end

ViewController.m

#import "ViewController.h"
#import "MyCell.h"
#import "UIImageView+WebCache.h"
#import "MyCollectionReusableView.h"

@interface ViewController ()<UICollectionViewDataSource, UICollectionViewDelegate>
@property(nonatomic, retain)NSMutableArray *arr;

@end

@implementation ViewController
- (void)dealloc
{
    [_arr release];
    [super dealloc];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor= [UIColor whiteColor];

    //  1. 要创建collectionView, 得先创建一个flowLayout, 创建完之后才能创建collectionView
    //  它是苹果推荐使用的一个标准的瀑布流
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    //  设置item的大小, item就是tableView的Cell 的row
    flowLayout.itemSize = CGSizeMake(80, 100);
    //  设置滑动的方向
//    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    //  最小的行间距
    flowLayout.minimumLineSpacing = 30;
    //  最小列间距
//    flowLayout.minimumInteritemSpacing = 5;
    //  给item设置边框
    flowLayout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 40);

    //  设置头部的区域范围
    flowLayout.headerReferenceSize = CGSizeMake(200, 100);
    //  设置底部的区域范围
//    flowLayout.footerReferenceSize = CGSizeMake(200, 100);


    //  创建collectionView
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:flowLayout];
    [self.view addSubview:collectionView];
    [collectionView release];
    //  默认背景是黑色
    collectionView.backgroundColor = [UIColor orangeColor];
    collectionView.dataSource = self;
    collectionView.delegate = self;
    //  collectionView想要创建Cell的话只能使用注册的方式
    [collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@"reuse"];

    //  注册头部区域
    //  参数1: 注册对象的类型
    //  参数2: 需要执行注册的区域是头部还是底部
    //  参数3: 重用标志
    [collectionView registerClass:[MyCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
    //  它本身带重用的特性, 所以只能注册去使用, 而且注册的方法跟Cell的方法不一样

    [self createData];


}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    if (kind == UICollectionElementKindSectionHeader) {
        MyCollectionReusableView *reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"headerView" forIndexPath:indexPath];
        reusableView.backgroundColor = [UIColor cyanColor];
        reusableView.label.text = @"末日之辉";
        return reusableView;
    }
    return nil;
}

- (void)createData {
    NSString *path = [[NSBundle mainBundle] pathForResource:@"Data" ofType:@"json"];
    NSData *data = [NSData dataWithContentsOfFile:path];
    self.arr = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
//    NSLog(@"%@", self.arr);
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuse" forIndexPath:indexPath];


    cell.myLable.text = [NSString stringWithFormat:@"%ld", indexPath.row];
    [cell.myImageView sd_setImageWithURL:[NSURL URLWithString:self.arr[indexPath.row][@"thumbURL"]]];
    return cell;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.arr.count;
}

MyCollectionReusableView.h

#import <UIKit/UIKit.h>

@interface MyCollectionReusableView : UICollectionReusableView
@property(nonatomic, retain)UILabel *label;

@end

MyCollectionReusableView.m

#import "MyCollectionReusableView.h"

@implementation MyCollectionReusableView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.label = [[UILabel alloc] init];
        [self addSubview:self.label];
        [_label release];
    }
    return self;
}
- (void)layoutSubviews {
    [super layoutSubviews];
    self.label.frame = CGRectMake(0, 50, 100, 30);
}


@end

MyCell.h

#import <UIKit/UIKit.h>

@interface MyCell : UICollectionViewCell
@property(nonatomic, retain)UILabel *myLable;
@property(nonatomic, retain)UIImageView *myImageView;

@end

MyCell.m

#import "MyCell.h"

@implementation MyCell
- (void)dealloc
{
    [_myLable release];
    [_myImageView release];
    [super dealloc];
}

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.myImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
        [self.contentView addSubview:self.myImageView];
        [_myImageView release];
        self.myImageView.backgroundColor = [UIColor lightGrayColor];

        self.myLable = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, 100, 20)];
        [self.contentView addSubview:self.myLable];
        [_myLable release];
        self.myLable.backgroundColor = [UIColor whiteColor];
    }
    return self;
}


@end

Data.json

[
     {
     "thumbURL": "http://amuse.nen.com.cn/imagelist/11/21/9as70n3ir61b.jpg",
     "width": 482,
     "height": 480
     },
     {
     "thumbURL": "http://www.nbsheji.cn/uploadfiles/2010113143922418.jpg",
     "width": 270,
     "height": 250
     },
     {
     "thumbURL": "http://image.tianjimedia.com/uploadImages/2014/113/40/PMCZD10TC4UM_680x500.jpg",
     "width": 450,
     "height": 300
     },
     {
     "thumbURL": "http://www.sgxw.cn/uploadfile/2011/1022/20111022094539323.png",
     "width": 476,
     "height": 516
     },
     {
     "thumbURL": "http://e.hiphotos.baidu.com/image/pic/item/fc1f4134970a304e3120354dd3c8a786c9175c02.jpg",
     "width": 300,
     "height": 600
     },
     {
     "thumbURL": "http://a.bbs.meishi.qq.com/forum/201110/15/203740pp4qiij6p5db4hfp.jpg",
     "width": 229,
     "height": 259
     },
     {
     "thumbURL": "http://www.qqpk.cn/Article/UploadFiles/201111/2011112212074796.jpg",
     "width": 543,
     "height": 398
     },
     {
     "thumbURL": "http://cdn4.haibao.cn/store/wm/bigfiles/200924/887EDBB8ECC69AB68AF2D5C74FAB89.jpg",
     "width": 600,
     "height": 450
     },
     {
     "thumbURL": "http://cdn6.haibao.cn/store/wm/bigfiles/200924/887edbb8ecc69ab583f1d5c54ca881.jpg",
     "width": 400,
     "height": 600
     },
     {
     "thumbURL": "http://wenwen.soso.com/p/20100819/20100819182853-960804550.jpg",
     "width": 500,
     "height": 315
     },
     {
     "thumbURL": "http://imgk.zol.com.cn/samsung/4600/a4599073_s.jpg",
     "width": 720,
     "height": 320
     },
     {
     "thumbURL": "http://www.qqpk.cn/Article/UploadFiles/201111/2011112212072571.jpg",
     "width": 543,
     "height": 364
     },
     {
     "thumbURL": "http://lady.southcn.com/6/images/attachement/jpg/site4/20090629/0016ec7d751a0bb2dfbd3a.jpg",
     "width": 395,
     "height": 396
     },
     {
     "thumbURL": "http://wenwen.soso.com/p/20100828/20100828102336-1140302797.jpg",
     "width": 371,
     "height": 321
     }
]