老规矩!!!!

先来看效果:

1、网格视图的概念

UICollectionView（网格视图）是IOS6.0新增的一种UI控件，从直观上看，它非常像一个多列的表格控件，iBooks应用其实就是一个UIColectionView应用。

UICollectionView继承了UIScrollview，它具有UIScrollView的功能，UIScrollView中主要封装了多个UICollectionViewCell单元格控件，因此，UICollectionView默认可以对单元格进行滚动。

UICollectionView的数据加载与UITableView极其相似，它也有2个委托对象属性（UICollectionViewDataSource、UICollectionViewDelegate）

2、UICollectionView的用法

（1）程序不允许直接创建UICollectionViewCell单元格对象，必须先为UICollectionView注册单元格控件

（2）实现collectionView:numberOfItemsInSection：方法，该方法返回一个NSInteger类型，该返回值决定UICollectionView有多少个单元格

（3）实现collectionView:cellForItemAtIndexPath:方法，该方法返回一个UICollectionViewCell，该返回值决定每个单元格的内容。

（4）实现collectionView:layout:sizeForItemAtIndexPath :方法，该方法返回值返回一个CGSize，该返回值决定每个单元格的大小

（5）实现collectionView:layout:minimumLineSpacingForSectionAtIndex ：方法，返回一个CGFloat，决定每行之间的间隔像素。

（6）实现collectionView:layout:minimumInteritemSpacingForSectionAtIndex ：方法，返回一个CGFloat，决定每列之间的间隔像素。

（7）实现collectionView:layout:insetForSectionAtIndex :方法，该方法返回一个UIEdgeInsets，该返回值决定每个单元格与上、下、左、右的间距

代码:

ViewController.m

#import "ViewController.h"

#import "CollectionViewCell.h"

#import "HeaderCollectionReusableView.h"

#import "FooterCollectionReusableView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

// 创建流布局对象

UICollectionViewFlowLayout *theFlow = [[UICollectionViewFlowLayout alloc]init];

// 设置单元格的大小

theFlow.itemSize = CGSizeMake(80, 100);

// 设定滚动方向

theFlow.scrollDirection = UICollectionViewScrollDirectionVertical;

// 最小列间距

theFlow.minimumInteritemSpacing = 10;

// 最小列间距

theFlow.minimumLineSpacing = 10;

// 设置分区边距

theFlow.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);

// 设置页眉的尺寸

theFlow.headerReferenceSize = CGSizeMake(40, 30);

// 设置页脚的尺寸

theFlow.footerReferenceSize = CGSizeMake(40, 30);

// 创建网格对象

UICollectionView *theColletion = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:theFlow];

// 设置代理

theColletion.delegate = self;

theColletion.dataSource = self;

// 设置可以滚动

theColletion.pagingEnabled = YES;

// 添加到视图上

[self.view addSubview:theColletion];

// 为网格注册单元格类

[theColletion registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"collectionCell"];

// 为网格注册页眉类

[theColletion registerClass:[HeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];

// 为网格注册页脚类

[theColletion registerClass:[FooterCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];

}

#pragma -

#pragma mark - UICollectionViewDelegate

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{

return 2;

}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

return 10;

}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

CollectionViewCell *theCell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collectionCell" forIndexPath:indexPath];

// 设置显示数据

theCell.theImg.image = [UIImage imageNamed:@"3.jpg"];

theCell.theLabel.text = @"666";

return theCell;

}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

{

UICollectionReusableView *theReusable = nil;

if ([kind isEqualToString:UICollectionElementKindSectionHeader])

{

theReusable = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];

HeaderCollectionReusableView *theHeader = (HeaderCollectionReusableView *)theReusable;

theHeader.theTitleLabel.text = @"页眉";

}

else if ([kind isEqualToString:UICollectionElementKindSectionFooter])

{

theReusable = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer" forIndexPath:indexPath];

FooterCollectionReusableView *theFooter = (FooterCollectionReusableView *)theReusable;

theFooter.theTitleLabel.text = @"页脚";

}

return theReusable;

}

@end

CollectionViewCell.h  继承于UICollectionViewCell

@property(nonatomic,strong)UIImageView *theImg;

@property(nonatomic,strong)UILabel *theLabel;

CollectionViewCell.m

- (instancetype)initWithFrame:(CGRect)frame

{

if (self = [super initWithFrame:frame])

{

[self addSubview:self.theImg];

[self addSubview:self.theLabel];

}

return self;

}

- (UIImageView *)theImg

{

if (!_theImg)

{

_theImg = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 80, 80)];

}

return _theImg;

}

- (UILabel *)theLabel

{

if (!_theLabel)

{

_theLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 80, 80, 20)];

_theLabel.font = [UIFont systemFontOfSize:18];

_theLabel.textAlignment = NSTextAlignmentCenter;

}

return _theLabel;

}

HeaderCollectionReusableView.h 继承于UICollectionReusableView

@property(nonatomic,strong)UILabel *theTitleLabel;

HeaderCollectionReusableView.m方法与上述一致!!

同理FooterCollectionReusableView.h继承于UICollectionReusableView

@property(nonatomic,strong)UILabel *theTitleLabel;

FooterCollectionReusableView.m方法与上述一致!!

在最后添加一个适配横屏的代码(第三方Masonry)

导入头文件

#import <Masonry.h>

在添加到视图之后添加

[theColletion mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(self.view);

}];

谢谢!!!