2.1 UINavigationController
UINavigationController Class Reference | View Controller Programming Guide for iOS
UINavigationController は UIViewController を階層的に管理するコンテナです。複数の UIViewController はスタックで管理されます。またその各 UIViewController にナビゲートするインタフェース（UINavigationBar, UIToolBar）も管理します。
UINavigationController における重要なプロパティとメソッドは以下の通りです。
| プロパティ名 | 説明 |
|---|---|
| viewControllers | NavigationControllerで管理されているViewControllerのスタックを取得できます。 |
| navigationBar | NavigationControllerを使っているときに画面上部に表示されるバー。ViewControllerのタイトルや画面遷移に関するボタンを配置します。 |
| toolbar | NavigationControllerを使っているときに画面下部に表示されるバー。表示しているViewControllerに固有の操作や、あまり重要でない操作を行うボタンなどを配置することが多いです。 |
| メソッド名 | 説明 |
|---|---|
- initWithRootViewController: |
最初に表示するViewControllerとしてrootViewControllerを渡してUINavigationControllerを生成するイニシャライザです。 |
- pushViewController:animated: |
引数として渡したViewControllerへ遷移します。このViewControllerはスタックに積まれ、遷移の階層が一つ深くなります。 |
- popViewControllerAnimated: |
一つ前の階層に戻る画面遷移を行います。またスタックの階層は一つ浅くなります。 |
プロジェクトについてはSampleProjects/2.1/MixiNavigationSample2をご覧ください。
無限に push する画面遷移を実装しましょう。プロジェクトテンプレートで Single View Applicationを作って以下の手順で実装を行います。
- 無限に表示されるViewControllerのクラス(MixiViewController)を作成
- このクラスをstoryboard上で定義し、ボタンを追加、ボタンタップ時のハンドラをソースコードに記述して紐づける
- ボタンタップ時に新しいMixiViewControllerにpushするようにコードを記述する
- ViewControllerが起動した時にNavigationControllerを表示する。
これは 1.3の章で行った内容なので省略します。
ViewControllerのstoryboard ID はクラス名と同じで MixiViewController、
ボタンタップ時のハンドラは pushButtonTapped: としています。
新しいMixiViewControllerをstoryboardから生成して、pushします。
// MixiViewController.m
- (IBAction)pushButtonTapped:(id)sender
{
MixiViewController *viewController = [self.storyboard instantiateViewControllerWithIdentifier:@"MixiViewController"];
[self.navigationController pushViewController:viewController animated:YES];
}UIViewControllerはプロパティとして navigationController を持っています。このプロパティが自分を管理しているUINavigationControllerになるので、このプロパティに対して - pushViewController:animated:を実行します。
アプリケーションが起動した時に表示されるUIViewController (Xcode6ではViewControllerというクラス名)が表示されたときに MixiViewControllerをrootにもつNavigationControllerを表示します。
// ViewController.m
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
UIViewController *viewController = [self.storyboard instantiateViewControllerWithIdentifier:@"MixiViewController"];
UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:viewController];
[self presentViewController:navigationController animated:YES completion:nil];
}
シミュレータを実行するとMixiViewControllerが表示され、ボタンをタップすると次々画面遷移できれば完了です。
以前のバージョンの資料を参考にする場合は以下のコードを参照ください。
MixiAppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
self.viewController = [[MixiViewController alloc] initWithNibName:@"MixiViewController" bundle:nil];
UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:_viewController];
self.window.rootViewController = navigationController;
[self.window makeKeyAndVisible];
return YES;
}MixiViewController.h
#import <UIKit/UIKit.h>
@interface MixiViewController : UIViewController
- (IBAction)pressPushButton:(id)sender;
@endMixiViewController.m
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.title = [NSString stringWithFormat:@"%d", [self.navigationController.viewControllers count]];
}
- (IBAction)pressPushButton:(id)sender
{
[self.navigationController pushViewController:[[MixiViewController alloc] init] animated:YES];
}MixiViewController.xib
rootView の TopBar を NavigationBar にすると、NavigationBar が現れます。これは実際に NavigationBar を設置しているのでは無く、NavigationBar がある体でレイアウトをするという意味です。この ViewController には NavigationBar が入ってくるので、それを考慮して他のレイアウトを作ることが出来ます。
確認 : navigationController.viewControllers にスタックされていることを、ログで確認してください。
- 上記で解説した、"無限にPushできる画面遷移" を実装してください
- 1.の課題にさらに、各階層をNavigationBarに表示するようにしてください。
ヒント : UIViewControllerのプロパティ titleを使います。
回答は SampleProjects/2.1/MixiNavigationSample2 をごらんください。
UINavigationBar Class Reference
UINavigationItem Class Reference
UINavigationBar は UINavigationItem を管理するためのコンテナです。UINavigationItem は各 ViewController が持っていて、NavigationBar に表示させる情報を管理しています。
NavigationBar 右上方にボタンを設置してみましょう。ボタンタップで pop を実装しましょう。
MixiVIewController.m
- (void)viewDidLoad
{
[super viewDidLoad];
UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithTitle:@"pop"
style:UIBarButtonItemStylePlain
target:self
action:@selector(pressPopButton)];
self.navigationItem.rightBarButtonItem = rightButton;
}
- (void)pressPopButton
{
[self.navigationController popViewControllerAnimated:YES];
}UIAppearance Protocol Reference
UIAppearance を用いると、特定の UIComponent のデザインを一括して変更することが出来ます。
MixiAppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// 略
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"customNavBarImage1"] forBarMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setTintColor:[UIColor blackColor]];
// 略
}
画像データはこちら customNavBarImage1.png
変更できるコンポーネントとできないコンポーネントがあるんですが、 UI_APPEARANCE_SELECTOR というアノテーションのついたプロパティは変更できます。
詳しくは http://nshipster.com/uiappearance/ をご覧ください。
以下の画面遷移を行うアプリケーションを作ってください。
- 最初に表示される画面にボタンが三つ並んでいる (ボタンタイトルはそれぞれ "Button A", "Button B", "Button C")
- それぞれのボタンをタップすると次のViewControllerにpushされる
- 遷移先の画面の中央にどのボタンがタップされて遷移されたかが表示される
上の遷移図のようにstoryboardで遷移先のViewControllerを３つ全て別々に組み上げることもできますが、遷移先のViewControllerをひとつのクラスにまとめるほうがシンプルです。その際、いくつかの作り方があります。
- Segueを使って画面遷移を行う。データの受け渡しには
- prepareForSegue:sender:を用いる - この際、ボタンタップ時にsegueを実行するのにstoryboardから指定する方法とボタンのハンドラを作り、そこから呼び出すなどの方法があります。
- ViewControllerを
-instantiateViewControllerWithIdentifier:で作って- pushViewController:animated:で遷移する
いくつかの遷移方法がありますが、それぞれを実装してみて、メリットデメリットを実際に体感することで スムーズな画面遷移の設計を行うことができるようになります。
以下のプロジェクトをごらんください。 SampleProjects/2.1/NavigationPractice
この例では、ボタンタップ時にsegueを実行し、- prepareForSegue:sender: でデータの受け渡しを行っています。