iOSでFont Awesomeを使う

はじめに

これは 2018/2/23 の
ROPPONGI.swift 第1回 - connpass
発表資料です。

---

---

これ？　UIBarButtonSystemItem ですね🤓
https://developer.apple.com/documentation/uikit/uibarbuttonsystemitem

---

🙅

---

UIBarButtonSystemItem で使えるアイコンはこれだけ

https://developer.apple.com/documentation/uikit/uibarbuttonsystemitem より

---

小規模でデザイナーが
確保できないプロジェクトだったり

今すぐイイ感じのアイコンを求める
スピード感を優先したいプロジェクトだったり

そんなあなたの強い味方

---

Font Awesome

---

https://fontawesome.com/

---

Font Awesome 5 (2018/2 現在)

• Version 5.0.6
• 2316 のアイコン
  • Free で使えるアイコンは 929個

---

Style

• Solid (塗りつぶし)
• Regular (白抜き)
• Light (線が細い・Proのみ)
• Brands (各種ロゴ)

---

こういう感じ

---

• 基本は Solid
• 白抜きの Regular が提供されている場合も
• Brands は必要ならお好みで

---

導入方法

---

1) ダウンロード

---

2) プロジェクトにバンドル

※ 3ファイル揃ってないといけないわけではない
Solidだけ入れるとかでも可

---

3) Copy Bundle Resources への追加も忘れない

---

4) Info.plist に Fonts provided by application 追記

  <dict>
+   <key>UIAppFonts</key>
+   <array>
+       <string>Font Awesome 5 Free-Solid-900.otf</string>
+       <string>Font Awesome 5 Free-Regular-400.otf</string>
+       <string>Font Awesome 5 Brands-Regular-400.otf</string>
+   </array>

---

print(UIFont.familyNames)

["Copperplate", "Heiti SC", "Apple SD Gothic Neo",
 "Thonburi", "Gill Sans", ... "Trebuchet MS",
 "Font Awesome 5 Free", ...] 👈🎉

---

print(UIFont.fontNames(
    forFamilyName: "Font Awesome 5 Free"
))
print(UIFont.fontNames(
    forFamilyName: "Font Awesome 5 Brands"
))

["FontAwesome5FreeSolid", "FontAwesome5FreeRegular"]
["FontAwesome5BrandsRegular"]

---

使ってみる

---

label.font = UIFont(name: "FontAwesome5BrandsRegular",
                    size: 100)
label.text = "github"

---

---

薄いラッパーを用意する

---

public struct FontAwesome {
    public enum Style {
        case solid, regular // brands はお好みで

        public var fontName: String {
            switch self {
            case .solid: return "FontAwesome5FreeSolid"
            case .regular: return "FontAwesome5FreeRegular"
            }
        }
    }
    public static func font(size: CGFloat, style: Style = .solid) -> UIFont {
        return UIFont(name: style.fontName, size: size)!
    }

    public struct Icon {
        let code: String

        public static let cog = Icon(code: "cog")
        public static let star = Icon(code: "star")
    }
}

---

extension NSAttributedString {
    public static func icon(
        _ icon: FontAwesome.Icon,
        size: CGFloat,
        style: FontAwesome.Style = .solid)
        -> NSAttributedString {
        return NSAttributedString(
            string: icon.code,
            attributes: [
                .font : FontAwesome.font(size: size, style: style)
            ]
        )
    }
}

---

extension UIBarButtonItem {
    public convenience init(
        icon: FontAwesome.Icon,
        closure: @escaping (UIBarButtonItem) -> Void
        ) {
        self.init(title: icon.code,
                  style: .done,
                  closure: closure) // ※

        let states: [UIControlState] = [
            .normal, .highlighted, .disabled, .focused
        ]
        states.forEach {
            self.setTitleTextAttributes([
                .font : FontAwesome.font(size: 26)
                ], for: $0)
        }
    }
}

※ UIBarButtonItem のハンドラをクロージャで書くために、ActionClosurable を利用しています。

---

navigationItem.rightBarButtonItem
 = UIBarButtonItem(icon: .cog) { _ in
    print("tapped!")
}

---

もうちょっと大層な Font Awesome ラッパーのライブラリがGitHubに転がってたりもするけど、そこまでやるのはオーバーだと思う(IMO)

---

そんな感じで
楽しくアイコン活用しつつ
アプリを作っていきましょう