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

JingJong's Blog

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];  


咳～醜媳婦終究還是要見公婆 改變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