[iOS開発] swiftでFontAwesomeKitライブラリを使う
2017/01/31
こんにちは、okutani(@okutani_t)です。 iOSアプリを作成するとき、ちょっとしたアイコンを使いたいことが多々あるかと思います。
そんなときは「FontAwesomeKit」ライブラリを利用すると便利です。このライブラリを使うことで、数多くのかわいいアイコンが簡単に使えるようになります。
では、さっそくFontAwesomeの特徴から使い方までを見ていきましょう。
参考SwiftでFontAwesomeKitを使ってみる – Qiita
スポンサーリンク
もくじ
FontAwesomeKitの特徴
FontAwesomeKitの特徴に、以下の項目が挙げられます。
- アイコンをフォントとして扱える
- UIImageとして扱える
label,tabber等で使えるスグレモノ。色なんかもかんたんに変えられます。
デフォルトのアイコンの数は限られていますが、500以上のアイコンが使えるようになるので、大抵これ1つで済んでしまいますね。
では、実際にFontAwesomeKitをインストールしてみましょう。
FontAwesomeKitをインストールする
インストールはCocoaPodsからおこなうことができます。まだCocoaPodsを導入していない方は、ターミナルから下記コマンドで導入しておきましょう。
$ sudo gem install cocoapods
管理情報を更新。
$ pod setup
Podfileを作成します。
$ cd ~/プロジェクトまでのパス
$ pod init
作成されたPodfileに下記を追記します。
pod 'FontAwesomeKit', '~> 2.1.0'
ちなみに、下記のフォントが一緒に入ります。
- Font-Awesome
- Foundation icons
- Zocial
- ionicons
下記のように指定することで、上記のどれか1種類だけを選択して入れることができます。
pod 'FontAwesomeKit/IonIcons'
インストールを実行します。
pod install
これで、FontAwesomeKitライブラリのインストールが完了しました。
次からは「プロジェクト名.xcworkspace」を開いて作業していくので、そのまま下記を入力してプロジェクトを開くと楽です。
$ open プロジェクト名.xcworkspace
「Pods」があればOK。
FontAwesomeKitの利用方法
では、実際にFontAwesomeをswiftで利用してみましょう。
Bridging Headerを設定
SwiftでObjective-Cを動かすので、ブリッジヘッダーでヒモ付してあげます。
Xcodeからプロジェクトを右クリック→New Fileを選択。
iOS欄のSource→Objective-C Fileを選択してNext。
適当にdummy.mとか名前をつけます。
両方チェックを入れてCreate。
Bridging Headerを追加するか聞かれるのでYes選択。
Bridging Headerファイルが作成されました。dummy.mファイルは不要なので削除してOKです。
FontAwesomeを使いたい場合は、Bridging Headerファイル(Testsじゃない方:プロジェクト名-Bridging-Header.h)に下記を記述。
#import <FontAwesomeKit/FontAwesomeKit.h>
他のFontはそれぞれ下記を記述してあげればOK。
#import <FontAwesomeKit/FAKFoundationIcons.h>
#import <FontAwesomeKit/FAKZocial.h>
#import <FontAwesomeKit/FAKIonIcons.h></code>
Main.storyboardにImageViewを配置
Main.storyboardにImageViewを配置します。
適当な大きさで制約をつけます。今回は40×40にしました。
中央に制約をつけました。
制約を付け終わったので「Update Frames」しておきます。
Image ViewにFontAwesomeを紐付ける
実際にFontAwesomeを表示させていきましょう。
UIImage Viewをcontrolを押しながら選択、ViewController.swiftにドラッグ→fontという名前でoutletを作成。
viewDidLoadに記述。
override func viewDidLoad() {
super.viewDidLoad()
let trash = FAKFontAwesome.trashIconWithSize(40)
// 下記でアイコンの色も変えられます
// trash.addAttribute(NSForegroundColorAttributeName, value: UIColor.whiteColor())
let trashImage = trash.imageWithSize(CGSizeMake(40, 40))
font.image = trashImage
}
実行結果確認
アイコンが表示されるか確認。
40×40のゴミ箱アイコンを表示することができました。
使いたいFontを探す方法
Fontawesomeで使えるアイコンは、下記のFontawesome公式から探してきます。
試しにコーヒーアイコンを使ってみましょう。先ほどのviewDidLoad内の「trash」文字を、コーヒーアイコンの隣の「coffee」の文字に置換してあげればOKです。
※ちなみにNew Iconsは対応していない場合があります。対応しているかどうかはPods→Pods→FontawesomeKitの中のFontawesomeKit.hファイルから確認できます
override func viewDidLoad() {
super.viewDidLoad()
let coffee = FAKFontAwesome.coffeeIconWithSize(40)
// 下記でアイコンの色も変えられる
// coffee.addAttribute(NSForegroundColorAttributeName, value: UIColor.whiteColor())
let coffeeImage = coffee.imageWithSize(CGSizeMake(40, 40))
font.image = coffeeImage
}
確認してみます。
時間があるときに、UIImageではなくUILabelからFontawesomeを利用方法も追記したいと思います。
Fontawesomeの使い方は以上です。お疲れ様でした。
まとめ
FontawesomeKitを使うことでかんたんにアイコン画像を使うことができました。
Fontは文字以外でもUIImageとして利用できます。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。
「Ruby on Rails」「JavaScript(jQuery, Reactなど)」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク