table view應該是iOS應用中最常用的UI element。最好的例子就是iPhone自帶的一些應用，如電話，郵件，設置等。TED，Google+，Airbnb，微信等等都是很好例子。

創建一個項目

• 項目名稱為SimpleTable，模板為"Single View application"

設計UI

• 選中Main.storyboard，從Object library中拖動Table View進入視圖
• 改變Table View的大小至整個view，修改屬性Prototype Cells為1
• 選中Table View Cell，修改Style為Basic，Identifier為Cell。table view cell的標準類型有 basic、right detail、left detail 和 subtitle，當然還有定制類型custom。
• 選中Table View，設置四個spacing約束，上下左右的距離都設置為0

為UITableView添加兩個協議

• Object library中的每一UI component都是對應一個class，如 Table View就是對應UITableView。可以通過點擊并懸停在UI component上查看對應的class和介紹。
• 在ViewController.swift文件的UIViewController后，添加代碼, UITableViewDataSource, UITableViewDelegate，表示ViewController類實現了UITableViewDataSource，UITableViewDelegate兩個協議。
  出現紅色感嘆號，這是xcode的問題提示，點擊參看問題描述：

Type 'ViewController' does not conform to protocol
'UITableViewDataSource'

問題描述為ViewController不符合協議UITableViewDataSource。通過command+點擊 （最新的xcode9變成了command+option+點擊）到UITableViewDataSource中看看你：

public protocol UITableViewDataSource : NSObjectProtocol {

    
    @available(iOS 2.0, *)
    public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int

    
    // Row display. Implementers should *always* try to reuse cells by setting each cell's reuseIdentifier and querying for available reusable cells with dequeueReusableCellWithIdentifier:
    // Cell gets various attributes set automatically based on table (separators) and data source (accessory views, editing controls)
    
    @available(iOS 2.0, *)
    public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

    
    @available(iOS 2.0, *)
    optional public func numberOfSections(in tableView: UITableView) -> Int // Default is 1 if not implemented

    
    @available(iOS 2.0, *)
    optional public func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? // fixed font style. use custom view (UILabel) if you want something different

    @available(iOS 2.0, *)
    optional public func tableView(_ tableView: UITableView, titleForFooterInSection section: Int) -> String?

    
    // Editing
    
    // Individual rows can opt out of having the -editing property set for them. If not implemented, all rows are assumed to be editable.
    @available(iOS 2.0, *)
    optional public func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool

 ...

• UITableViewDataSource協議中定義了很多方法，除了前兩個方法沒有optional其它都有，有的表示這個方法不一定要實現，沒有的就一定要實現，把這個兩個方法實現了，問題提示就會消失。這兩個方法從名字和返回值類型也大概能知道做了什么：

  • public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 一個section有幾行，也就是一個section有幾個UITableViewCell， section就是一組UITableViewCell的意思，Table View可以定義多個section，默認是一個。
  • public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 返回每一行的 UITableViewCell

• 在ViewController.swift中定義一個變量restaurantNames，類型是數組，表示一系列餐館的名字。

var restaurantNames = ["Cafe Deadend", "Homei", "Teakha", "Cafe Loisl", "PetiteOyster", "For Kee Restaurant", "Po's Atelier", "Bourke Street Bakery", "Haigh'sChocolate", "Palomino Espresso", "Upstate", "Traif", "Graham Avenue Meats AndDeli", "Waffle & Wolf", "Five Leaves", "Cafe Lore", "Confessional","Barrafina", "Donostia", "Royal Oak", "CASK Pub and Kitchen"]

• 定義UITableViewDataSource的兩個方法：

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 1
        return restaurantNames.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) ->
        UITableViewCell {
        // 2
        let cellIdentifier = "Cell"
        let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier,
                                                     for: indexPath)
        // 3
        cell.textLabel?.text = restaurantNames[indexPath.row]
        return cell
            
    }

• 1 餐館的數目就是section的行數
• 2 "Cell"與之前定義的UITableViewCell的Identifier屬性是對應的。dequeueReusableCell方法是產生一個UITableViewCell。
• 3 UITableViewCell中有可算屬性textLabel，其實就是一個UILabel，由于是可選屬性，調用時也用可選鏈式調用cell.textLabel?.text

連接 DataSource 和 Delegate

運行app，沒有數據顯示。盡管上面已經在代碼中讓ViewController繼承了UITableViewDataSource, UITableViewDelegate，但storyboard并不知道。

• 在document outline中選擇Table View，使用control-drag到View Controller，在彈出框中選擇dataSource。同樣的方法選擇delegate

• 確認連接是否成功。選中Table View，在connetion檢查器中查看；或者直接在document outline中右擊Table View
  

• 運行app

  
  

添加圖片到Table View

• 從simpletable-image1.zip下載圖片，解壓后一起拖到asset catalog
• 在ViewController.swift的tableView(_:cellForRowAtIndexPath:)方法的return cell前添加代碼cell.imageView?.image = UIImage(named: "restaurant")。使每個UITableViewCell的image都是一樣的。

隱藏狀態欄

頂部狀態來和table view 數據重疊了，只要在ViewController加一段代碼就可以：

override var prefersStatusBarHidden: Bool {
    return true
}

prefersStatusBarHidden是父類UIViewController中的屬性，所以要加 override，表示重寫了。

不同的Cell對應不同的圖片

• 從simpletable-image2.zip下載圖片，解壓后一起拖到asset catalog
• 修改ViewController.swift的tableView(_:cellForRowAtIndexPath:)為：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) ->
        UITableViewCell {
        let cellIdentifier = "Cell"
        let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier,
                                                     for: indexPath)
        // Configure the cell...
        let restaurantName = restaurantNames[indexPath.row]
        cell.textLabel?.text = restaurantName
        // 1
        let imageName = restaurantName.lowercased().replacingOccurrences(of: " ", with: "")
        if let image = UIImage(named: imageName) {
            cell.imageView?.image = image
        } else {
            cell.imageView?.image = UIImage(named: "restaurant")
        }
        
        return cell
            
    }

• 1 把菜館名字字符串先修改成小寫，然后去空格

• 最終結果

代碼

Beginning-iOS-Programming-with-Swift

說明

此文是學習appcode網站出的一本書 《Beginning iOS 10 Programming with Swift》 的一篇記錄