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

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

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

• 方法一: 利用 Stack View 包住 Image View & Text View。
• 方法二: 不使用 Stack View。

ps: 我們將用 Auto Layout 計算 cell 的高度，因此請先將 table view 的 Row Height & Estimate 設為 Automatic。

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

• Text View 的 Scrolling Enabled 取消勾選

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

讓 UITextView 的高度等於文字內容的高度

• 設定 Auto Layout 條件

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 製作。

AppPeterPan/ChatDemo