#45 聊天室對話功能,cell 搭配 auto layout
Published in
Sep 14, 2022
使用功能:
TableViewTableViewCellTextViewStack ViewsAuto LayoutMVC架構
自訂兩個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
參考資料