最终效果图:
代码片段:
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