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

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

Image for post
Image for post

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

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

  • Text View 的 Scrolling Enabled 取消勾選

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

Image for post
Image for post
  • 設定 Auto Layout 條件
Image for post
Image for post

Image View 的條件

Image for post
Image for post

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

Image for post
Image for post

Stack View 的條件

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

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

Image for post
Image for post
  • 設定圖文的圓角和文字跟對話泡泡邊緣的間距。

利用 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 個。

Image for post
Image for post

Text View 的條件

Image for post
Image for post

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

Image for post
Image for post

Image View 的條件

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

範例連結

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

Image for post
Image for post
Image for post
Image for post

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store