經過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。