はじめに
これは 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
Font Awesome 5 (2018/2 現在)
- Version 5.0.6
- 2316 のアイコン
- Free で使えるアイコンは 929個
Style
- Solid (塗りつぶし)
- Regular (白抜き)
- Light (線が細い・Proのみ)
- Brands (各種ロゴ)
こういう感じ
- 基本は Solid
- 白抜きの Regular が提供されている場合も
- Brands は必要ならお好みで
導入方法
- ダウンロード
- プロジェクトにバンドル
※ 3ファイル揃ってないといけないわけではない
Solidだけ入れるとかでも可
- Copy Bundle Resources への追加も忘れない
- 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)
そんな感じで
楽しくアイコン活用しつつ
アプリを作っていきましょう