よく使うアイコン画像を「Font-Awesome」を使って生成する方法 #iOS

＊ 2013年10月29日現在、FontAwesomeに「Version 2.0 Notable Changes」が来たようなので、CocoaPodsでバージョンしていないと最新版がインストールされるようです。Version2.0の使い方はこちら(英語)を参考にしてください。

UITabBar、UIButtonなどいろいろなところでそのボタンの役割を表すためのアイコン画像が使われます。
SNS固有のアイコンや、一般的なアイコンなどさまざまなものがありますが、「Font-Awesome」は、その中でよく使われるアイコンを集めたものです。

iOSでは「FontAwesomeKit」というライブラリを使えばFont-AwesomeのアイコンをUIImageとして生成して簡単に使うことできます。
以下はその実装方法を紹介します。具体的な実装は、GitHubで公開されているサンプルコードを参考にしてください。

(1) 環境（Requirements）

Xcode 4.5 +
iOS 5.0 +
ARC enabled
CoreText framework（CocoaPodsを使うと自動で追加されます）

(2) 必要なファイル

FontAwesome.otf
FontAwesomeKit.h
FontAwesomeKit.m

（CocoaPodsを使う場合）

「Podfile」に

pod 'FontAwesomeKit'

を追加し、ターミナルから

pod update

を実行する。これで、(1)と(2)をしたのと同様に、実装する準備はすべて完了します。

(3) 実装

まず、アイコン画像を生成するクラス内でFontAwesomeKitをインポートしておきます。

ViewController.m

#import "FontAwesomeKit.h"

これで自由にFont-Awesomeのアイコンを生成することができます。
例えば、星のアイコンを生成して、タブのアイコンに設定する場合は以下のようになります。

ViewController.m

- (void)awakeFromNib
{
    [super awakeFromNib];

    // タブのタイトル
    self.tabBarItem.title = @"Icon Cheat Sheet";
    // アイコン画像を生成
    UIImage *tabbarIcon = [FontAwesomeKit imageForIcon:FAKIconStar
                                             imageSize:FAKImageSizeTabbar
                                              fontSize:29
                                            attributes:nil];
    // タブのアイコンとして設定
    self.tabBarItem.image = tabbarIcon;
}

星のアイコンは生成時に、"imageForIcon"の部分を"FAKIconStar"で設定していますが、この部分を変えることでいろいろなアイコンを生成できます。マクロの定義は「FontAwesomeKit.h」で以下のように定義されているので参照して下さい。

FontAwesomeKit.h（アイコンの種類のマクロの一部）

// generated marcos
#define FAKIconGlass @"\uf000"
#define FAKIconMusic @"\uf001"
#define FAKIconSearch @"\uf002"
#define FAKIconEnvelopeAlt @"\uf003"
#define FAKIconHeart @"\uf004"
#define FAKIconStar @"\uf005"
#define FAKIconStarEmpty @"\uf006"
#define FAKIconUser @"\uf007"
#define FAKIconFilm @"\uf008"
#define FAKIconThLarge @"\uf009"
#define FAKIconTh @"\uf00a"
.
.
.

アイコンの種類を見た目で確認したいときは、こちらが見やすいです。

(4) もっとカスタムしたい人

もっとアイコンをカスタムしたい場合は、attributesの部分を変えます。色や影の具合を調整することができます。以下その一例です。

ViewController.m

- (void)awakeFromNib
{
    [super awakeFromNib];

    // タブのタイトル
    self.tabBarItem.title = @"Icon Cheat Sheet";

    // 陰のattributes
    NSDictionary *shadowAttr = @{FAKShadowAttributeColor : [UIColor grayColor],
                                 FAKShadowAttributeOffset : [NSValue valueWithCGSize:CGSizeMake(0.0f, 1.0f)],
                                 FAKShadowAttributeBlur : [NSNumber numberWithFloat:1.0f]};
    // 非選択時のattributes
    NSDictionary *unselectedIconAttrs = @{FAKImageAttributeForegroundColor : [UIColor lightGrayColor],
                                          FAKImageAttributeBackgroundColor : [UIColor clearColor],
                                          FAKImageAttributeShadow : shadowAttr};
    // 選択時のattributes
    NSMutableDictionary *selectedIconAttrs = unselectedIconAttrs.mutableCopy;
    selectedIconAttrs[FAKImageAttributeForegroundColor] = [UIColor colorWithRed:0.3 green:0.3 blue:1 alpha:1];


    // 非選択時のアイコン画像
    UIImage *unselectedIconImage = [FontAwesomeKit imageForIcon:FAKIconStar
                                                       imageSize:FAKImageSizeTabbar
                                                        fontSize:29
                                                      attributes:unselectedIconAttrs];
    // 選択時のアイコン画像
    UIImage *selectedIconImage = [FontAwesomeKit imageForIcon:FAKIconStar
                                                       imageSize:FAKImageSizeTabbar
                                                        fontSize:29
                                                      attributes:selectedIconAttrs];

    // タブの画像を、非選択時と選択時で別々に設定
    [self.tabBarItem setFinishedSelectedImage:selectedIconImage
                  withFinishedUnselectedImage:unselectedIconImage];
}

以上です。これでアイコン画像をどっかから拾ってくる徒労から解放されることでしょう！