[Xcode 實際操做]3、視圖控制器-(11)在Storyboard中使用表格控件

目錄：[Swift]Xcode實際操做

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

點擊【顯示或隱藏檢查器按鈕】，再界面右側打開檢查器面板。

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

如今往根視圖中添加一個表格視圖。

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

在控件庫搜索框內，輸入控件名稱Table View，在控件庫中，快速定位目標控件。

而後在按鈕控件上雙擊，導入所需的控件。

在表格定界框的右下角按下鼠標，並向右下角拖動，以調整表格控件的尺寸。

而後點擊庫圖標，再次打開控件庫面板。添加一個單元格控件：Table View Cell

將導入的單元格控件，拖動到表格視圖裏。即在根視圖左側的文件樹中拖動文件。

接着選擇表格視圖控件，點擊【尺寸檢查器】圖標，打開尺寸檢查器面板。

【Row Height】:60（行高）

接着選擇單元格控件，一樣設置單元格的高度。

【Row Height】:60（行高）

點擊選擇單元格的內容視圖，接着往單元格的內部，添加一些新的控件。

點擊【庫面板】圖標，打開控件庫面板，以一樣的方式，將圖像視圖添加到單元格中。

在寬度輸入框內，輸入圖像視圖的寬度數值。

在高度輸入框內，輸入圖像視圖的高度數值。

在X輸入框內，輸入圖像視圖在單元格內的橫向座標值

在Y輸入框內，輸入圖像視圖在單元格內的縱向座標值

點擊【屬性檢查器】圖標，進入屬性設置面板。

【Image】:輸入圖片的名稱，設置圖像視圖默認顯示的圖片。

點擊【庫面板】圖標，打開控件庫面板，以一樣的方式，將標籤控件添加到單元格中。

將添加的標籤對象拖動至單元格內適當位置，鼠標在標籤訂界框上按下，調整標籤的寬度。

【Tag】:在標識輸入框內，設置標誌值，經過標誌值，就能夠在代碼中獲取該標籤控件。

【重要】在故事板元素列表中，選擇根視圖中的表格控件，如今給表格添加代理對象：

在表格控件上按下鼠標右鍵，而後拖動到視圖控制器圖標，

在彈出的列表中，選擇【dataSource】數據源選項，設置表格的數據源，爲當前的視圖控制器

繼續在表格上按下鼠標的右鍵，而後拖動到視圖控制器。

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

而後選擇單元格控件，設置單元格的重用標識符。

【Identifier】:reusedCell

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

點擊打開視圖控制器的代碼文件。

 1 import UIKit
 2 //給視圖控制器類添加兩個代理協議：
 3 //一個是表格視圖的數據源協議，另外一個是表格視圖的代理協議。
 4 class ViewController: UIViewController,UITableViewDelegate, UITableViewDataSource {
 5 
 6     //建立一個數組，
 7     //該數組裏面的數據，將做爲表格數據的來源。
 8     var fruits = ["Apple", "Banana", "Chinese Date", "Downy Picch", "Filbert", "Gingko", "Hawthorn", "Kumquat"]
 9     
10     override func viewDidLoad() {
11         super.viewDidLoad()
12         // Do any additional setup after loading the view, typically from a nib.
13     }
14     
15     //添加一個表格代理方法，用來設置表格的行數。
16     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
17         //這裏設置將數組的長度做爲表格的行數
18         return fruits.count
19     }
20     
21     //添加一個代理方法
22     //用來初始化和返回表格視圖的單元格，是最主要的一個代理方法。
23     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
24         //建立一個字符串，做爲單元格的標識符，
25         //也就是上文在故事板中，給單元格控件設置的那個重用標識符。
26         let identifier = "reusedCell"
27         //單元格的標識符，能夠看做是一種重用機制，此方法能夠從全部已經開闢內存的單元格里面，
28         //選擇一個具備一樣標識符的、空閒的單元格。
29         let cell = tableView.dequeueReusableCell(withIdentifier: identifier, for: indexPath)
30         
31         //經過在故事板中設置的標誌值，得到單元格中的標籤控件。
32         let label = cell.viewWithTag(1) as! UILabel
33         //根據表格行的編號，從數組中得到對應的字符串，從而設置標籤的文字內容。
34         label.text = fruits[(indexPath as NSIndexPath).row]
35         
36         //最後返回設置好的單元格對象。
37         return cell
38     }
39 
40     override func didReceiveMemoryWarning() {
41         super.didReceiveMemoryWarning()
42         // Dispose of any resources that can be recreated.
43     }
44 }