经过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。