よく使うアイコン画像を「Font-Awesome」を使って生成する方法
iOSアプリの開発では、UITabBar、UIButtonなどいろいろなところでそのボタンの役割を表すためのアイコン画像が使われます。 SNS固有のアイコンや、一般的なアイコンなどさまざまなものがありますが、「Font-Awesome」は、その中でよく使われるアイコンを集めたものです。
iOSでは「FontAwesomeKit」というライブラリを使えばFont-AwesomeのアイコンをUIImageとして生成して簡単に使うことできます。 以下はその実装方法を紹介します。具体的な実装は、GitHubで公開されているサンプルコードを参考にしてください。
(1) 環境(Requirements)
(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