iPhone 自訂navigation bar全攻略 包含按鈕,高度及圖片背景

iPhone的UI真的有很多小細節,我想也累積一些東西了就po上來吧.
自製化的navigation bar到底有多彈性呢?
我想改變navigation bar上面按鈕的樣式,可以!
想改變navigation bar的高度,可以!
想給navigation bar上個圖片,可以!
那..那navigation bar上按鈕的位置呢? 還是可以!!

如果技巧太鼈三就包涵一下啦:P
navigation bar中的按鈕參照UIBarButtonItemStyle所定義項目少了custom這項
不過可以透過initWithCustomView的方式建立自訂的按鈕
詳細作法如下:
1. 先建立一個UIButton,設定其大小位置以及各狀態對應的圖片,最後還要一個action的指向

UIButton * fooButton = [UIButton buttonWithType:UIButtonTypeCustom];

fooButton.bounds = CGRectMake(0, 0, 40.0, 40.0);

[fooButton setImage:[UIImage imageNamed:@"foo.png"] 

   forState:UIControlStateNormal];

[fooButton addTarget:self 

        action:@selector(fooFired:) 

     forControlEvents:UIControlEventTouchUpInside];

2. 接著new一個UIBarButtonItem後,加入navigationItem(這邊以右邊為例)

UIBarButtonItem *fooBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:fooButton];

 self.navigationItem.rightBarButtonItem = fooBarButtonItem;

 [fooBarButtonItem release];

(trick 1) 接下來講講navigation bar的高度怎麼改變,
網路上可以找到一些方法,不過直接改變高度似乎不可行(至少我自己試過不行)
self.navigationController.navigationBar.frame.size.height
另外一個就正常啦,set自己想要的大小位置

[self.navigationController.navigationBar 
setFrame:CGRectMake(0, 0, self.view.width, height)];

(trick 2) 給navigation bar上個圖片也不會太難
1. 首先new一個UIImageView

UIImageView * banner = [[UIImageView alloc]

initWithFrame:CGRectMake(0, 0, width, height)];

2. 指定這個ImageView載入的圖片

banner.image = [UIImage imageNamed:@"banner.png"];

3. 透過addsubview的方式加進navigation bar(這裡額外指定layer在最底層)

[self.navigationController.navigationBar insertSubview:banner atIndex:0];

 self.navigationController.titleView = banner;  上面這個作法會讓titleView蓋過title的字 (very important)

咳～醜媳婦終究還是要見公婆
改變navigation bar按鈕位置的方法有點投機
如果想要達到下圖的樣子要善用trick1跟trick2

首先在我們改變navigation bar高度的過程中
一定會發現按鈕的位置都偏下,就像下面的圖

沒關係,我們在navigation bar上面放一個高度較高,size較大的圖片蓋過去

如此一來navigation bar上面的按鈕怎麼看都會在中間啦!

順帶一提:

自訂的navigation bar剛開始跑起來都還好端端的,

但是隱藏過後又要顯示時,

按鈕設定全跑了,navigation bar高度也會回復預設值.

後來解決的方法還滿暴力的,

就是要再度顯示之前,再設定一次navigation bar的frame size

[self.navigationController.navigationBar 
setFrame:CGRectMake(0, 0, width, height)];
[self.navigationController setNavigationBarHidden:NO 
                                       animated:NO];

Update:

如果rotate會導致navigation bar上面的button位置跑掉,

表示其高度被設定回預設值,

解決的方法也是在rotate完成後,再設定一次navigation bar的frame size

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {

  //set your frame size here

}

參考資料:stackoverflow - bar height

             stackoverflow - BarButtonItem