通过UICollectionView创建网格布局

  在这个教程中，我们经构建一个件的程序,以网格布局的俄方式现实图片集，你将学到下面的信息：

1.  UICollectionView简介
   

2. 如何是使用UICollectionView构建一个简单的基于网格的布局

3. 自定义Collection Cell背景
   

  UICollectionView 基础

     UICollectionView类似UITableView，尽管UITableView管理Collection数据，并以单栏布局的形式在屏幕上显示，UICollection类为开发人员提供了灵活的使用方法，可以自定义布局。在默认情况下，通过自带的SDK,并通过UICOllectionViewFlowLayout类来组织项目与可选部分的页眉，页脚试图。

      该UICollectionView类管理数据项的有序集合，并使用自定义的布局呈现它们。收集意见提供相同的一般功能表视图，除了集合视图能够支持更多的不仅仅是单一的列布局。集合视图实现多列网格，平铺布局，圆形布局，还有更多的可定制的布局。如果你想要，你甚至可以动态改变一个集合视图的布局。

    UICollectionView是由下面几个部分组成：

•    Cell－UICollectionViewCell实例，就像UITableViewCell,一个单元格代表收集的单个项目，这些Cell将是组织布局的主要内容，如果UICollectionViewFlowLayout被使用时，Cell将被排列成格子状。

• 补充一件－可选。通常用于实现section的header和footer视图

• 装饰视图－decoration View是用于装饰的

创建一个网格布局简单APP

  为了更好的理解UICollectionView 工作。让我们开始创建一个简单的app，打开Xcode选择SingleView application, 把工程命名为" RecipePhoto"。

   设计Collection View

    把storyboard中的默认的视图控制器删除，作为替代，从object library添加一个CollectionView Controller

在"Size Inspector",改编成下面的设置

                        改变Collection View Cell的尺寸

下一步，选择Collection View Cell并设置identifier改为"cell"

谈后添加一个Image View

编辑Collection View

  创建新文件"New File"，选择一个新类继承自UICollectionViewController命名为"RecipeCollectionViewController"。如下图所示：

回到Storyboard，在Custom Class中的class栏选择CollectionViewController，如下图所示：

   就像我们所说的UICollectionView的使用和UITableView很相似。如果你使用过UITableViewDataSource协议，那么你会很快熟悉UICollectionViewDataSource协议，同样都是用来加载数据的，最后，我们必须实现这个collectionView:numberOfItemsInSection:和collectionView:CellForItemAtIndexPath:方法。

     下载让我们到RecipeCollectionViewController类中去写代码，首先下载这里download this image pack的图片，并且解压放到Xcode 工程中。

       再回到RecipeCollectionViewController.m文件中为图像文件声明一个数组：

@interface RecipeCollectionViewController () {

         NSArray *recipePhotos;

}

    初始化ViewDidLoad方法

   - (void)

{

     [super viewDidLoad];

  //初始化 recipe image 数组

     recipeImages = [NSArray arrayWithObjects:@"angry_birds_cake.jpg",@"creme_brelee.jpg", @"egg_benedict.jpg", @"full_breakfast.jpg", @"green_tea.jpg", @"ham_and_cheese_panini.jpg", @"ham_and_egg_sandwich.jpg", @"hamburger.jpg", @"instant_noodle_with_egg.jpg", @"japanese_noodle_with_pork.jpg", @"mushroom_risotto.jpg", @"noodle_with_bbq_pork.jpg", @"starbucks_coffee.jpg", @"thai_shrimp_cake.jpg", @"vegetable_curry.jpg", @"white_chocolate_donut.jpg",]

}

   接下来我们实现UICollectionViewDataSource协议强制实现的两个方法：

 - (NSInteger)CollectionView:(UICollectionView *)collectionVIew numberOfItemsInSection:(NSInteger)secion

{

     return recipeImages.count;

}

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

{

       static NSString *identifier = @"Cell";

       UICollectionViewCell *cell = [CollectionView dequeueResusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];

       UIImageView *recipeImageView = (UIImageVIew *)[Cell ViewWithTag:100];

       recipeImageView.image = [UIImage imageNamed:[recipeImages ObjectAtIndex:indexPath.row]];

       return cell;

}

 collectionView:numberOfItemInSecion:方法是用来返回recipe image的图片的数量的。

 cellForItemAtIndexPah:方法是为collection View cells提供数据的。首先我们顶一个cell标识符，然后使用CollectionView复用cell。dequeueResuableCellWithRequesIdentifier:方法将自动创建一个单元格或复用单元格，最终，我们将通过标记值获得图像并分配图像。

   下图就是我们完成运行后的显示

  定制CollectionView cell的背景

     咋样，UICollectionView 是不是很赞？利用很少的代码我们就能做出一个件的相片app。但是如果你像为你的的图片添加frame？接下来你会发现，利用collection View cell定制背景是很简单的。事实上UICollectionViewCell提供了三种不同的视图，其中就包括背景这一项，还有selected background 和 content view,下面的图片将会最好的说明这一点：

• Background View -cell的背景

• Selected Background view －当被选择的单元格的背景图。当用户选择该单元格，这个选择的背景视图将上述背景视图分层。

• Content View - 很明显，这里显示的是cell的内容

 我们已经使用content View显示出了图片，我们将使用背景视图来显示相框，就在刚才你下载的文件中为："pic_frame.png"。

  再回到Stroyboard中选择image view，选择 X为5和Y为8，就像下图显示的一样

   在RecipeCollectionVIewController.m文件中的CellForItemAtIndexPath:方法中添加下面的代码

  cell.backgroundVIew = [[UIImageView alloc] initWithImage [UIImage imageNamed:@"photo-frame.png"]];

 接下来运行的app你就会看到像下面的图片显示

完整代码在这里here。