iOS 7、ナビゲーションバー、ステータスバーのカスタマイズ

この文書は次のとおりです.http://beyondvincent.com/blog/2013/11/03/120-customize-navigation-status-bar-ios-7/#6 

注:本明細書はCustomizing Navigation Bar and Status Bar in iOS 7から訳されています.
最近、多くの開発者と同じように、iOS 7に適したプログラムのアップグレードに忙しいです.最新のiOS 7の外観には多くの変更があります.開発者の観点から,ナビゲーションバーとステータスバーは著しく変化した.ステータスバーは半透明になりました.これは、ナビゲーションバーがステータスバーの後ろに表示されることを意味します.ナビゲーションバーの背景画像がステータスバーの後ろに表示される場合があります.
以前、ナビゲーションバーをカスタマイズする方法について書いたことがあります.しかし、今はそれを更新する時だ.ここで説明する内容は次のとおりです.
iOS 7のデフォルトのナビゲーションバーナビゲーションバーの背景色を設定ナビゲーションバーで背景画像を使用
カスタム返却ボタンの色ナビゲーションバー見出しのフォントを変更ナビゲーションバーのタイトルを画像に変更複数のボタンを追加ステータスバーのスタイルを変更ステータスバーを隠すまとめ
本明細書で提供されるコードは、Xcode 5によって実行される必要がある.まだ古いバージョンのXcodeを使用している場合は、サンプルを実行する前にXcodeをXcode 5にアップグレードしてください.
iOS 7のデフォルトのナビゲーションバー
カスタマイズを開始する前に、iOS 7のデフォルトのナビゲーションバーの外観を見てみましょう.XcodeでSingle View Controllerテンプレートを使用してプロジェクトを作成します.次にview controllerをnavigation controllerに埋め込みます.最初から始めたくない場合は、ここでこのサンプルプロジェクトをダウンロードすることもできます.
Xcode 5にはiOS 6とiOS 7シミュレータが含まれています.次の図のように、2つの異なるシミュレータバージョンでサンプルプログラムを実行して比較できます.

上図に示すように、iOS 7のナビゲーションバーはデフォルトでステータスバーとインターリーブされ、その色も明るいグレーに変更されます.
ナビゲーションバーの背景色の設定
iOS 7では、tintColorプロパティを使用してナビゲーションバーの色を設定するのではなく、bartintColorプロパティを使用して背景色を変更します.AppDelegate.mファイルのメソッドdidFinishLaunchingWithOptions:に次のコードを追加して色を変更できます.

1

[[UINavigationBar appearance] setBarTintColor:[UIColor yellowColor]];

効果は次の図のようになります.

一般的に、私たちは自分の色を使用します.次のマクロはRGBの色を設定するのに便利です.

1

#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

上記のマクロをAppDelegate.mファイルに配置し、指定したRGBに基づいてUIcolorオブジェクトを作成します.次の例を示します.

1

[[UINavigationBar appearance] setBarTintColor:UIColorFromRGB(0x067AB5)];

デフォルトでは、ナビゲーションバーのtranslucentプロパティはYESです.また、iOS 7のナビゲーションバーの色をより飽和させるために、すべてのナビゲーションバーをぼかし処理します.次の図は、translucent値がNOとYESの対比効果です.

translucentプロパティを無効にするには、Storyboardでナビゲーションバーを選択し、Attribute Inspectorsでtranslucentのチェックを解除します.
ナビゲーションバーで背景画像を使用する
ナビゲーションバーで背景として画像を使用する場合は、ナビゲーションバーの背後に延びるように、少し高い画像を提供する必要があります.ナビゲーションバーの高さは44 points(88 pixels)から64 points(128 pixels)に変わります.
ナビゲーションバーにカスタムピクチャを設定するには、setBackgroundImage:メソッドを使用します.次のコードを示します.

1

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bg.png"] forBarMetrics:UIBarMetricsDefault];

サンプルエンジニアリングでは、nav_bg.pngとnav_bg_ios7.png.実行してみましょう.次の効果があります.

戻るボタンの顔をカスタマイズ
iOS 7では、すべてのボタンが枠なしです.戻るボタンにはV矢印と前の画面のタイトルがあります(前の画面のタイトルが空の場合は「戻る」と表示されます).戻るボタンをシェーディングするにはtintColorプロパティを使用します.次のコードを示します.

1

[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];

戻るボタンを除いてtintColorプロパティは、すべてのボタンタイトルとピクチャに影響します.

V型を自分の画像に置き換えたい場合は、画像のbackIndicatorImageとbackIndicatorTransitionMaskImageを設定します.次のコードを示します.

1
2

[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back_btn.png"]]; [[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"back_btn.png"]]; 

画像の色はtintColorプロパティによって制御されます.

ナビゲーションバーのタイトルのフォントの変更
iOS 6と同様に、ナビゲーションバーのtitleTextAttributesプロパティを使用して、ナビゲーションバーの文字スタイルをカスタマイズできます.text attributes辞書では、フォント、文字色、文字シャドウ色、および文字シャドウオフセットを指定するキーを使用します.
UItextAttributeFont–フォントkeyUItextAttributeTextColor–文字色keyUItextAttributeTextShadowColor–テキストシャドウ色keyUItextAttributeTextShadowOffset–テキストシャドウオフセットkeyナビゲーションバーのタイトルスタイルを次のコードで変更します.

1
2
3
4
5
6
7

NSShadow *shadow = [[NSShadow alloc] init];  shadow.shadowColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8];  shadow.shadowOffset = CGSizeMake(0, 1);  [[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:  [UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], NSForegroundColorAttributeName,  shadow, NSShadowAttributeName,  [UIFont fontWithName:@"HelveticaNeue-CondensedBlack" size:21.0], NSFontAttributeName, nil]]; 

次の図のように動作します.

ナビゲーションバーのタイトルを画像に変更
ナビゲーションバーのタイトルを画像またはlogoに変更するには、次の行のコードを使用します.

1

self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"appcoda-logo.png"]];

上のコードはtitleViewプロパティを簡単に変更し、画像を割り当てます.注意:これはiOS 7の新しい機能ではありません.以前のiOSバージョンではありません.
具体的な効果は下図の通りです.

複数のボタンを追加
同様に、このテクニックもiOS 7ではなく、開発者がナビゲーションバーに複数のボタンを追加することが多いので、ここで紹介することにしました.ナビゲーションバーの左側または右側に複数のボタンを追加できます.たとえば、ナビゲーションバーの右側にカメラと共有ボタンを追加したい場合は、次のコードを使用します.

1
2
3
4
5

UIBarButtonItem *shareItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:nil]; UIBarButtonItem *cameraItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCamera target:self action:nil];  NSArray *actionButtonItems = @[shareItem, cameraItem]; self.navigationItem.rightBarButtonItems = actionButtonItems; 

次の効果があります.

ステータスバーのスタイルの変更
古いバージョンのiOSでは、ステータスバーは常に白いスタイルです.iOS 7では、各view controllerのステータスバーの外観を変更できます.UIstatusBarStyle定数を使用すると、ステータスバーの内容が暗い色または明るい色であることを指定できます.既定では、ステータスバーの表示は暗い色です.つまり、ステータスバーの時間、バッテリーインジケータ、Wi-Fi信号が暗い色で表示されます.ナビゲーションバーで背景に暗い色を使用すると、次の図のように見えます.

このような場合、ナビゲーションバーのスタイルを明るい色に変更したい場合があります.ここには2つの方法があります.iOS 7では、以下に示すように、view controllerごとにoverridingpreferredStatusBarStyle:メソッドを使用できます.

1
2
3
4

-(UIStatusBarStyle)preferredStatusBarStyle {  return UIStatusBarStyleLightContent; } 

上のコードの効果は次の図のようになります.

iOS 7では、上記の方法でステータスバースタイルを修正するのが素晴らしいです.また,UIApplicationのstatusBarStyleメソッドを用いてステータスバーを設定することも可能であるが,まずView controller-based status bar appearanceの使用を停止する必要がある.Project targetのInfo tabに、View controller-based status bar appearanceという新しいkeyを挿入し、その値をNOに設定します.

次に、ステータスバースタイルを設定するには、次のコードを使用します.

1

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

ステータスバーを非表示
ステータスバーを非表示にする必要がある場合があります.view controllerでoverrideメソッドprefersStatusBarHidden:はい、次のコードで示します.

1
2
3
4

- (BOOL)prefersStatusBarHidden {  return YES; } 

まとめ
iOS 7は開発者にナビゲーションバーとステータスバーの外観をカスタマイズするための新しい自由度を提供しています.上記のテクニックがあなたに役に立つことを望んでいます.
ここでは、サンプルエンジニアリングソースコードをダウンロードできます.関連コードのコメントをキャンセルするだけでテストできます.