今天要來練習新的東西 - TableView

據同事說明，TableView 是最常用到的 View 之一

在我們的實戰開發中也會用到 TableView

因此今天就先簡單的來建立出單頁純顯示資料的 TableView

TableView 的概念大概是如下圖:

長得有點像 ListView 但是每一行又可以多切開，放一些東西

每一行都稱之為一個 TableViewCell

今天就來要簡單寫一個資料已經預先定義好，並且會顯示在 view 上面的 TableView

要進行下去之前當然就先開一個新的練習專案囉

開啟完專案後，首先第一件事情就是進 storyboard

選擇 TableView 拉進 storyboard 裏

接著再選擇 TableViewCell 拉進 TableView 中

透過此圖，我們了解到可以打開 storyboard 的 tree 來看看它們之間的關係

下面此步驟很重要，資料的連接就靠這條線:

先選取 TableView (可以使用階層樹或是點擊 storyboard)，然後選擇右方的 connection inspector (右上角的最右邊的那一個按鈕)

裡頭有個 dataSource 以及 delegate

我們先按住 dataSource 右邊的空心圓按鈕，拖曳拉到 storyboard 中的 ViewController，如上圖所示

這樣子等等在程式碼中產生的資料才會有和 storyboard 的 UI 做連結

最後一個和 storyboard 相關的操作是將 storyboard 的 TableView 和 程式碼做連結，好方便我們在程式碼中對 storyborad 的 TableView 做操作

之前就有做過類似的事情了，就是按著 ctrl + 拖曳拉進程式碼中：

給他個名稱：

這時候的程式應該會長這樣:

import UIKit

class ViewController: UIViewController {

    @IBOutlet var tableSample: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

再來就是程式的部分了

先直接貼出 ViewController 的程式碼:

import UIKit

class ViewController: UIViewController, UITableViewDataSource {

    @IBOutlet var tableSample: UITableView!
    
    var items: [String] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        for var i = 0 ; i <= 100 ; i++ {
            items.append("\(i)")
        }
        
        self.tableSample.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.items.count
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
        
        var cell: UITableViewCell = self.tableSample.dequeueReusableCellWithIdentifier("cell") as UITableViewCell
        cell.textLabel?.text = self.items[indexPath.row]
        
        return cell
    }
}

這中間了幾件事:

viewDidload 產生一個 0 ~ 100 的陣列，並且向 tableSample 註冊了一個 cell 物件，並且設定該物件的 identifier 為 “cell”

接著下面兩個 function 是實作顯示資料以及資料行數的部分:

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
	return self.items.count
}
    
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
        
	var cell: UITableViewCell = self.tableSample.dequeueReusableCellWithIdentifier("cell") as UITableViewCell
	cell.textLabel?.text = self.items[indexPath.row]
        
	return cell
}

第一個 tableView 的方法是回傳這個 tableView 的資料有多少筆

第二個 tableView 則是根據每一行的值，產生一個 cell，將陣列值丟進該 cell 的文字，並且回傳

這樣理論上就會顯示 0 ~ 100 個 cell，裡面的值分別是依據順序而顯示號碼

注意在程式的 class 那一行

class ViewController: UIViewController, UITableViewDataSource {

有多一個 UITableViewDataSource, 因為我們要將資料丟到 UITableView 中，因此需要使用繼承該類別

等明天我們要做換頁功能時，就要加入其他的類別了

程式撰寫好後，執行看看吧!

應該就會長這樣子喲:

Back to posts