iOSアプリ開発をIconFontで幸せに #iOS

チャオ！

iOS開発でアイコンフォントを使うと色々ハッピーになれるよ！
本当はsvg画像をそのまま何もしないで食べてくれるともっとハッピーなんだけどね・・

何がうれしいの？

容量が軽い

そもそもpngなどで書きだしたものよりベクター画像の方軽い
1倍、2倍（レティーナ用）、3倍（6plus用）の３つ必要だが、1つで済む
サイズ、色違いも1つで済む

大きくしてもガタガタにならない

ベタクーなのでなめから、PDFでセットしたベクター画像は最終的にはビットマップに変換されるのでアニメーションとかで大きくしたらガタガタに。

テキストなので使いやすい

テキストなんでUIImageViewではなくUILabelとかで表示する感じになります。
普通にボタンとかにもセットできちゃいます。

UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];

// フォントなんでボタンにもセットできる！
btn.titleLabel.font = [UIFont fontWithName:@"addFont" size:40];

// どのアイコンにするかはsetTitlteでテキストを渡すだけ
[btn setTitle: @"\ue900" forState:UIControlStateNormal];

// 色も簡単にかえられる
[btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

// なのでハイライトで色・アイコンを変えるも簡単♪
[btn setTitle: @"\ue901" forState:UIControlStateHighlighted];
[btn setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];

もうボタンのハイライトのために違う画像を用意したりはいらないのです！

Androidと共通で使える

地味にうれしいです。

デメリットは？

単色オンリー（文字扱いなのでカラフルものは出来ないですー
サイズ合わせにコツがいる。文字サイズ指定でサイズをセットするので、慣れるまで大変

実装方法

1.アイコンフォントを用意

アイコンはicomoonから取るのがオススメ。
ロゴとかもアイコンフォントにしたければ、svgで書きだした画像を食べさせるとフォント化してくれます。
icomoonの使い方とかは　このサイトが詳しいかも
icomoonの使い方

2.カスタムフォントの使い方

カスタムフォントのセットしかたはここが詳しいです。
フォントをセットするのにPostScript名でセットする必要があるんですが、その辺詳しく書いてあって素敵です。
iOSアプリでカスタムフォントを利用する

3.こういうのがアレば便利に使えるかも

マクロ

こういうマクロを用意しておけば、いつでもどこでも気軽にセットできる！

#define ICON_FONT(__SIZE) [UIFont fontWithName:@"addFont" size:__SIZE]
//こんな感じで使う
label.font = ICON_FONT(20);

テキストをセットするときは@"\ue900"とか@"p"とか何がどのアイコンだったか分からなくなりがちなので、下記みたいに定数化しておくと幸せになれます。

定数

static NSString *const IconHome = @"\ue900";
//こんな感じで幸せ
label.text = IconHome;

カテゴリ

IconFontをUIImageでほしい場合が合ったりするので下記のようなカテゴリを用意していると色々捗ります。

+ (UIImage *)iconFont:(NSString *)icon
                 size:(CGFloat)size
                 rect:(CGSize)rect
                color:(UIColor *)color
{
    UIFont *font = ICON_FONT(size);

    UIGraphicsBeginImageContextWithOptions(rect, NO, 0);

    NSDictionary *stringAttributes = @{NSForegroundColorAttributeName : color,
                                       NSFontAttributeName : font};
    NSAttributedString *attString = [[NSAttributedString alloc] initWithString:icon
                                                                    attributes:stringAttributes];
    NSStringDrawingContext *ctx = [[NSStringDrawingContext alloc] init];
    CGRect boundingRect = [attString boundingRectWithSize:CGSizeMake(size, size) options:0 context:ctx];
    [attString drawInRect:CGRectMake((rect.width/2.0f) - boundingRect.size.width/2.0f,
                                     (rect.height/2.0f) - boundingRect.size.height/2.0f,
                                     rect.width,
                                     rect.height)];
    UIImage *iconImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return iconImage;
}

それではアイコンフォントでハッピーになってもらえればと！