練習 2: Simple Table View [Swift 3.0]

1. 新增 Single Table View Project

2. 拖曳 Table View 物件至 View Controller，並設定 Prototype Cell 的值為 1

3. 點選 Table View Cell，設定其 Identifier 的值為 Cell，Style = Basic

4. UITableView 採用 UITableViewDataSource 與 UITableViewDelegate 兩個協定 Protocol

class ViewController: UIViewController, UITableViewDelegate, UITableViewDelegate {｝

6. 關於 UITableViewDataSource，我們必須實做的方法：

tableView(_:numberOfRowsInSection:)
tableView(_:cellForRowAtIndexPath:)

完整 ViewController.swift 如下：

//

//  ViewController.swift

//  MySimpleTableViewDemo

//

//  Created by Elvis Meng on 2017/3/23.

//  Copyright © 2017年 Elvis Meng. All rights reserved.

//

import UIKit

var objNames = ["obj1","obj2","obj3","obj4","obj5","obj6","obj7","obj8","obj9","obj10","obj11","obj12","obj13","obj14","obj15","obj16","obj17","obj18","obj19","obj20"]

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    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.

    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section:Int) -> Int {

        return objNames.count

    }

    func tableView(_ tableView:UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cellIdentifier = "Cell"

        let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath)

        cell.textLabel?.text = objNames[indexPath.row]

        

        return cell

    }

}

7. 整合 UI / Code，將 UI 的 dataSource / delegate 的連接點

8. 測試

點選滑鼠右鍵，然後下拉 scroll down

若要在每個 cell 中顯示圖片 image：

1. 將圖片 image 拖曳至 Access.xcassets 目錄夾中

2. 在 Image View 屬性中，設定 Image 的值為 “英文字母“，此時這 image 加入至 Content View 中 （ 因為 Cell  的 style 為 Basic，其涵 Image View)

3. 修改 Code

import UIKit

var objNames = ["obj1","obj2","obj3","obj4","obj5","obj6","obj7","obj8","obj9","obj10","obj11","obj12","obj13","obj14","obj15","obj16","obj17","obj18","obj19","obj20"]

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    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.

    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section:Int) -> Int {

        return objNames.count

    }

    func tableView(_ tableView:UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cellIdentifier = "Cell"

        let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath)

        cell.textLabel?.text = objNames[indexPath.row]

        cell.imageView?.image = UIImage(named: "英文字母")

        

        return cell

    }

}

4. 測試

若想每個 Cell 正確顯示不同的 image，需更改下列 code。別忘了 objNames 中的名稱必須與 image 的命名一致。

var objNames = ["英文字母","英文字母","obj3","obj4","obj5","obj6","obj7","obj8","obj9","obj10","obj11","obj12","obj13","obj14","obj15","obj16","obj17","obj18","obj19","obj20"]

func tableView(_ tableView:UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cellIdentifier = "Cell"

        let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath)

        cell.textLabel?.text = objNames[indexPath.row]

        cell.imageView?.image = UIImage(named: objNames[indexPath.row])

        

        return cell

    }

測試：

/end