Voicy Tech Blog

Voicy公式Techブログ

[Swift4]文字列とFontAwesomeを同じUILabelに表示する

こんにちは。
Voicyエンジニア一年目の実は美人エンジニアだったらしいあかよです。

今回はiPhoneアプリ開発中に文字列とFontAwesomeを同じUILabelに表示する方法で少し手こずったため、まとめておきたいと思います。

作りたいもの

f:id:voice-tech:20171218215848j:plain

今回は上の画像にあるようなlabelを作成します。

NSAttributedStringでの実装

let nameAttr: [NSAttributedStringKey : Any] = [
   .font : UIFont(name: "Arial-BoldMT", size: 20)!
]
let name = NSAttributedString(string: "Voicy太郎", attributes: nameAttr)
  • FontAwesomeアイコン部分のフォント指定
    (色:orange フォント: FontAwesome)

FontAwesomeはコード上では以下を参考にUnicodeで指定する http://fontawesome.io/cheatsheet/

let iconAttr: [NSAttributedStringKey : Any] = [
   .foregroundColor : UIColor.orange,
   .font : UIFont(name: "FontAwesome", size: 20)!
]
let icon = NSAttributedString(string: " \u{f058}", attributes: iconAttr)
  • 文字列とFontAwesomeアイコンの合体
let nameAttributeString = NSMutableAttributedString()
nameAttributeString.append(name)
nameAttributeString.append(icon)

NSAttributedStringでの実装方法は以上になります。

  • これらをまとめると以下のようにできます
let fontSize = label.font.pointSize
        
// 文字列部分のフォント指定 
let nameAttr: [NSAttributedStringKey : Any] = [
    .font : UIFont(name: "Arial-BoldMT", size: fontSize)!
]
let name = NSAttributedString(string: "Voicy太郎", attributes: nameAttr)

// FontAwesomeアイコン部分のフォント指定
let iconAttr: [NSAttributedStringKey : Any] = [
    .foregroundColor : UIColor.orange,
    .font : UIFont(name: "FontAwesome", size: fontSize)!
]
let icon = NSAttributedString(string: " \u{f058}", attributes: iconAttr)
        
// 文字列とFontAwesomeアイコンの合体
let nameAttributeString = NSMutableAttributedString()
nameAttributeString.append(name)
nameAttributeString.append(icon)
label.attributedText = nameAttributeString

まとめ

今回は同じlabel内で複数のフォントと色を指定するのみでしたが、NSAttributeStringで指定できる属性は他にもあるのでまだまだいろいろな用途に使えそうですね。

Voicyでは現在エンジニア募集中です!
まずは話を聞いてみるだけでも大歓迎ですので、是非一度オフィスに遊びに来てください! (オフィス鍋もやってるよ) https://www.wantedly.com/companies/voicy/projects

(参考)
Font Awesome を Xcode で使用する - xykのブログ
UILabelをNSAttributedStringで文字装飾(Swift 4対応) - Qiita