読者です 読者をやめる 読者になる 読者になる

FlatUIKit

FlatUIKitFlat UI フレームワークを元にデザインされた iOS 向けのコンポーネントライブラリ。
フラットなデザインのアプリを簡単に作ることができる。

f:id:questbeat:20130530021849p:plain

Button、Switch、Segmented Control などの基本的なコンポーネントはすべて用意されている。

さらに Alert View も用意されていて、表示・非表示の際のアニメーションもちゃんと実装されている。

f:id:questbeat:20130530021851p:plain

使い方

このライブラリはカスタムクラスとカテゴリによる拡張の2つで構成されている。
例えば、フラットなボタンが使いたいなら FUIButton クラスを使うのだが、フラットなナビゲーションバーが使いたいなら UINavigationBar+FlatUI.h カテゴリをインポートして configureFlatNavigationBarWithColor: を呼び出さないといけない。

ボタン (FUIButton) のサンプル

FUIButton *button = [[FUIButton alloc] initWithFrame:frame];
button.buttonColor = [UIColor turquoiseColor];
button.shadowColor = [UIColor greenSeaColor];
button.shadowHeight = 3.0f;
button.cornerRadius = 6.0f;
button.titleLabel.font = [UIFont boldFlatFontOfSize:16];
[button setTitleColor:[UIColor cloudsColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor cloudsColor] forState:UIControlStateHighlighted];
[button setTitle:@"Button" forState:UIControlStateNormal];

ナビゲーションバーのサンプル

[self.navigationController.navigationBar configureFlatNavigationBarWithColor:[UIColor turquoiseColor]];

サンプルを見て分かるように、このライブラリでは UIColor もカテゴリで拡張されている。
この部分だけでも切り出して使えそうだ。

+ (UIColor *) turquoiseColor;
+ (UIColor *) greenSeaColor;
+ (UIColor *) emerlandColor;
+ (UIColor *) nephritisColor;
+ (UIColor *) peterRiverColor;
+ (UIColor *) belizeHoleColor;
+ (UIColor *) amethystColor;
+ (UIColor *) wisteriaColor;
+ (UIColor *) wetAsphaltColor;
+ (UIColor *) midnightBlueColor;
+ (UIColor *) sunflowerColor;
+ (UIColor *) tangerineColor;
+ (UIColor *) carrotColor;
+ (UIColor *) pumpkinColor;
+ (UIColor *) alizarinColor;
+ (UIColor *) pomegranateColor;
+ (UIColor *) cloudsColor;
+ (UIColor *) silverColor;
+ (UIColor *) concreteColor;
+ (UIColor *) asbestosColor;

UIFont も拡張されているが、これは付属のフォントを読み込んでいるだけ。

+ (UIFont *)flatFontOfSize:(CGFloat)size;
+ (UIFont *)boldFlatFontOfSize:(CGFloat)size;
+ (UIFont *)italicFlatFontOfSize:(CGFloat)size;

このライブラリはもともと Grouper というアプリの開発中に作られたものだそうだ。
特に難しいことをしなくてもいい感じのデザインのアプリができ上がるので、これを使ったアプリがたくさん出てきそうな予感がする。

ただ、カスタムクラスとカテゴリが混ざってるのはちょっと使いにくい気もする。
どうせなら UIAppearance みたいにバッと全部変えたいな。

FlatUIKit は iOS 5.0 以降でのみ利用可能 (UIStepper を使うなら 6.0 以降)
利用には CoreText.framework が必要なので注意。