iOS學習_客制化Navigation Part1_放置多個圖片按鈕

最近花超多時間在處理美工的問題，總體來說要產出好看友善的界面，需要大量的設計與圖片，而第一步莫過於瞭解什麼樣的物件可以作出什麼效果的客制化，整體來說最容易可以拿來參考的客制化界面，就是內建在iPad裡面的程式，行事曆與備忘錄這兩個已經透露出許多物件可變化的可能性。

首先就是處理幾乎每個程式都會使用的UINavigation，需要客制化的地方大致可分為四項：
1. 右上角的功能按鈕。
2. 左上角的返回鍵。
3. Navigation的底圖。
4. Navigation的Title文字。


本篇講第一點：右上角的功能按鈕。

之前有發過一篇文章“iOS學習_於UINavigation上增加多個按鈕”，最終的效果是會出現預設顏色的按鈕，如果放置有顏色的小圖示則會自動變成灰階，預設的其實已經不錯看，但離美化距離就有一點遠。

做法與以上篇是相同的方法，但這次我們設定按鈕的預設圖片與被按下去的圖片：

UIImage *imgItem_GPS = [UIImage imageNamed:@"btn_gps_un"]; UIImage *imgItem_GPS_click = [UIImage imageNamed:@"btn_gps_click"]; UIButton *btnimg_GPS = [UIButton buttonWithType:UIButtonTypeCustom]; [btnimg_GPS setBackgroundImage:imgItem_GPS forState:UIControlStateNormal]; [btnimg_GPS setBackgroundImage:imgItem_GPS_click forState:UIControlStateHighlighted]; [btnimg_GPS addTarget:self action:@selector(btn_whereIam_Click) forControlEvents:UIControlEventTouchUpInside]; btnimg_GPS.frame = CGRectMake(0.0f, 0.0f, imgItem_GPS.size.width, imgItem_GPS.size.height); UIBarButtonItem *imageGPSButton = [[UIBarButtonItem alloc] initWithCustomView:btnimg_GPS];
上面可以看到我們使用btn_gps_un與btn_gps_click作為效果圖，利用setBackgroundImage方法指定給按鈕，並設定他們應該出現的狀態，最後裝到一個UIBarButtonItem中。

以同樣的步驟，在準備兩個名為imageLayerButton與imageSearchButton的UIBarButtonItem，將其裝到一個NSMutableArray中，並設定給TranslucentToolbar，最後以UIBarButtonItem方法中initWithCustomView來初始化，然後指定給要放置的Navigation(EX:self.navigationItem.rightBarButtonItem)。

//將按鈕加到NSMutableArray當中。 NSMutableArray* buttons = [[NSMutableArray alloc] initWithCapacity:3]; [buttons addObject:imageGPSButton]; [buttons addObject:imageLayerButton]; [buttons addObject:imageSearchButton]; [imageGPSButton release]; [imageLayerButton release]; [imageSearchButton release]; //建立一個UIToolbar來裝載剛剛建立的NSMutableArray TranslucentToolbar *toolbar = [[TranslucentToolbar alloc]initWithFrame:CGRectMake(0, 0, 240, 44)]; [toolbar setItems:buttons animated:NO]; [buttons release]; UIBarButtonItem *navigationRightBarButton = [[UIBarButtonItem alloc] initWithCustomView:toolbar]; self.navigationItem.rightBarButtonItem = navigationRightBarButton; [toolbar release]; [navigationRightBarButton release];
如此就可以放置上一個底色為透明，又帶有美編圖的功能列表。

效果：