博客

首先新建工程

然后在xib中添加


UICollectionView控件

然后

#import <UIKit/UIKit.h>

@interface CollectionViewController : BaseViewController <UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>

@property (strong, nonatomic) IBOutlet UICollectionView *collectionView;
@property (strong, nonatomic) NSArray *items;

@end

//
//  CollectionViewController.m
//  StudyiOS
//
//  Created by ZhangYiCheng on 12-12-13.
//  Copyright (c) 2012年 ZhangYiCheng. All rights reserved.
//

#import "CollectionViewController.h"
#import "CollectionHeadView.h"
#import "TESTCollectionViewController.h"
@interface CollectionViewController ()

@end

@implementation CollectionViewController

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

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 注册可重用视图
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    [self.collectionView registerClass:[CollectionHeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"head"];
    
    self.collectionView.dataSource = self;
    self.collectionView.delegate = self;
    //这里面的itmes是加载的图片
    self.items = @[@"blue", @"blue", @"blue", @"girl",@"blue", @"red", @"green", @"girl",@"blue", @"red", @"green", @"girl",@"blue",@"blue"];
    
    
}

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

- (void)viewDidUnload {
    [self setCollectionView:nil];
    [super viewDidUnload];
}


#pragma mark - UICollectionViewDataSource
// 返回section的数量
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

// 返回在一个给定section里的cell数量
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return [self.items count];
}

// 返回在某个cell。与table view的cell类似
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    // 得到cell
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    // 系统的UICollectionViewCell只能改变背景图,你应该自定义一个class继承UICollectionViewCell
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 80, 120)];
    imageView.image = [UIImage imageNamed:self.items[indexPath.row]];
    cell.backgroundView = imageView;
    //cell上添加控件
    UILabel *label=[[UILabel alloc]initWithFrame:CGRectMake(0, 0, 30, 30)];
    label.text=@"aaa";
    [cell addSubview:label];

    
    return cell;
}

// 返回headview或footview
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    CollectionHeadView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"head" forIndexPath:indexPath];
    
    return headView;
}


#pragma mark - UICollectionViewDelegate
// 选中某个cell
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"didSelectItemAtIndexPath:%d-%d", indexPath.section, indexPath.row);
    

	//测试cell的点击事件

    TESTCollectionViewController *test=[[TESTCollectionViewController alloc]init];
    [self.navigationController pushViewController:test animated:YES];
    
    
}

#pragma mark - UICollectionViewDelegateFlowLayout
// 定义cell的size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    CGSize size = CGSizeMake(80, 120);
    return size;
}

// 定义section的边距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(20, 20, 20, 20);
}

// 定义headview的size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
    return CGSizeMake(320, 40);
}

// 定义上下cell的最小间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
    return 20;
}

// 定义左右cell的最小间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
    return 20;
}
@end

添加了自定义header的类，自定义的header需要继承

UICollectionReusableView

//
//  CollectionHeadView.h
//  StudyiOS
//
//  Created by ZhangYiCheng on 12-12-13.
//  Copyright (c) 2012年 ZhangYiCheng. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface CollectionHeadView : UICollectionReusableView

@property (strong, nonatomic) UILabel *label;

@end

//
//  CollectionHeadView.m
//  StudyiOS
//
//  Created by ZhangYiCheng on 12-12-13.
//  Copyright (c) 2012年 ZhangYiCheng. All rights reserved.
//

#import "CollectionHeadView.h"

@implementation CollectionHeadView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 40)];
        _label.text = @"This is HeadView";
        _label.textAlignment = NSTextAlignmentCenter;
        _label.font = [UIFont systemFontOfSize:20];
        _label.backgroundColor = [UIColor colorWithWhite:0.7 alpha:0.6];
        
        [self addSubview:_label];
    }
    return self;
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
}
*/

@end

最后就可以实现效果，点击时间的类没有写，自己可以实现的，这样实现九宫格真是太方便了，以上是看别的代码学习的，