学生iOSエンジニア日記

iOSエンジニアの大学生(20)が思ったことをアプトプットします。コメント等でフィードバックをお願いします。

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

 iOSアプリの開発では、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をインポートしておきます。

#import "FontAwesomeKit.h"

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

- (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」で以下のように定義されているので参照して下さい。

// 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の部分を変えます。色や影の具合を調整することができます。以下その一例です。

- (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];
}

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

※開発中サービス、オウンドメディア http://blog.cloudrestaurant.jp