今天要來學習如何自訂Cell的格式與內容

1. 首先將prototype在 attributes inspector 中將 style 從 “basic” -> “custom”
   
2. 為了容納更大的縮圖，需要修改cell高度 ,
   2.1 將restaurant Table view controller 的 “Row height “改成 80
   2.2 將 cell 的 “Row height “改成 80 並且勾選 “Custom”
   
3. 高度修改後，就要開始將元件加入 Cell 中
   3.1 將一個 “Image View” 拉入 cell 並且修改長寬以及位置
   x : 14 ，y : 10 ， Width : 60 ， Height : 60
   
   3.2 將三個 Label 拉入 cell 並且依序命名為 “Name”、“Location”、“type”。
   
   3.3 將三個 label 合併成一個 stack View，配合Ctrl點選三個 label 後按下 “Embed in stack”
   3.4 同樣的動作，我們將 “image view” 與 “label ”水平合併。 配合 Ctrl 點選 image view與 label 後 按下” embed in stack “
   
   3.5 修改這個 stack view 的邊界條件
   上: 2 、下: 1.5、左: 6、右: 0
   
   3.6 固定 image view 的長、寬
   在文件大綱視圖中 點擊 “image view”並且按著 “Ctrl” 配合箭頭水平拖移，會彈出一個選單，點選 “Width”與”Height”
   

到目前的設定為止，做出來的樣式

4. 接下來，我們要為 Cell 自定一個類別
   4.1 “New” 一個 “Cocoa Touch Class” 並命名為 :::”RestaurantTableViewCell”::: 並設定 Subclass of 為 “UITableViewCell”
   4.2 點選 Next 儲存專案後，在剛剛建立的 RestaurantTableViewCell.swift中加入

@IBOutlet var thumbnailImageView: UIImageView!
@IBOutlet var nameLabel:UILabel!
@IBOutlet var locationLabel : UILabel!
@IBOutlet var typeLabel : UILabel!

這代表現在有四個屬性可以提供我們設定
4.3 讓我們將這個cell與storyboard連結
點選 視圖中 cell 並在 “ show the identity inspector” 中 將 class改成剛
剛建立的 RestaurantTableViewCell.swift

4.4 連結 image view、label 與 cell
在 Cell 按右鍵 叫出 outlet檢閱器，將各個屬性旁的”小原點”拖曳到對應的”物件”，如果有對應成功，.swift 內@IBOutlet 旁的小圓圈會變成實心

5. 相關設定連結都已經做得差不多了，接下來我們加入修改吧!!
5.1 我們要將dequeueReuseableCell 參照到剛剛建立的 Cell 所以要 Downcasting (向下轉型) ::: as! RestaurantTableViewCell :::

// Downcasting as RestaurantTaleViewCell
let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! RestaurantTableViewCell

5.2 將剛剛加入的三個 label 參照 新的設定

// Cell contents setting
cell.nameLabel.text = restaurantNames[indexPath.row]
            cell.thumbnailImageView.image = UIImage(named:restaurantImages[indexPath.row])

5.3 改變thumbnail的樣式

//modify the thumbnail style
cell.thumbnailImageView.layer.cornerRadius = 30.0
        cell.thumbnailImageView.clipsToBounds = true

這樣就完成了