本文將演示集合控制元件在故事板中的使用。

在控制器根檢視上點選滑鼠，以選擇該根檢視。

現在往根檢視中新增一個集合檢視。

點選【庫面板】圖示，開啟控制元件庫面板

在控制元件庫搜尋框內，輸入控制元件名稱Collection View，在控制元件庫中，快速定位目標控制元件。

然後在按鈕控制元件上雙擊，匯入所需的控制元件。

點選【庫面板】圖示，開啟控制元件庫面板。

接著將集合物件，移動到檢視控制器的適當位置。

在集合檢視定界框右下角處按下手指，並向下拖動，使集合檢視的尺寸和根檢視相同。

接著點選【尺寸檢查器】圖示，開啟尺寸檢查器面板，

Cell Size

【Width】:輸入集合檢視單元格寬度數值，

【Height】:輸入集合檢視單元格高度數值，

選擇集合檢視的單元格，點選【庫面板】圖示，開啟控制元件庫面板。

需要往集合檢視的單元格中，新增一個影象檢視。

在控制元件庫搜尋框內，輸入控制元件名稱Image View，在控制元件庫中，快速定位目標控制元件。

然後在按鈕控制元件上雙擊，匯入所需的控制元件。

【X】:影象檢視在單元格內的橫向座標值。

【Y】:影象檢視在單元格內的縱向座標值。

【Width】:影象檢視寬度數值，

【Height】:影象檢視高度數值，

開啟【屬性見哈起面板】

然後在【Tag】標誌值，輸入影象檢視的標誌值，

可以在程式碼中，通過標誌值，獲得影象檢視物件。

在故事板文件框架區，選擇集合檢視的單元格。

在【Identifier】識別符號輸入框中，輸入單元格的可重用識別符號。

在故事板文件框架區，選擇集合檢視。

在集合檢視控制元件上按下滑鼠右鍵，然後拖動到檢視控制器圖示，設定集合檢視的資料來源。

在彈出的列表中，選擇【dataSource】資料來源選項，設定集合檢視的資料來源，為當前的檢視控制器

在集合檢視控制元件上按下滑鼠右鍵，然後拖動到檢視控制器圖示，設定集合檢視的代理。

在彈出的列表中，選擇【delegate】代理選項，設定表格的代理。

點選【隱藏或顯示檢查器】按鈕，隱藏檢查器面板。

在專案導航區，開啟檢視控制器程式碼檔案【ViewController.swift】

 1 import UIKit
 2 //給根檢視控制器類，新增兩個代理協議
 3 //一個使集合檢視的資料來源協議，一個使集合檢視的代理協議。
 4 class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
 5 
 6     var images :Array<String>!
 7     
 8     override func viewDidLoad() {
 9         super.viewDidLoad()
10         // Do any additional setup after loading the view, typically from a nib.
11 
12         //建立一個數組
13         //該數組裡面的資料，將作為集合資料的來源。
14         images = ["Pic1", "Pic2", "Pic3", "Pic4", "Pic5", "Pic6", "Pic7", "Pic8", "Pic9"]
15     }
16 
17     //新增一個集合檢視代理方法，用來設定集合檢視的單元格數量。
18     func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
19         //這裡使用陣列的長度，作為集合檢視的單元格數量
20         return images.count
21     }
22     
23     //新增一個集合檢視代理方法，用來初始化和返回集合檢視的單元格，是最最重要的一個方法。
24     func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
25         //建立一個字串，作為單元格的識別符號，
26 25      //也就是上文在故事板中，給單元格控制元件設定的那個重用識別符號。
27         let cellIdentifier = "reusedCell"
28         //單元格的識別符號，可以看作是一種重用機制，此方法可以從所有已經開闢記憶體的單元格里面，
29 28      //選擇一個具有同樣識別符號的、空閒的單元格。
30         let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath)
31         
32         //通過在故事板中設定的標誌值，獲得單元格中的影象檢視控制元件。
33         let imageView = cell.viewWithTag(1) as! UIImageView
34         //設定影象檢視預設為半透明
35         imageView.layer.opacity = 0.5
36         //根據表格行的編號，從陣列中獲得對應的影象名稱
37         let imageName = images[(indexPath as NSIndexPath).row]
38         //將載入後的影象，指定給影象檢視
39         imageView.image = UIImage(named: imageName)
40         
41         //最後返回設定好的單元格物件
42         return cell
43     }
44     
45     //新增一個代理方法，用來處理單元格的點選事件
46     func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
47         //根據單元格的編號，獲得被點選的單元格
48         let cell = collectionView.cellForItem(at: indexPath)
49         //通過在故事板中的標誌值，獲得單元格中的影象檢視
50         let view = cell?.viewWithTag(1)
51         //將影象檢視的透明度，設定為完全不透明。
52         view?.layer.opacity = 1.0
53     }
54 
55     override func didReceiveMemoryWarning() {
56         super.didReceiveMemoryWarning()
57         // Dispose of any resources that can be recreated.
58     }
59 }