CodeIQ MAGAZINECodeIQ MAGAZINE

CodeIQ MAGAZINECodeIQ MAGAZINE

iOSアプリのデザイン「UIAppearance」でスタイルシートっぽいワークフロー #iOS #DeNA

2014.05.21 Category：エンジニアコラム Tag： , ,

  • このエントリーをはてなブックマークに追加
main

最近は、プロトタイプツールがWebデザイナーやUI デザイナー界隈で流行っていますが、iOSのコードを直接いじれば、より高速に精度高いリリースプロダクトが作れるかもしれません。

DeNA高橋伸弥さんが今回ご紹介する UIAppearanceの部分だけでも触れると、スタイルシートのようにアプリのデザイン調整ができます。 by 馬場美由紀 （CodeIQ中の人）

UIAppearance

UIAppearanceはCSS のように、UI要素をまとめて装飾可能な技術です。

iOS5より搭載開始し、iOS6、iOS7と若干の変更が行なわれながら着実に進化している機構で、今現在のiOSアプリデザイン実装の必須知識と言えます。

iOS5,iOS6でスキュアモーフィズムでジューシーなグラフィックのUIのアプリが流行りましたが、まさにこの機能が活躍していたと言えます。 iOS7からいわゆるフラットデザインが流行っていますが、よりグラフィックの洗練さを求められることになり、ますます活躍することとなりました。

ということで、知っている方には今さらという内容になるかもしれませんが、リファレンスなども用意したので、ぜひご活用ください。

UIAppearance自体はメソッドが少なく、AppleのSDKリファレンスもシンプルです。iOS7時点で用意されているメソッドは次の二つのみです。

メソッド 説明
UIAppearance appearance: 一斉に変更する
UIAppearance appearanceWhenContainedIn: あるViewに含まれるものを一斉に変更する（親Viewが何かによって表示を変える）

UIAppearance の基本

UIAppearanceを使うと、UIパーツの、大きさ、フォント、色使い、背景画像、オフセット位置、装飾などを一斉に変更できます。

例:全ての画面でのUINavigationBarの色を変える

// UINavigationBarベースアピアランスの背景色を変更します
[UINavigationBar appearance].backgroundColor = [UIColor redColor];

UINavigationBarなど各UIパーツは、UIAppearanceプロトコルのプロキシが実装されており、このプロトコルに対応したプロパティやメソッドが使用可能です。

UI_APPEARANCE_SELECTORが設定されているメソッド、プロパティが一斉変更の対象になります。

この一覧はTerminalで以下のコマンドで一覧できます。

$ cd /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS*.sdk/System/Library/Frameworks/UIKit.framework/Headers
$ grep -H UI_APPEARANCE_SELECTOR ./* | sed 's/ __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_5_0) UI_APPEARANCE_SELECTOR;//'

出典 UIAppearance – NSHipster *Mattt 先生のブログは毎回素晴らしいです。

UI_APPEARANCE_SELECTOR 対応リファレンス

上述したコマンドで出力したプロパティ、メソッドの簡易解説リファレンスです。

UIActivityIndicatorView – くるくるローディング

メソッド iOS 説明
@property (readwrite, nonatomic, retain) UIColor *color; 5 アクティビティインジケーターの色を変更します

UIBarButtonItem – バーの上にのるボタン

メソッド iOS 説明
- (void)setBackgroundImage:(UIImage *)backgroundImage forState:(UIControlState)state barMetrics:(UIBarMetrics)barMetrics 5 状態ごとのUIBarButtonItemの背景イメージを設定します UIBarMetricsにはランドスケープモードかポートレートモードかを指定します
- (UIImage *)backgroundImageForState:(UIControlState)state barMetrics:(UIBarMetrics)barMetrics 5 getter
- (void)setBackgroundImage:(UIImage *)backgroundImage forState:(UIControlState)state style:(UIBarButtonItemStyle)style barMetrics:(UIBarMetrics)barMetrics 6 状態ごとのUIBarButtonItemの背景イメージとスタイルを設定します。UIBarMetricsにはランドスケープモードかポートレートモードかを指定します
- (UIImage *)backgroundImageForState:(UIControlState)state style:(UIBarButtonItemStyle)style barMetrics:(UIBarMetrics)barMetrics 6 getter
- (void)setBackgroundVerticalPositionAdjustment:(CGFloat)adjustment forBarMetrics:(UIBarMetrics)barMetrics 5 背景の縦位置を調整できます
- (CGFloat)backgroundVerticalPositionAdjustmentForBarMetrics:(UIBarMetrics)barMetrics 5 getter
- (void)setTitlePositionAdjustment:(UIOffset)adjustment forBarMetrics:(UIBarMetrics)barMetrics 5 タイトルの位置を調整できます
- (UIOffset)titlePositionAdjustmentForBarMetrics:(UIBarMetrics)barMetrics 5 getter
- (void)setBackButtonBackgroundImage:(UIImage *)backgroundImage forState:(UIControlState)state barMetrics:(UIBarMetrics)barMetrics 5 戻るボタンの背景イメージを変更します
- (UIImage *)backButtonBackgroundImageForState:(UIControlState)state barMetrics:(UIBarMetrics)barMetrics 5 getter
- (void)setBackButtonTitlePositionAdjustment:(UIOffset)adjustment forBarMetrics:(UIBarMetrics)barMetrics 5 戻るボタンラベルの位置を調整できます
- (UIOffset)backButtonTitlePositionAdjustmentForBarMetrics:(UIBarMetrics)barMetrics 5 getter
- (void)setBackButtonBackgroundVerticalPositionAdjustment:(CGFloat)adjustment forBarMetrics:(UIBarMetrics)barMetrics 5 戻るボタン背景の立て位置を調整できます
- (CGFloat)backButtonBackgroundVerticalPositionAdjustmentForBarMetrics:(UIBarMetrics)barMetrics 5 getter

UIBarItem – バーの上に乗るアイテム

メソッド iOS 説明
- (void)setTitleTextAttributes:(NSDictionary *)attributes forState:(UIControlState)state 5 ラベルにアトリビュートテキストを設定できます
- (NSDictionary *)titleTextAttributesForState:(UIControlState)state 5 getter

UIButton – ボタン

メソッド iOS 説明
@property(nonatomic) UIEdgeInsets contentEdgeInsets 5 余白を指定します (デフォルト 0)
- (void)setTitleColor:(UIColor *)color forState:(UIControlState)state 5 ラベルの色を指定できます (デフォルトnil)
- (void)setTitleShadowColor:(UIColor *)color forState:(UIControlState)state 5 ラベルの影を指定できます (デフォルトnilで50％黒)
- (void)setBackgroundImage:(UIImage *)image forState:(UIControlState)state 5 背景イメージを指定します (デフォルトnil)

UINavigationBar – ナビゲーションヘッダーバー

メソッド iOS 説明
@property(nonatomic,retain) UIColor *barTintColor 7 バーのティントカラーを変更できます (デフォルト nil)
- (void)setBackgroundImage:(UIImage *)backgroundImage forBarPosition:(UIBarPosition)barPosition barMetrics:(UIBarMetrics)barMetrics 7 バーの背景イメージを変更できます UIBarPosition については iOS7 ステータスバーの違いに関係するもの。詳しくは公式ドキュメントへ。
- (UIImage *)backgroundImageForBarPosition:(UIBarPosition)barPosition barMetrics:(UIBarMetrics)barMetrics 7 getter
- (void)setBackgroundImage:(UIImage *)backgroundImage forBarMetrics:(UIBarMetrics)barMetrics 5 バーの背景イメージを変更できます。iOS6まではこっちですね
- (UIImage *)backgroundImageForBarMetrics:(UIBarMetrics)barMetrics 5 getter
@property(nonatomic,retain) UIImage *shadowImage 6 iOS6でバーに影がつくのでそれを変更できるプロパティ
@property(nonatomic,copy) NSDictionary *titleTextAttributes 5 タイトルラベルのアトリビュートを設定できるプロパティ
- (void)setTitleVerticalPositionAdjustment:(CGFloat)adjustment forBarMetrics:(UIBarMetrics)barMetrics 5 タイトルラベルの縦位置を調整できます
- (CGFloat)titleVerticalPositionAdjustmentForBarMetrics:(UIBarMetrics)barMetrics 5 getter
@property(nonatomic,retain) UIImage *backIndicatorImage 7 戻るボタンのアイコンを変更できるプロパティ
@property(nonatomic,retain) UIImage *backIndicatorTransitionMaskImage 7 戻るボタンアイコンのマスクを変更できるプロパティ

UIPageControl – ページコントロール

メソッド iOS 説明
@property(nonatomic,retain) UIColor *pageIndicatorTintColor 6 非アクティブのインジケーターカラーを変更
@property(nonatomic,retain) UIColor *currentPageIndicatorTintColor 6 アクティブのインジケーターカラーを変更

UIProgressView – ローディングバー

メソッド iOS 説明
@property(nonatomic, retain) UIColor* progressTintColor 5 ロード済み部分のカラーを変更
@property(nonatomic, retain) UIColor* trackTintColor 5 溝部分のカラーを変更
@property(nonatomic, retain) UIImage* progressImage 5 ロード済み部分に画像を設定
@property(nonatomic, retain) UIImage* trackImage 5 溝部分に画像を設定

UIRefreshControl – 引っ張って更新

メソッド iOS 説明
@property (nonatomic, retain) NSAttributedString *attributedTitle 6 ラベルにアトリビュートテキストを設定できます

UISearchBar – 検索バー

メソッド iOS 説明
@property(nonatomic,retain) UIColor *barTintColor 7 バーのティントカラーを変更できます
@property(nonatomic,retain) UIImage *backgroundImage 5 バーの背景イメージを変更できます
@property(nonatomic,retain) UIImage *scopeBarBackgroundImage 5 検索に対してフィルターをかける用途の「スコープバー」の背景を指定できます
- (void)setBackgroundImage:(UIImage *)backgroundImage forBarPosition:(UIBarPosition)barPosition barMetrics:(UIBarMetrics)barMetrics 7 バーの背景イメージを変更できます UIBarPosition についてはiOS7ステータスバーの違いに関係するもの。詳しくは公式ドキュメントへ。
- (UIImage *)backgroundImageForBarPosition:(UIBarPosition)barPosition barMetrics:(UIBarMetrics)barMetrics 7 getter
- (void)setSearchFieldBackgroundImage:(UIImage *)backgroundImage forState:(UIControlState)state 5 検索エリアの背景イメージを変更できます
- (UIImage *)searchFieldBackgroundImageForState:(UIControlState)state 5 getter
- (void)setImage:(UIImage *)iconImage forSearchBarIcon:(UISearchBarIcon)icon state:(UIControlState)state 5 検索アイコンのイメージを変更できます
- (UIImage *)imageForSearchBarIcon:(UISearchBarIcon)icon state:(UIControlState)state 5 getter
- (void)setScopeBarButtonBackgroundImage:(UIImage *)backgroundImage forState:(UIControlState)state 5 スコープバーのボタンの背景を指定できます
- (UIImage *)scopeBarButtonBackgroundImageForState:(UIControlState)state 5 getter
- (void)setScopeBarButtonDividerImage:(UIImage *)dividerImage forLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState 5 スコープバー分割部分のイメージを設定できます。leftState/rightStateのところに、左が選択されている時右が選択されている時どちらも選択されていない時で状態を指定します
- (UIImage *)scopeBarButtonDividerImageForLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState 5 getter
- (void)setScopeBarButtonTitleTextAttributes:(NSDictionary *)attributes forState:(UIControlState)state 5 スコープバータイトルテキストのアトリビュートを指定します
- (NSDictionary *)scopeBarButtonTitleTextAttributesForState:(UIControlState)state 5 getter
@property(nonatomic) UIOffset searchFieldBackgroundPositionAdjustment 5 検索エリアの背景位置を調整できます
@property(nonatomic) UIOffset searchTextPositionAdjustment 5 検索エリアのテキスト位置を調整できます
- (void)setPositionAdjustment:(UIOffset)adjustment forSearchBarIcon:(UISearchBarIcon)icon 5 検索アイコンの位置を調整できます
- (UIOffset)positionAdjustmentForSearchBarIcon:(UISearchBarIcon)icon 5 getter

UISegmentedControl – 単一選択

メソッド iOS 説明
- (void)setBackgroundImage:(UIImage *)backgroundImage forState:(UIControlState)state barMetrics:(UIBarMetrics)barMetrics 5 各状態に対しての背景イメージを設定できます
- (UIImage *)backgroundImageForState:(UIControlState)state barMetrics:(UIBarMetrics)barMetrics 5 getter
- (void)setDividerImage:(UIImage *)dividerImage forLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState barMetrics:(UIBarMetrics)barMetrics 5 分割部分のイメージを設定できます。leftState/rightStateのところに、左が選択されている時右が選択されている時、どちらも選択されていない時で状態を指定します
- (UIImage *)dividerImageForLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState barMetrics:(UIBarMetrics)barMetrics 5 getter
- (void)setTitleTextAttributes:(NSDictionary *)attributes forState:(UIControlState)state 5 タイトルテキストのアトリビュートを指定します
- (NSDictionary *)titleTextAttributesForState:(UIControlState)state 5 getter
- (void)setContentPositionAdjustment:(UIOffset)adjustment forSegmentType:(UISegmentedControlSegment)leftCenterRightOrAlone barMetrics:(UIBarMetrics)barMetrics 5 内容の位置を調整します。UISegmentedControlSegmentで、左端か右端か中央か単体かで状態を指定します
- (UIOffset)contentPositionAdjustmentForSegmentType:(UISegmentedControlSegment)leftCenterRightOrAlone barMetrics:(UIBarMetrics)barMetrics 5 getter

UISlider – スライダー

メソッド iOS 説明
@property(nonatomic,retain) UIColor *minimumTrackTintColor 5 スライダーの左、値の量を示す溝のティントカラーを指定します
@property(nonatomic,retain) UIColor *maximumTrackTintColor 5 スライダーの右、全体の量を示す溝のティントカラーを指定します
@property(nonatomic,retain) UIColor *thumbTintColor 5 スライダーの操作部分のティントカラーを指定します

UIStepper – 数字を＋と—で入力

メソッド iOS 説明
- (void)setBackgroundImage:(UIImage*)image forState:(UIControlState)state 6 ステッパーの背景イメージを指定します
- (UIImage*)backgroundImageForState:(UIControlState)state 6 getter
- (void)setDividerImage:(UIImage*)image forLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState 6 分割部分のイメージを設定できます leftState/rightState のところに、左が選択されている時右が選択されている時どちらも選択されていない時で状態を指定します
- (UIImage*)dividerImageForLeftSegmentState:(UIControlState)state rightSegmentState:(UIControlState)state 6 getter
- (void)setIncrementImage:(UIImage *)image forState:(UIControlState)state 6 増やす部分の背景イメージを指定します
- (UIImage *)incrementImageForState:(UIControlState)state 6 getter
- (void)setDecrementImage:(UIImage *)image forState:(UIControlState)state 6 減らす部分の背景イメージを指定します
- (UIImage *)decrementImageForState:(UIControlState)state 6 getter

UISwitch – スイッチ

メソッド iOS 説明
@property(nonatomic, retain) UIColor *onTintColor 6 スイッチがオンの時のティントカラーを指定します
@property(nonatomic, retain) UIColor *thumbTintColor 6 スイッチの操作部分のティントカラーを指定します
@property(nonatomic, retain) UIImage *onImage 6 スイッチがオンの時の背景イメージを指定します
@property(nonatomic, retain) UIImage *offImage 6 スイッチがオフの時の背景イメージを指定します

UITabBar – タブバー

メソッド iOS 説明
@property(nonatomic,retain) UIColor *barTintColor 7 タブバーのティントカラーを指定します (デフォルトnil)
@property(nonatomic,retain) UIColor *selectedImageTintColor 5 タブバー選択中画像のティントカラーを指定します
@property(nonatomic,retain) UIImage *backgroundImage 5 タブバーの背景イメージを指定します
@property(nonatomic,retain) UIImage *selectionIndicatorImage 5 タブバーの選択中表示イメージを指定します
@property(nonatomic,retain) UIImage *shadowImage 6 タブバーの影のイメージを指定します
@property(nonatomic) UITabBarItemPositioning itemPositioning 7 タブバーのアイテムの位置を調整します
@property(nonatomic) CGFloat itemWidth 7 タブバーのアイテムの幅
@property(nonatomic) CGFloat itemSpacing 7 タブバーのアイテムの余白
@property(nonatomic) UIBarStyle barStyle 7 タブバーのスタイル

UITabBarItem – タブバーに乗るアイテム

メソッド iOS 説明
- (void)setTitlePositionAdjustment:(UIOffset)adjustment 5 タブバーアイテムのタイトルラベルの位置を調整します
- (UIOffset)titlePositionAdjustment 5 getter

UITableView – テーブルビュー

メソッド iOS 説明
@property (nonatomic) UIEdgeInsets separatorInset 7 テーブルビューセル区切り開始位置を指定します。UIEdgeInsetsZeroを入れると線がピッチリきます
@property(nonatomic, retain) UIColor *sectionIndexColor 6 セクションインデックス(右側のインデックス部分)のテキストカラーを指定します
@property(nonatomic, retain) UIColor *sectionIndexBackgroundColor 7 セクションインデックスの背景カラーを指定します
@property(nonatomic, retain) UIColor *sectionIndexTrackingBackgroundColor 6 セクションインデックスの選択中の背景カラーを指定します

UITableViewCell – テーブルビューに乗るアイテム

メソッド iOS 説明
@property (nonatomic) UIEdgeInsets separatorInset 7 テーブルビューセル区切り開始位置を指定します。UIEdgeInsetsZeroを入れると線がピッチリきます

UIToolbar – 汎用バー

メソッド iOS 説明
@property(nonatomic,retain) UIColor *barTintColor 7 バーのティントカラーを指定します (デフォルト nil)
- (void)setBackgroundImage:(UIImage *)backgroundImage forToolbarPosition:(UIBarPosition)topOrBottom barMetrics:(UIBarMetrics)barMetrics 5 バーの背景イメージを指定します
- (UIImage *)backgroundImageForToolbarPosition:(UIBarPosition)topOrBottom barMetrics:(UIBarMetrics)barMetrics 5 getter
- (void)setShadowImage:(UIImage *)shadowImage forToolbarPosition:(UIBarPosition)topOrBottom 6 バーの影を指定します
- (UIImage *)shadowImageForToolbarPosition:(UIBarPosition)topOrBottom 6 getter

用語整理

tintColor (ティントカラー)はUIのアクティブになっている部分のアクセントカラーのことです。

attributeText (アトリビュートテキスト)はテキストに属性が付けられる物で、リッチテキストのことです。

getterはset～と対になっており、その値を取り出せる物です。説明を省略しました。

カスタムUIAppearanceを作るチュートリアル

上記以外のプロパティやUIパーツを変更したい場合は、既存クラスのプロトコルを実装することで、カスタムアピアランスを作成することができます。

パターン 1: 既存クラスを継承、またはカテゴリを作る

UIButtonを継承したクラスFEBSpecialButton を作成し、UI_APPEARANCE_SELECTORをプロパティ・メソッドにくっつける事で、一斉変更に対応したプロパティ・メソッドを作成することができます。

あるいは、お行儀があまり良くないとされますが、カテゴリを作って既存クラスを上書きするのも良いでしょう。

アプリの基本フォントをiOS7のテーマフォントであるHelveticaから最近巷でブームのAvenir-Nextにし、全体をダークな感じにしてみます。 背景はグラデーションのパターンテクスチャーに差し替えます。

実装

こんな感じのデフォルトUIパーツを使用した物にアピアランスを指定します。

FEBTheme.h/FEBTheme.mとしてアピアランス指定用の以下のクラスを作成しました。

objective-c: FEBTheme.h

#import <Foundation/Foundation.h>

@interface FEBTheme : NSObject

+ (void)attachTheme;

@end

@interface FEBSpecialButton : UIButton

- (void)setCornerRadius:(CGFloat)cornerRadius UI_APPEARANCE_SELECTOR;
- (void)setBorderColor:(UIColor *)borderColor UI_APPEARANCE_SELECTOR;
- (void)setBorderWidth:(CGFloat)borderWidth UI_APPEARANCE_SELECTOR;

@end

objective-c: FEBTheme.m 

#import "FEBTheme.h"

@implementation FEBTheme

+ (void)attachTheme {

    UIImage *imageNavigation  = [UIImage imageNamed:@"gradientA"];
    UIImage *imageTabs        = [UIImage imageNamed:@"gradientB"];
    UIColor *colorBackground  = [UIColor colorWithRed:0.176 green:0.188 blue:0.215 alpha:1];
    UIColor *colorBackground2 = [UIColor colorWithRed:0.364 green:0.38 blue:0.372 alpha:1];
    UIColor *colorHeading     = [UIColor colorWithRed:1 green:0.998 blue:0.996 alpha:1];
    UIColor *colorNormal      = [UIColor colorWithRed:0.751 green:0.756 blue:0.745 alpha:1];
    UIColor *colorHighlighted = [UIColor colorWithRed:0.514 green:0.803 blue:0.879 alpha:1];

    NSDictionary *attributesHeading = [NSDictionary dictionaryWithObjectsAndKeys:
                                       [UIFont fontWithName:@"AvenirNext-Medium" size:18], NSFontAttributeName,
                                       colorHeading, NSForegroundColorAttributeName,
                                       nil];
    NSDictionary *attributesTab = [NSDictionary dictionaryWithObjectsAndKeys:
                                   [UIFont fontWithName:@"AvenirNext-Medium" size:9], NSFontAttributeName,
                                   colorNormal, NSForegroundColorAttributeName,
                                   nil];
    NSDictionary *attributesTabActive = [NSDictionary dictionaryWithObjectsAndKeys:
                                         [UIFont fontWithName:@"AvenirNext-Medium" size:9], NSFontAttributeName,
                                         colorHighlighted, NSForegroundColorAttributeName,
                                         nil];

    [[UINavigationBar appearance] setTitleTextAttributes:attributesHeading];
    [[UINavigationBar appearance] setBackgroundImage:imageNavigation forBarMetrics:UIBarMetricsDefault];
    [[UINavigationBar appearance] setTintColor:colorHighlighted];
    [[UITableView appearance] setBackgroundColor:colorBackground];
    [[UITableViewCell appearance] setBackgroundColor:colorBackground];
    [[UISearchBar appearance] setBackgroundColor:colorBackground2];
    [[UISearchBar appearance] setTintColor:colorHighlighted];
    [UISearchBar appearance].backgroundImage = imageTabs;
    [[UISlider appearance] setMinimumTrackTintColor:colorHighlighted];
    [[UISlider appearance] setThumbTintColor:colorNormal];
    [[UIButton appearance] setTitleColor:colorHighlighted forState:UIControlStateNormal];
    [[UIStepper appearance] setTintColor:colorHighlighted];
    [[UISwitch appearance] setTintColor:colorHighlighted];
    [[UISwitch appearance] setOnTintColor:colorHighlighted];
    [[UILabel appearance] setTextColor:colorNormal];
    [[UILabel appearance] setFont:[UIFont fontWithName:@"AvenirNext-Medium" size:16]];
    [[UITabBarItem appearance] setTitleTextAttributes:attributesTabActive forState:UIControlStateSelected];
    [[UITabBarItem appearance] setTitleTextAttributes:attributesTab forState:UIControlStateNormal];
    [[UITabBar appearance] setTintColor:colorHighlighted];
    [[UITabBar appearance] setBackgroundImage:imageTabs];
    [[UITabBarItem appearance] setTitlePositionAdjustment:UIOffsetMake(0, -2)];

    [[FEBSpecialButton appearance] setCornerRadius:4];
    [[FEBSpecialButton appearance] setBorderColor:colorHighlighted];
    [[FEBSpecialButton appearance] setBorderWidth:1];
}

@end

@implementation FEBSpecialButton

- (void)setCornerRadius:(CGFloat)cornerRadius {
    self.layer.cornerRadius = cornerRadius;
}

- (void)setBorderColor:(UIColor *)borderColor {
    self.layer.borderColor = borderColor.CGColor;
}

- (void)setBorderWidth:(CGFloat)borderWidth {
    self.layer.borderWidth = borderWidth;
}

@end

さらに、Storyboard上に置いてあるUIButtonのクラスを、FEBThemeのもの(FEBSpecialButton)と置き換えます。

AppDelegate.mでテーマ適用します。

[FEBTheme attachTheme];

実行して変更されていたらOKです。

パターン2: CSSを書くように記述できるツールを使用する

JSON形式やCSS形式でアピアランスを定義していくツールがオープンソースで開発されています。
Pixate Freestyleは有償ソフトでしたが 今年の2/19にオープンソース化されました。

CSSとは多少プロパティ名など書き方が変わりますが、特に後者のPixate FreestyleはStoryboardと組み合わせれば、Dreamweaverなどウェブデザインツールに似たスタイルでデザイン調整が可能なので、とても便利です。

ライブラリの依存関係は増えてしまいますが、大本の呼び出し以外はアピアランスの指定部分も一つのファイルにできるので、前述の方法よりも楽に作業が可能かもしれません。

CSS/JSONを作成し、どこかで呼び出すため、パターン1とほぼ変わらないワークフローになります。

オススメワークフロー

個人的なオススメとしては、どちらの方法にしてもデザイナーが見た目をいじりやすいように、一つのファイルにアピアランス系をまとめると、モテる気がしています。

まとめ

カッコいいアプリ作りましょう！

参考

高橋伸弥氏
寄稿者プロフィール　高橋伸弥氏
デザイナー／エンジニア。最近は「パズ億」などをお手伝い。飼い猫の毛を撒き散らしながらウェブサービスやアプリの開発をします。
Twitter:@feb19

CodeIQコード銀行にあなたのコードを預けてみませんか？

  • CodeIQコード銀行ではあなたのコードを財産と考えます。
  • お預かりいただいたコードは、CodeIQコード銀行がしっかり評価し、フィードバックいたします。
  • 当コード銀行にお預けいただいたコードは、企業がみてスカウトをかける可能性があります。
  • 転職したい方や将来転職することを考えている方で、今の自分のスキルレベルを知りたい方はぜひ挑戦してみてください。
  • 企業からスカウトがきたら困る人は挑戦しないでください。

興味を持った方はこちらからチャレンジを！

  • このエントリーをはてなブックマークに追加

■この記事を書いた人

avatar

馬場美由紀 （CodeIQ中の人）

エンジニアの勉強会やイベントレポート担当。技術やキャリアに関するエンジニア向けお役立ち情報もお伝えしていきます。面白い情報があったら教えてね！酔ったら記憶なくす記憶飛部所属。

■関連記事

新着記事

週間ランキング

CodeIQとは

CodeIQ（コードアイキュー）とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
ページ上部へ
codeiq

リクルートグループサイトへ

キュラゲ ページ上部へ