iOS编程------集合视图UICollectionView

//
//  AppDelegate.h
//  UI21_UICollectionView
//
//  Created by l on 15/10/5.
//  Copyright (c) 2015年 . All rights reserved.
//

#import <UIKit/UIKit.h>

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;


@end






//
//  AppDelegate.m
//  UI21_UICollectionView
//
//  Created by l on 15/10/5.
//  Copyright (c) 2015年 . All rights reserved.
//

#import "AppDelegate.h"

@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    return YES;
}








///////////////////////////////////////////////////////////////////






//
//  ViewController.h
//  UI21_UICollectionView
//
//  Created by l on 15/10/5.
//  Copyright (c) 2015年 . All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController


@end






//
//  ViewController.m
//  UI21_UICollectionView
//
//  Created by l on 15/10/5.
//  Copyright (c) 2015年 . All rights reserved.
//

#import "ViewController.h"
#import "MyCollectionViewCell.h"
#import "MyCollectionViewCell2.h"

#define KCell @"mycell"
#define KHeader @"header"
#define KFooter @"footer"


@interface ViewController ()<UICollectionViewDelegate, UICollectionViewDataSource> //创建collectionView遵守的两个协议,类似UITableView.

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    /*
    创建布局样式
    UICollectionViewLayout, 为一个抽象类,我们通常使用它的子类,系统提供一个子类.
    UICollectionViewLayout, 称为网格布局,对齐到网格.
    */

    //(1)创建布局对象
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

    //(2)配置布局对象
    flowLayout.minimumLineSpacing = 10;                                    //行间距
    flowLayout.minimumInteritemSpacing = 10;                               //列间距

    CGFloat width = (self.view.bounds.size.width - 10 * 2 - 10 * 2) / 3;
    CGFloat height = 2 * width;
    flowLayout.itemSize = CGSizeMake(width, height);                        //单元格宽高

    flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);             //分区边距
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;   //滚动方向

    /*
    注意:区头大小和区尾的宽高只有一个起作用,由混动方向决定.
    如果是竖直滚动,宽度为集合视图宽度 collectionView.size.width,高度可以指定
    如果是水平滚动,高度为集合视图高度,宽度可以指定.
    */
    flowLayout.headerReferenceSize = CGSizeMake(0, 100); //区头大小
    flowLayout.footerReferenceSize = CGSizeMake(0, 50);  //区尾大小


    /*
    创建一个集合视图对象
    集合视图不仅需要指定frame,还需要指定布局样式.
    */

    //(1)创建
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];

    //(2)设置delegate dataSource 等等.
    collectionView.delegate = self;
    collectionView.dataSource = self;

    collectionView.backgroundColor = [UIColor redColor];

    //(3)注册单元格,(区头, 区尾) 两种方式, 纯代码和xib

    //单元格
    [collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:KCell];



    //xib方式
//    [collectionView registerNib:[UINib nibWithNibName:@"MyCollectionViewCell2" bundle:[NSBundle mainBundle]] forCellWithReuseIdentifier:@"cell"];




    //区头
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:KHeader];

    //区尾
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:KFooter];

    //(4) 添加到父视图上
    [self.view addSubview:collectionView];


}


#pragma mark---------- 实现协议里面的方法 -------------

//分区中的元素数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return 30;
}

//给元素加载单元格
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    //1.从重用队列里面取
    MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:KCell forIndexPath:indexPath];

    //2.配置单元格
    //设置图片
    cell.imageView.image = [UIImage imageNamed:@"image2.jpg"];
    //设置label
    cell.label.text = [NSString stringWithFormat:@"Sec:%ld Item:%ld", indexPath.section, indexPath.item];


    //xib方式
//    MyCollectionViewCell2 *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];


    //3.返回
    return cell;
}

//加载区头,区尾
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{

    //根据kind去判断,加载的是区头还是区尾
    if (kind == UICollectionElementKindSectionHeader) {

        //(1)取出
        UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:KHeader forIndexPath:indexPath];
        //(2)配置
        headerView.backgroundColor = [UIColor yellowColor];
        //(3)返回
        return headerView;

    } else {

        //(1)取出
        UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:KFooter forIndexPath:indexPath];
        //(2)配置
        footerView.backgroundColor = [UIColor greenColor];
        //(3)返回
        return footerView;

    }
}


//当单元格被选中的时候触发
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

    NSLog(@"分区号:%ld 元素下表:%ld", indexPath.section, indexPath.item);
}



- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end







////////////////////////////////////////////////////////////////////






//
//  MyCollectionViewCell.h
//  UI21_UICollectionView
//
//  Created by l on 15/10/5.
//  Copyright (c) 2015年 . All rights reserved.
//

#import <UIKit/UIKit.h>

@interface MyCollectionViewCell : UICollectionViewCell

@property (nonatomic, strong, readonly) UIImageView *imageView; //显示图片
@property (nonatomic, strong, readonly) UILabel *label;         //显示的label,展示分区号,item号


@end






//
//  MyCollectionViewCell.m
//  UI21_UICollectionView
//
//  Created by l on 15/10/5.
//  Copyright (c) 2015年 . All rights reserved.
//

#import "MyCollectionViewCell.h"

@implementation MyCollectionViewCell

- (instancetype)initWithFrame:(CGRect)frame{

    self = [super initWithFrame:frame];
    if (self) {

        _imageView = [[UIImageView alloc] initWithFrame:self.bounds];
        [self.contentView addSubview:_imageView];

        _label = [[UILabel alloc] initWithFrame:(CGRectMake(0, self.bounds.origin.y , self.bounds.size.width, 40))];
        [self.contentView addSubview:_label];

    }
    return self;
}


@end





///////////////////////////////////////////////////////////////////






//
//  MyCollectionViewCell2.h
//  UI21_UICollectionView
//
//  Created by l on 15/10/5.
//  Copyright (c) 2015年 . All rights reserved.
//

#import <UIKit/UIKit.h>

@interface MyCollectionViewCell2 : UICollectionViewCell


@property (strong, nonatomic) IBOutlet UIImageView *imageView;


@end






//
//  MyCollectionViewCell2.m
//  UI21_UICollectionView
//
//  Created by l on 15/10/5.
//  Copyright (c) 2015年 . All rights reserved.
//

#import "MyCollectionViewCell2.h"

@implementation MyCollectionViewCell2

- (void)awakeFromNib {
    // Initialization code
}



@end