More than 5 years have passed since last update.

用 NSAttributedString 在文字行中加入圖片

Posted at 2015-02-07

▲ Facebook iOS app version 23.1

最近在公司的專案中需要做到這種 UI ：在行內中插入小 icon ，就如上圖中 Facebook app 中呈現各種小圖的方式（紅色箭頭所指處）。一樣在 stackoverflow 上面找到再也簡單不過的解法，一樣要請出萬能的 NSAttributedString 。

概念

概念其實不會很複雜

把一個字串加入一個特定字串當標的物
把特定字符換成小圖

接著就可以來做做看了。

實作

結果會以一個 UILabel 顯示出來，因此當然要宣告一個 UILabel 來顯示，最後再將組合好的字串， assign 給這個 UILabel 的 attributedText property 。

▲ 結果圖

這次要設法將字串中的笑臉文字 :) 把它換成 Android 裡面笑臉的表情圖，而這個 :) 就是要拿來作為替換的標的物字串。

建立基本的 UILabel

一開始在範例中先建立一個 UILable ，輸入想要顯示的字串，並加入主要的 view 中：

class ViewController: UIViewController {

    var label: UILabel?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        label = UILabel(frame: CGRectMake(0, 0, CGRectGetWidth(view.bounds), CGRectGetHeight(view.bounds)))
        label?.center = view.center
        label?.textAlignment = .Center
        
        var mutableAttributedString = NSMutableAttributedString(string: "this is a smile :)")
        
        label?.attributedText = mutableAttributedString
        
        view.addSubview(label!)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

這一階段的成果：Swift: 5e3726a, Objective-C: 47b4e7a

宣告圖片的容器 > NSTextAttachment

接著宣告並初始化一個 NSTextAttachment 物件來裝要顯示的圖片，這個物件在下個步驟就會被置換到字串裡並顯示出來。這個步驟完成後目標文字還沒有被替換掉，因此這個時候執行還是不會顯示圖片喔。

var textAttachment = NSTextAttachment()
var image = UIImage(named: "1f601.png")
        
textAttachment.image = image

（這邊因為用到的原圖比較大，在範例檔中我有多加上一個縮小圖片的處理）

這一階段的成果：Swift: 26d1856, Objective-C: f8c2e97

換上圖片 > replaceCharactersInRange

最後將目標文字找到後換上圖片就完成了，

var iconAttributedString = NSAttributedString(attachment: textAttachment)
mutableAttributedString.replaceCharactersInRange(NSMakeRange(16, 2), withAttributedString: iconAttributedString)

這一階段的成果：Swift: bc8e161, Objective-C: d6d46c1

範例專案 Demo Project

Swift: [GitHub] [Download]
Objective-C: [GitHub] [Download]

後記

真心覺得 NSAttributedString 真的太強大，可以做好多事情。因此把圖片塞進字裡行間中這件事情，比原先想像中的容易好多。

再來可能是對 Swift 還不是很熟，在寫範例專案的時候碰到了很多困難，寫起來也還不像寫 Objective-C 還直觀，還要多多練習 :DDD

參考連結

同步發佈

用 NSAttributedString 在文字行中加入圖片 - 熊屋

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up