ナビゲーションバーのカスタマイズに関して

ios

ナビゲーションバーのカスタマイズ方法に関して書こうと思います。
ナビゲーションバーは、UINavigationItemで管理されています。
このUINavigationItemは、下の４つのプロパティがあります。
① title
② prompt
③ leftBarButtonItem
④ rightBarButtonItem
通常、Stroyboardを使うとカスタマイズに限界があるぽい(やり方しらないだけかも？)

まず、titleとpromptについて、
UIViewControllerのviewDidLoadメソッドにコードを書いて行きます。
UINavigationItemを参照して、プロパティのtitleとpropmtに値を下記の様に設定します。

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.navigationItem.prompt = @"2012-09-11";
    self.navigationItem.title = @"ToDoリスト";
}

表示した時のイメージは、下みたいな感じになります。

20120911003352

次に、leftBarButtonItemとrightBarButtonItemに関して、
これもUIViewControllerのviewDidLoadメソッドにコードを書いて行きます。
UINavigationItemを参照して、プロパティのleftBarButtonItemとrightBarButtonItemに
値を下記のように設定して行きます。

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.navigationItem.prompt = @"2012-09-11";
    self.navigationItem.title = @"ToDoリスト";
    UIBarButtonItem *rightItem = 
        [[UIBarButtonItem alloc]
            initWithBarButtonSystemItem:
                UIBarButtonSystemItemCompose target:nil action:nil];
    UIBarButtonItem *leftItem =
        [[UIBarButtonItem alloc]
            initWithBarButtonSystemItem:
                UIBarButtonSystemItemEdit target:nil action:nil];
    self.navigationItem.rightBarButtonItem = rightItem;
    self.navigationItem.leftBarButtonItem = leftItem;
}

UIBarButtonSystemItemComposeとかUIBarButtonSystemItemEditとか指定していますが、
これは、表示するボタンイメージで、いろいろ種類があります。
今回は、下記のような表示イメージになります。

20120911004645

それで、このボタンですが、独自の画像を指定することもできます。
方法は、UIButtonとUIBarButtonItemのinitWithCustomViewを使うと独自の画像を
ナビゲーションバーのボタンとして定義することができます。
その実装ですが、下記の様な実装になります。

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.navigationItem.title = @"ToDoリスト";
    UIButton *image = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 30, 30)];
    [image setBackgroundImage:
        [UIImage imageNamed:@"Twitter.png"]forState:UIControlStateNormal];
    [image addTarget:self action:@selector(rightItemAction) 
                        forControlEvents:UIControlEventTouchUpInside];
    UIBarButtonItem *rightItem = [[UIBarButtonItem alloc]initWithCustomView:image];
    self.navigationItem.rightBarButtonItem = rightItem;
}

下記のような表示イメージになります。

20120911013408

ちなみに、ナビゲーションバー自体の色も変更可能です。
UINavigationBarのtintColorにUIColorを使って色を指定します。

self.navigationController.navigationBar.tintColor = [UIColor brownColor];

下記のような表示イメージになります。

20120911014430