用 NSAttributedString 在文字行中加入圖片

  • 2
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。


▲ 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

後記

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

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

參考連結

同步發佈



本文範例以 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.