UILabelのtextに入れた記号が絵文字に変わるのを防ぐ

  • 5
    いいね
  • 0
    コメント

UILabelのtextに特定の記号を入れると絵文字化してしまう

UILabelのtextに❤(ハート)や☎(電話)などの特定の記号をセットして表示すると、絵文字として表示されてしまうことがあります。
試しにトランプのマークをtextにセットすると...

let label: UILabel = ...
label.text = "♠♣❤♦"

img1.png

このように絵文字になってしまいます。

絵文字化しないようにする

単純に記号として表示したい場合は以下のように、記号文字の後に \u{FE0E} を追加してあげます。

let label: UILabel = ...
// 1文字の場合
label.text = "♠\u{FE0E}"
// 複数ある場合はmapとか使うと楽かも
label.text = "♠♣❤♦".characters.map { "\($0)\u{FE0E}" }.joined(separator: "")

これで、絵文字に変わることなく表示させることができます。

img2.png

"\u{FE0E}" って一体

記号の後に付けた \u{FE0E} は、 Variation Selector (異字体セレクタ)というものの1つです。
ある文字がテキストスタイル、絵文字スタイルどちらにもなりうる場合に、 \u{FE0E} を付与してあげるとテキストスタイルとして表示させることができます。
逆に、絵文字として表示したいときは、\u{FE0F}を付与してあげると、絵文字として表示させることができます。

let label: UILabel = ...
label.text = "Ⓜ\u{FE0E} → Ⓜ\u{FE0F}"

img3.png

ただ、文字によっては付与することで文字化けする可能性もあるので注意が必要です。

詳しくはwikiをご覧ください。

おまけ

Playgroundで試せるコードを用意しました。1.5秒後に絵文字になってしまった記号が普通の記号に戻るようになっています。

import PlaygroundSupport
import Foundation
import UIKit

PlaygroundPage.current.needsIndefiniteExecution = true
let view = UIView(frame: CGRect(x: 10, y: 10, width: 100, height: 50))
let label = UILabel(frame: .zero)
label.text = "♠♣❤♦"
label.backgroundColor = .white
label.sizeToFit()
view.addSubview(label)
PlaygroundPage.current.liveView = view

DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
    label.text = "♠♣❤♦".characters.map { "\($0)\u{FE0E}" }.joined(separator: "")
    label.sizeToFit()
}