最终效果图:

代码片段:

DealListController继承自UICollectionViewController

self.view已经包含了一个UICollectionView

并且数据源和代理已经是当前控制器self

//
//  DealListController.m
//  帅哥_团购
//
//  Created by beyond on 14-8-14.
//  Copyright (c) 2014年 com.beyond. All rights reserved.
//  点击dock上面的【团购】按钮对应的控制器,上面是导航栏,导航栏右边是searchBar,导航栏左边是一个大按钮(TopMenu)(内部由三个小按钮组成<TopMenuItem>)

#import "DealListController.h"
// 导航栏左边是一个大按钮(顶部菜单)
#import "TopMenu.h"

#define kItemW 250
#define kItemH 250

@implementation DealListController
// 覆盖控制器的init方法
- (id)init
{
    // 创建一个流布局
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    // 设置流布局里面的每一个格子宽和高,即每一个网格的尺寸
    layout.itemSize = CGSizeMake(kItemW, kItemH);
    
    // 调用父类UICollectionViewController的initWithCollectionViewLayout方法,(self这儿找不到,会到父类里去找方法)
    return [self initWithCollectionViewLayout:layout];
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 1.顶部导航栏的基本设置
    [self setNavigationBar];
    
    // 2.collectionView的基本设置
    [self setCollectionView];
}

// 2.顶部导航栏的基本设置
- (void)setNavigationBar
{
    
    // 1.右边的搜索框
    UISearchBar *s = [[UISearchBar alloc] init];
    s.frame = CGRectMake(0, 0, 210, 35);
    s.placeholder = @"请输入商品名、地址等";
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:s];
    
    // 2.左边的菜单栏
    TopMenu *top = [[TopMenu alloc] init];
    // 重要,TopMenu里面的item点击后,创建的PopMenu将要添加到哪儿去???就是本控制器的view
    top.controllerView = self.view;
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:top];
    
    
}
// 3.collectionView的基本设置
- (void)setCollectionView
{
    // 1.设置collectionView的背景色,(不像tableViewController,本控制器的view是UIView,在UIView里面再添加的collectionView)
    self.collectionView.backgroundColor = kGlobalBg;
    
    // 2.重要~~~注册cell要用到的xib
    [self.collectionView registerNib:[UINib nibWithNibName:@"DealCell" bundle:nil] forCellWithReuseIdentifier:@"DealCell"];
    
    // 3.设置collectionView永远支持垂直滚动,为下拉刷新准备(弹簧)
    self.collectionView.alwaysBounceVertical = YES;
    
}

// 4.重要~~~因为在控制器创建时,宽默认是768,高默认是1024,不管横竖屏
// 只有在viewWillAppear和viewDidAppear方法中,可以取得view最准确的(即实际的)宽和高（width和height）
- (void)viewWillAppear:(BOOL)animated
{
    // 默认计算layout
    [self didRotateFromInterfaceOrientation:0];
}



#pragma mark - 父类方法

// 拦截,屏幕即将旋转的时候调用(控制器监控屏幕旋转)
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    log(@"屏幕即将旋转");
}

// 拦截,屏幕旋转完毕的时候调用
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    // 1.取出创建CollectionViewController时传入的的UICollectionViewFlowLayout
    UICollectionViewFlowLayout *layout = (UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout;
    
    
    // 2.计算间距
    CGFloat v = 0;
    CGFloat h = 0;
    CGFloat height = self.view.frame.size.height -44;
    CGFloat width = self.view.frame.size.width;
    if (UIInterfaceOrientationIsLandscape(self.interfaceOrientation)
        ) {
        // 横屏的间距
        v = (height - 2 * kItemH) / 3;
        h = (width - 3 * kItemW) / 4;
        
    } else {
        // 竖屏的间距
        v = (height - 3 * kItemH) / 4;
        h = (width - 2 * kItemW) / 3;
    }
    // 3.动画调整格子之间的距离
    [UIView animateWithDuration:4.0 animations:^{
        // 上 左 下 右 四个方向的margin
        layout.sectionInset = UIEdgeInsetsMake(v, h, v, h);
        // 每一行之间的间距
        layout.minimumLineSpacing = v;
    }];
}



#pragma mark - collectionView代理方法
// 共有多少个Item(就是格子Cube)
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 6;
}
// 生成每一个独一无二的格子
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellID = @"DealCell";
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
    
    // 设置独一无二的数据
    return cell;
}

CollectionView中的格子一般外观一致,可以用xib

DealCell.xib