Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

用 NSAttributedString 在文字行中加入圖片

More than 5 years have passed since last update.


▲ 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.

vc7
iOS Developer from 🇹🇼
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away