文森說技術

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

概念

概念其實不會很複雜

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

接著就可以來做做看了。

實作

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

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

建立基本的 UILabel

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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()
    }
}

宣告圖片的容器 → NSTextAttachment

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

1
2
3
4

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

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

換上圖片 → replaceCharactersInRange

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

1
2

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

範例專案 Demo Project

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

後記

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

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

參考連結

• NSAttributedSring - Apple Developer
• NSMutableAttributedSring - Apple Developer
• NSTextAttachment - Apple Developer

Qiita 同步發佈

• 用 NSAttributedString 在文字行中加入圖片

本文範例以 Xcode Version 6.1.1 (6A2008a), iOS SDK 8.1 建置。

專案裡 demo 用的 Android 表情圖 - Copyright © 2008 The Android Open Source Project. Licensed under the Apache License and includes this notice.