[Xcode 實際操做]3、視圖控制器-(12)在Storyboard中使用集合控件

目錄：[Swift]Xcode實際操做

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

在控制器根視圖上點擊鼠標，以選擇該根視圖。

如今往根視圖中添加一個集合視圖。

點擊【庫面板】圖標，打開控件庫面板

在控件庫搜索框內，輸入控件名稱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 }