iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 10
0
Software Development

挑戰 30天內送審一支APP 系列 第 10

如何自訂Cell格式與內容 ( D day + 9 )

今天要來學習如何自訂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

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

  1. 接下來,我們要為 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

這樣就完成了


上一篇
在 tableview中加入圖片 ( D day + 8 )
下一篇
UIAlertController 與 tableview 之互動( D day + 10 )
系列文
挑戰 30天內送審一支APP 30

尚未有邦友留言

立即登入留言