株式会社LITALICO でエンジニアをやっています、@kentya6です。
『LITALICO Advent Calendar 2017』18日目の記事となります。
今回、iOS向けのアイコンフォントライブラリ「IconFontStack」を作りましたので、開発の背景やライブラリの使い方などを書いていきます。
開発背景
私自身、アプリを作成する際によくアイコンフォントを使用します。主に以下の理由からアイコンフォントを使用しています。
- 自分で画像リソースを用意する必要がない
- 高品質なアイコンを手軽に使える
- UIに使用するアイコンは既にアイコンフォントでカバーできることが多い
これまで既存のアイコンフォントライブラリを使って開発を進めていましたが、いくつか痒いところに手が届かない感じがありました。
例えば、
- 文字列で指定する必要がある
- Storyboardで確認できない
- 提供しているメソッドが複雑(Buttonの枠線指定などもあり引数が多い)
上記の項目を一部クリアしているライブラリももちろんありますが、今回挙げた項目を全てクリアするライブラリは見当たりませんでした。
そのため、自分で作ることにしました。
ライブラリの特徴
先程の開発背景に挙げた部分を解決する機能を持っています。
1. 複数フォントに対応
現時点では以下のフォントに対応しています。
だいたいこの辺りのフォントを使うことが多いのでこの3つにしていますが、必要に応じて追加予定です。
2. enumによる補完
文字列を直接指定する方法では、アイコンの指定ミスをコンパイルによるチェックで検出することができません。
また、補完がないので正しいかどうか確認する手間があります。
そこで本ライブラリでは、以下のような記述でアイコンを指定できるようにしています。
アイコンのサイズや色も指定できます。
UILabel
label.setIcon(icon: .googleMaterialDesign(.settings), size: 30)
UIButton
button.setIcon(icon: .fontAwesome(.heart), forState: .normal)
UITextField
textField.setRightViewIcon(icon: .fontAwesome(.addressBook))
textField.setLeftViewIcon(icon: .fontAwesome(.adn))
UIStepper
stepper.setIncrementIcon(icon: .ionicons(.alert), forState: .normal)
stepper.setDecrementIcon(icon: .ionicons(.leaf), forState: .normal)
UISlider
slider.setMinimumValueIcon(icon: .fontAwesome(.home))
slider.setMaximumValueIcon(icon: .fontAwesome(.key))
UIImageView
imageView.setIcon(icon: .fontAwesome(.star), color: .orange, size: CGSize(width: 44, height: 44))
UISegmentedControl
segmentedControl.setIcon(icon: .googleMaterialDesign(.shop), forSegmentAtIndex: 0)
segmentedControl.setIcon(icon: .googleMaterialDesign(.openInNew), forSegmentAtIndex: 1)
3. Storyboardでのプレビュー
本ライブラリでは、IconFontButton, IconFontImageView, IconFontLabelなどといったクラスを提供しています。（クラス一覧はREADMEにあります）
これらのクラスは@IBDesignableに対応しているので、storyboardでアイコン指定することもできます。
例: Storyboard上でUILabelにアイコンフォントを適用
まず、UILabelを置き、クラス名をIconFontLabelに変更します。
インスペクタ欄に「Icon Id」という欄が出るので、そこにアイコンフォントのidを入力します。
（例: FontAwesomeのcheckアイコンを使いたい場合はfa-checkと入力)
正しくidが入力された場合、自動的にアイコンが画面上に反映されます。
以下のデモ動画では、FontAwesomeのfa-bus、ioniconsのion-ios-email、MaterialDesignIconsのic-settingsを入力しています。ボタン部分のアイコンが変わっているのが分かると思います。
おわりに
今回は、今まで別のアイコンフォントライブラリを使っていて感じた個人的な不満を解決するライブラリを作ってみました。
今後、アイコンフォントを使用する際はIconFontStackを使ってアプリ開発をしていく予定なので、足りない部分はアップデートとして追加していきます。(特にUINavigation関係)
もしよければみなさんも使ってみて下さい。
明日は @tomotomospot さんの「情報のキャッチアップ力を少しだけ上げる方法」です。お楽しみに！