UINavigationBarのボタンはコードで追加する

UINavigationControllerをベースにしたビューの遷移は、ビューがプッシュされる度にナビゲーションバー(UINavigationBar)と呼ばれるツールバーが上端に配置される。※ナビゲーションバーには遷移を逆に辿るために「戻る」ナビゲーション用ボタンが自動的に配置されるが、その他にもUIBarButtonItem(ボタン)を追加することができる。

ただしこのUIBarButtonItem(ボタン)はInterfaceBuilderから追加するには制限があり、(左端にボタンを配置してしまうと遷移を遡るナビゲーションボタンが消えてしまうため)実質右端に一つしかボタンを配置することができないのである。

このような仕様なので使えないなと思っていたのだが、このUIBarButtonItemのカスタマイズはコードから行うことで上述した制限はなくなる。(ただしiOS5以降しか使えない)

  • UINavigationController派生クラスのviewDidLoadメソッド
- (void)viewDidLoad
{
    [super viewDidLoad];
    UIBarButtonItem* left1 = [[UIBarButtonItem alloc]
                              initWithTitle:@"左1"
                              style:UIBarButtonItemStyleBordered
                              target:self
                              action:nil];
    UIBarButtonItem* left2 = [[UIBarButtonItem alloc]
                              initWithTitle:@"左2"
                              style:UIBarButtonItemStyleBordered
                              target:self
                              action:nil];
    UIBarButtonItem* left3 = [[UIBarButtonItem alloc]
                              initWithTitle:@"左3"
                              style:UIBarButtonItemStyleBordered
                              target:self
                              action:nil];
    self.navigationItem.leftBarButtonItems = @[left1, left2, left3];
    
    UIBarButtonItem* right1 = [[UIBarButtonItem alloc]
                              initWithTitle:@"右1"
                              style:UIBarButtonItemStyleBordered
                              target:self
                              action:nil];
    UIBarButtonItem* right2 = [[UIBarButtonItem alloc]
                              initWithTitle:@"右2"
                              style:UIBarButtonItemStyleBordered
                              target:self
                              action:nil];
    UIBarButtonItem* right3 = [[UIBarButtonItem alloc]
                              initWithTitle:@"右3"
                              style:UIBarButtonItemStyleBordered
                              target:self
                              action:nil];
    self.navigationItem.rightBarButtonItems = @[right1, right2, right3];
}

このようなコードを書くことで、次のようにナビゲーションバーの左右にボタンが配置される。(NSArrayの新しいリテラル記法が超絶便利だ)

左右とも三つめのボタンが切れているが、画面の向きをランドスケープに変えるときちんと配置されていることが分かる。

なおこのままだとUINavigationControllerの一番の特徴である遷移を遡るためのナビゲーションボタンが消えてしまうが、以下の一行を追加することでナビゲーションボタンを有効にすることもできる。

self.navigationItem.leftItemsSupplementBackButton = YES; //戻るボタンを有効にする

今度はこのように表示される

  • ポートレイト

  • ランドスケイプ

iOS4までは制限がきつく、このようにボタンを配置するにはカスタムビューを作成するしかなかったらしい。

※消してしまうこともできるが、であればわざわざUINavigationControllerを使う意味は無い。