#45 聊天室對話功能，cell 搭配 auto layout

使用功能：

TableView
TableViewCell
TextView
Stack Views
Auto Layout
MVC架構

自訂兩個cell 模擬兩人對話

cell 綁定 IBOutlet，設定圖片圓角與對話匡顏色

歌詞資料

使用 struct 陣列來儲存模擬對話內容

畫面配置與 AutoLayout

聊天畫面使用 TableView 搭配自訂 cell，cell 擺放 ImageView、TextView，並使用 StackView 排版

TableView cell 高度不需調整，預設就是 Automatic 會依照內容增加高度

ImageView 的 AutoLayout 設定，限制寬為80、並勾選 Aspect Ratio 讓圖片維持比例

這邊為了讓 TextView 的 寬度能依內容縮放，所以要設定 StackView 的AutoLayout ，讓 StackView 上下左右都間隔10

但對話匡右側會隨著內容長度變化，所以要將 Trailing AutoLayout 改為 ≥ 10

另一位對話者的 AutoLayout 則是相反，把 Leading 改為 ≥ 10

成果

GitHub

GitHub - croc0909/TalkApp

參考資料

#63 情歌對唱的聊天室畫面 — cell 的 auto layout