UINavigationBarの背景画像とタイトルフォントを変更してクールに仕上げる

Tweet

アプリのほうを作ろうと、ちょくちょくコーディングを行なっているところです。

その際に、UINavigationBarに対して背景画像を設定してタイトルに対して影を付けたかったので、ちょっと調べてみました。

まず、UINavigationBarへの背景画像の設定。
AppDelegateに書いてあげれば全てのビューに反映されます。

// NavigationBarの背景画像を設定する
UIImage *image = [UIImage imageNamed:@"background.png"];
[[UINavigationBar appearance] setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setTintColor:[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0]];

この時に、setTintColorでナビゲーションバー上のボタン色を定義できるのですが、こういった色の指定はWeb上の配色表を参考にすることが多いと思います。
16進数の”FFFFFF”のような形式です。この16進数表記を直接UIColorに変換する関数は以下のとおりです。

+ (UIColor*) hexToUIColor: (NSString *)hex alpha: (CGFloat)a
{
	NSScanner *colorScanner = [NSScanner scannerWithString: hex];
	unsigned int color;
	[colorScanner scanHexInt: &color];
	CGFloat r = ((color & 0xFF0000) >> 16) / 255.0f;
	CGFloat g = ((color & 0x00FF00) >> 8) / 255.0f;
	CGFloat b =  (color & 0x0000FF) / 255.0f;
	return [UIColor colorWithRed: r green: g blue: b alpha: a];
}

共通関数やカテゴリとして定義してあげれば色の指定がはかどります。
使う際は、hexToUIColorに文字列として16進数の配色を指定します。

[self hexToUIColor:@"000000" alpha:1.0]

次にタイトルフォントを変更します。
同様にAppDelegateに書きます。

    // NavigationBarのタイトルフォントを変更する
    [[UINavigationBar appearance] setTitleTextAttributes:
     [NSDictionary dictionaryWithObjectsAndKeys:
      [self hexToUIColor:@"FFFFFF" alpha:1.0], // タイトルの文字色
      UITextAttributeTextColor,
      [self hexToUIColor:@"000000" alpha:1.0], // シャドウの色
      UITextAttributeTextShadowColor,
      [NSValue valueWithUIOffset:UIOffsetMake(2, -2)], // シャドウの強さ&向き(x, y)
      UITextAttributeTextShadowOffset,
      nil,
      UITextAttributeFont,
      nil]];

コメントを付けている行で、タイトルの文字色・シャドウの色、強さ、向きを指定出来ます。
上記のコードでは、タイトル色が白でシャドウが黒、シャドウの向きは右上方向に指定しています。
この際の配色は、以下のスライドが参考になりました。
zurui-design

他にも、Subtle Patternsで背景画像のサンプルを探したり、フリーのアイコンを漁ったりしているところです。

ちなみに現時点でこんな感じのナビゲーションバーになりました。
背景画像はマット調のものを探して、タイトル色を白にしています。

Hoge Huga