Unit IV：「UITableView — 聊天情境」情歌對唱總有天會膩，今晚我想來點撩人金句
iOS 新手練習起步走#4
前陣子某位🐷先生在新聞上轟轟烈烈，被指名為「時間管理大師」並且喜歡從事多人運動…嗯。。。剛好最近在學 TableView 作法，覺得情歌總有一天會唱膩，但撩人金句學起來，不僅讓話題不尷尬、也有機會成為時間管理大師，一生受用無窮呀～（誤）
本輯練習最終呈現效果：
1. 使用 UITableView 達成男女對話的聊天室情境
2. 製作對話泡泡框
首先邀請以下兩位—— 大美女 & 豬生，擔當本輯顏值嘉賓。
步驟1：將「TableView」拉進畫面中，右下角「Add New Constraints」設定四邊為「0」。接著拉兩個「TableViewCell」在 TableView 中，設定個別的「Identifier」，便於之後 cell 在取值時能找到對應的 ID（圖 1）。
步驟2：由於兩個 cell 的顯示內容有所不同，因此我們先分別創建 2 個不同的「CocoaTouch File」來對應剛才所創建的 cell，並在 StoryBoard 中將 cell 對應到 class。
步驟3：我們使用「StackView」將「ImageView」&「Text View」包裝起來。要注意兩邊的 cell 設定方式差不多，只是 butterfly 的 cell 圖片會置右。
紅框圈起處為「PigCell」的 constraints；綠框圈起處為「ButterflyCell」的 constraints。此外，要讓文字自動長大的話還需要去設定 text view ，將「Scrolling Enabled」取消勾選 & 「Horizontal Content Compression Resistance Priority」的「750」改為「1000」，文字換行才不會有問題。（圖 4）
步驟4：分別把 Outlet 加入至「ViewController」（圖 5）、「PigTableViewCell」（圖 6）、「ButterflyTableViewCell」（圖 7）。
步驟5：接著將「TableView」拉「datasource」&「delegate」至「ViewController」，然後在程式頁面遵從「protocol UITableViewDataSource」&「protocol UITableViewDelegate」。
步驟6：我們接著創建一個新的 swift 檔，寫下 struct Conversation，方便等會造假資料的時候呼叫用（圖 9）。然後接著回到 viewController 頁面，直接在底部造出 array conversation 的物件來存放資料。（圖 10）
步驟7：我們可以讓對話框變得更好看！透過編輯兩個「TableViewCell」的檔案來實現。紅框部分：讓文字內容上下左右間距為 10；綠框部分：設置文字框的圓角。
步驟8：回到 viewController 的頁面，我們要完成 table view 裡面的「numberOfRowsInSection」、「cellForRowAt」的方法。
在「numberOfRowsInSection」中我們直接設置 conversation Array 的 count 即可。（第1～3行）「cellForRowAt」這邊我們用判斷式，因為在 struct Conversation 裡面已經有宣告屬性，透過屬性值可以直接做判斷，當「name = pig」時，我們可以直接呼叫「mrCell」；反之，當「name = butterfly」時，可以呼叫「missCell」（第5～17行）。
到這邊就大功告成啦！平常聊天找不到話題嗎？那麼就學點撩人的語句吧！
