vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

[iOS開発] swiftでFontAwesomeKitライブラリを使う

      2017/01/31

LINEで送る
Pocket

swift-fontawesomekit
こんにちは、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。

swift-fontawesomekit

FontAwesomeKitの利用方法

では、実際にFontAwesomeをswiftで利用してみましょう。

Bridging Headerを設定

SwiftでObjective-Cを動かすので、ブリッジヘッダーでヒモ付してあげます。

Xcodeからプロジェクトを右クリック→New Fileを選択。

swift-fontawesomekit2

iOS欄のSource→Objective-C Fileを選択してNext。

swift-fontawesomekit3

適当にdummy.mとか名前をつけます。

swift-fontawesomekit4

両方チェックを入れてCreate。

swift-fontawesomekit5

Bridging Headerを追加するか聞かれるのでYes選択。

swift-fontawesomekit6

Bridging Headerファイルが作成されました。dummy.mファイルは不要なので削除してOKです。

swift-fontawesomekit7

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>

swift-fontawesomekit8

Main.storyboardにImageViewを配置

Main.storyboardにImageViewを配置します。

swift-fontawesomekit9

適当な大きさで制約をつけます。今回は40×40にしました。

swift-fontawesomekit10

中央に制約をつけました。

swift-fontawesomekit11

制約を付け終わったので「Update Frames」しておきます。

swift-fontawesomekit12

Image ViewにFontAwesomeを紐付ける

実際にFontAwesomeを表示させていきましょう。

UIImage Viewをcontrolを押しながら選択、ViewController.swiftにドラッグ→fontという名前でoutletを作成。

swift-fontawesomekit13

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
}

実行結果確認

アイコンが表示されるか確認。

swift-fontawesomekit14

40×40のゴミ箱アイコンを表示することができました。

使いたいFontを探す方法

Fontawesomeで使えるアイコンは、下記のFontawesome公式から探してきます。

LINKFont Awesome Icons

試しにコーヒーアイコンを使ってみましょう。先ほどのviewDidLoad内の「trash」文字を、コーヒーアイコンの隣の「coffee」の文字に置換してあげればOKです。

※ちなみにNew Iconsは対応していない場合があります。対応しているかどうかはPods→Pods→FontawesomeKitの中のFontawesomeKit.hファイルから確認できます

swift-fontawesomekit15

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
}

確認してみます。

swift-fontawesomekit16

時間があるときに、UIImageではなくUILabelからFontawesomeを利用方法も追記したいと思います。

Fontawesomeの使い方は以上です。お疲れ様でした。

まとめ

FontawesomeKitを使うことでかんたんにアイコン画像を使うことができました。

Fontは文字以外でもUIImageとして利用できます。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
かわいいアイコンがたくさんあって良いですね。ちょっと使うだけで、アプリが一層オシャレにみえること間違いなし。

 - iOSアプリ開発

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

[iOS開発] Xcode7から無料で実機デバッグができるようになったよ!

こんにちは、okutani(@okutani_t)です。Xcode7から無料で実 …

複数バージョンのXcodeを入れる方法。ダウングレードは不要です

こんにちは、okutani(@okutani_t)です。Xcodeは1つのMac …

iOSアプリ開発超入門!Xcodeの導入からSwiftを使ったHello Worldまで

以前はiOSアプリ開発に「Objective-C」が使われていましたが、現在は2 …

swiftで簡単にアニメーションを実装できるSpringライブラリ使い方

こんにちは、okutaniです。今回はアニメーションを手軽に実装する「Sprin …

[Xcode6.3] CocoaPodsでAlamofire-SwiftyJSONを導入 (エラー対処あり)

CocoaPodsがv0.36.0より、Swiftライブラリに対応しています。 …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。