利用 Auto Layout 實現聊天泡泡的兩個方法,Stack View & 非 Stack View

以 Auto Layout 製作類似下圖的 iOS App 聊天泡泡時,我們有很多做法,比方採用 Stack View 或不採用 Stack View。

接下來就讓我們分別說明兩種做法的細節。

方法一: 利用 Stack View 包住 Image View & Text View

讓 text view 隨文字內容自動長高。

Image View 的條件

Stack View 的 Alignment 設為 Top,Distribution 設為 Fill,Spacing 設為 10。

Stack View 的條件

Trailing Space to SuperView 的間距 ≥ 10,確保 Stack View 和 cell 邊緣至少有著 10 points 的間距。

值得注意的,我們要把 Text View 的 Horizontal Content Compression Resistance Priority 從 750 改成 1000,這樣文字的換行才不會有問題。

如下圖所示,當 Horizontal Content Compression Resistance Priority 是 750 時,它的長度會被壓縮,所以每一行才顯示兩個字,短短的八個字竟要用 4 行顯示。

利用 text view 的 textContainerInset 設定文字跟對話泡泡邊緣的間距。

class ChatTableViewCell: UITableViewCell {    @IBOutlet weak var photoImageView: UIImageView!
@IBOutlet weak var textView: UITextView!

override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
textView.textContainerInset = UIEdgeInsets(top: 10, left: 5, bottom: 10, right: 5)
textView.layer.cornerRadius = 10
photoImageView.layer.cornerRadius = 25

}

方法二: 不使用 Stack View

方法二跟方法一類似,主要差別在沒有使用 Stack View。此時 Auto Layout 條件將複雜許多,從原本的 6 個成長為 9 個。

Text View 的條件

Trailing Space to SuperView & Bottom Space to SuperView 的間距 ≥ 10,確保 Text View 和 cell 邊緣至少有著 10 points 的間距。

Image View 的條件

Bottom Space to SuperView 的間距 ≥ 10,確保圖片和 cell 底部至少有著 10 points 的間距。

若是只設定文字跟 cell 底部的距離,忘了設定圖片和 cell 底部的距離,當文字只有一行時,將造成圖片被切到的問題。

範例連結

第一個 tab 採用方法一,使用 Stack View 包住 Image View & Text View。第二個 tab 採用方法二,以 Image View & Text View 製作。

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com