[APP開發-使用Swift] 7. UITableView Custom Cell

6 min readSep 28, 2017

在系列文章6. UITableView Basic Cell中，我們最終完成了一個Basic Cell的表格呈現我們的餐廳，不過，看起來Basic Cell的呈現不能盡如我們之意，我們希望能夠更有彈性地呈現我們的餐廳資料，例如加上地點、類型等資訊。接下來，我們將介紹如何修改UITableView使用Custom Cell。

在Storyboard點選Cell，選擇Attributes inspector，將Style改為Custom

2. 分別將Table View及Cell的高度設定為Row Height: 80

3. 拖拉一個Image View至Cell中並設定Image大小。

4. 拖拉3個Label至Cell，分別命名為Name, Location, Type。先選擇Name，將Font設定為Text Styles — Headline。

選擇Location，將顏色改為淺一點的顏色。

再選擇Type，字體設定為13。

5. 按下Command鍵同時選擇Name, Location, Type，點選下方的Embed in Stack，再將Spacing設為1。

6. 按下Command鍵同時選擇剛剛建立的Stack View以及Image View，點選下方的Embed in Stack，再將Spacing設為10。

7. 加上Stack View的限制條件。選擇Stack View，按下Add New Constraints，上2、左6、下1.5、右0，再按下Add 4 Constraints。

8. 固定Image View高度、寬度，避免每個圖大小不一。利用Ctrl+Drag在Image View水平拖拉，再勾選Width、Height即可。

9. 注意到了嗎？在Document Outline右上角有一個紅色的警告標示，這是Interface Builder偵測到的佈局上的錯誤，點下去後Xcode會建議如何修改，我們可以直接接受，按下Change Priority即可。

畫面顯示No Auto Layout Issues。很好！我們完成了畫面的設定，接下來要加入程式運作。

9. 新增自訂的Table View Cell：New File ->Cocoa Touch Class -> RestaurantTableViewCell。

10. 串連Storyboard Cell以及RestaurantTableViewCell。

11. 接下來，讓我們為3個label及1個ImageView建立Outlets連結，利用我們先前介紹的2. Interface Builder利用Assistant Editor同時出現Storyboard以及RestaurantTableViewCell即可拖拉建立Outlets。

nameLabel
locationLabel
typeLabel
thumnailImageView

12. 開啟RestaurantTableViewController.swift，修改cellForRowAt indexPath。

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {   let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! RestaurantTableViewCell   // Basic Cell   //        cell.textLabel?.text = restaurants[indexPath.row].name   //        cell.imageView?.image = UIImage(named: restaurants[indexPath.row].image)   // Custom Cell   cell.nameLabel.text = restaurants[indexPath.row].name   cell.thumnailImageView.image = UIImage(named: restaurants[indexPath.row].image)   return cell}