#70 利用 NSTextAttachment 製作包含圖片的字串

想要顯示文字和圖片，一般我們會用 label & image view 實現。彼得潘為了促進台灣經濟發展，想用 label & image view 顯示以上畫面，每天喝十杯珍奶，每天吃一百顆小籠包，以可愛的圖片表示珍奶和小籠包。

然而它卻沒有想像中簡單，因為我們得小心控制 image view 的大小和位置，才能讓圖文排列整齊。

既然 image view 如此麻煩，不如拋棄它吧。其實只要 label 就能搞定！利用 NSAttributedString 和 NSTextAttachment，label 就能排出包含美麗圖片的文字。

題目

在 label 上顯示一段包含台灣 emoji 圖片的有趣文字。(或是使用其它你喜歡的圖片和文字當主題。)

可愛的台灣 emoji 圖片下載連結。

emojis - Google Drive

範例說明

1 下載可愛的台灣 emoji 圖片。

2 將圖片加到 playground。

圖片加入的方法可參考以下連結。

如何在 playground 加入圖片

3 產生 NSMutableAttributedString 物件。

let content = NSMutableAttributedString(string: "為了促進台灣經濟發展，我要每天喝十杯")

只有 NSAttributedString 可以包含圖片，一般的 String 無法，而且我們之後還會增加字串的內容，因此我們生成可以改變的 NSMutableAttributedString。(Mutable 是可以改變的意思)

4 產生包含珍奶圖片的 NSTextAttachment 物件。

NSTextAttachment 可以包含圖片，之後我們將利用它生成包含圖片的 NSAttributedString。

let bubbleTeaAttachment = NSTextAttachment()
bubbleTeaAttachment.image = UIImage(named: "Bubble_Tea_128x128")

5 生成 NSAttributedString 時傳入 bubbleTeaAttachment，產生包含圖片的文字，然後將它加到 content 上。

content.append(NSAttributedString(attachment: bubbleTeaAttachment))

6 將 label 的 attributedText 設為 content，顯示包含圖片的文字。

let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
label.numberOfLines = 0
label.attributedText = content

attributedText - UILabel | Apple Developer Documentation

結果

Cool，珍奶圖片出現了 ! 不過它也太大杯了，我們希望它能小一點，呈現圖文排列成一段話的感覺。

設定 NSTextAttachment 的大小位置

import UIKit

let content = NSMutableAttributedString(string: "為了促進台灣經濟發展，我要每天喝十杯")
let bubbleTeaAttachment = NSTextAttachment()
bubbleTeaAttachment.image = UIImage(named: "Bubble_Tea_128x128")
bubbleTeaAttachment.bounds = CGRect(x: 0, y: 0, width: 30, height: 30)
content.append(NSAttributedString(attachment: bubbleTeaAttachment))
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
label.numberOfLines = 0
label.attributedText = content

說明

bubbleTeaAttachment.bounds = CGRect(x: 0, y: 0, width: 30, height: 30)

剛剛生成 NSTextAttachment 物件時，我們可以透過 CGRect 型別的 property bounds 設定圖片的位置大小。如下圖所示，設為 CGRect(x: 0, y: 0, width: 30, height: 30) 後，文字十杯和珍奶圖片完美地串在一起。

不過珍奶圖片感覺有點偏上，沒關係，我們可以將 bounds 的 y 設為 -5，讓圖片往下移動一點。

bubbleTeaAttachment.bounds = CGRect(x: 0, y: -5, width: 30, height: 30)

bounds 的 y > 0 將讓圖片往上移動，y < 0 則往下移動，比方 y 等於 25 將產生以下畫面。

bubbleTeaAttachment.bounds = CGRect(x: 0, y: 25, width: 30, height: 30)

學會 NSTextAttachment 的使用技巧後，現在讓我們發揮創意，產生以下促進台灣經濟發展的感人宣言。

import UIKit

let content = NSMutableAttributedString(string: "為了促進台灣經濟發展，我要每天喝十杯")
let bubbleTeaAttachment = NSTextAttachment()
bubbleTeaAttachment.image = UIImage(named: "Bubble_Tea_128x128")
bubbleTeaAttachment.bounds = CGRect(x: 0, y: -5, width: 30, height: 30)
content.append(NSAttributedString(attachment: bubbleTeaAttachment))
content.append(NSAttributedString(string: "，每天吃一百顆"))
let xiaoLongBaoAttachment = NSTextAttachment()
xiaoLongBaoAttachment.image = UIImage(named: "Xiaolongbao_128x128")
xiaoLongBaoAttachment.bounds = CGRect(x: 0, y: -5, width: 30, height: 30)
content.append(NSAttributedString(attachment: xiaoLongBaoAttachment))
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
label.numberOfLines = 0
label.attributedText = content

其它範例: 圖文並茂歌詞

作品集

④⑥利用 NSTextAttachment 製作包含圖片的歌詞

利用 NSTextAttachment 製作圖文並茂歌詞

使使用 NSTextAttachment 製作包含圖片的字串

#34 利用 NSTextAttachment 製作包含圖片的字串之我要吃好料的