iOS5から使えるAppearanceを使って、Navigationbarをカスタマイズする

• Tweet
• 

iOS5から、ナビゲーションバーやタブバーなどを一括設定で設定できるようになりました。このことで、背景の色や文字色、背景画像を使ったりとバリエーションを簡単に増やすことができるようになっています。

ナビゲーションバーの背景画像を設定

全てのビューに適用させたいので、AppDelegate.mに記述して一括設定します。起動直後に動くdidFinishLaunchingWithOptionsの中に設定を記述します。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    UIImage *image = [UIImage imageNamed:@"back.png"];
    [[UINavigationBar appearance] setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
    [[UINavigationBar appearance] setTintColor:[UIColor colorWithRed:0.80 green:0.71 blue:0.51 alpha:1.0]];
    return YES;
}

setBackgroundImage:imageで背景画像を設定しています。サイズはナビゲーションバーと同じサイズ(320×44と倍のサイズでRetina用を準備)で作ります。

そして、ナビゲーションバーでボタンを出す時に、どの色に合わせるかをsetTintColorで設定しています。そうすると、下のように背景に画像が入り、かつボタンの色もTintColorに合わせた色が反映されます。

ナビゲーションバーのタイトルフォント設定

デフォルトでは、白でシャドウがかかったものになりますが、背景の色が薄ければ文字が見えません。この文字も設定できます。

[[UINavigationBar appearance] setTitleTextAttributes:
     [NSDictionary dictionaryWithObjectsAndKeys:
      [UIColor colorWithRed:0.31 green:0.25 blue:0.17 alpha:1.0], //タイトルの文字色
      UITextAttributeTextColor,
      [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.3], //シャドウの色
      UITextAttributeTextShadowColor,
      [NSValue valueWithUIOffset:UIOffsetMake(0, -2)], //シャドウの強さ
      UITextAttributeTextShadowOffset,
      nil,
      UITextAttributeFont,
      nil]];

従来に比べ、かんたんに設定でき、アプリ独自の色も出せるようになったので、積極的に使っていきたい機能です。

iPhoneアプリ開発のTips一覧はこちら

効率のいいiOSプログラミング習得法

初心者がプログラミング勉強で挫折しない方法【楽しみながら習得するコツは？】

プログラミングの勉強は本じゃなくて、オンラインスクールがおすすめな理由

フリーランスエンジニアの稼ぎ方

フリーランスエンジニアの稼ぎ方。ぶっちゃけ…開発以外のことを頑張ったほうが結果がでます。

• Tweet
• 

PROFILE

プロフィール

入江 慎吾／サービス開発だけで生きていく
自分のサービスだけで自由に生きる。勢いで受託開発をすべてやめて、サービスだけ作って生きていくことを決めたフリーのエンジニア。得意を教えて副業にできるMENTAを開発中！ （詳しいプロフィール）

WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。

無料メールマガジンを購読する

PRODUCT

イリテクで開発したプロダクト