2012年11月13日 星期二

iOS學習_客制化Navigation Part2_改變返回按鈕

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

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


本篇講第二點:左上角的返回鍵。

做法其實跟第一篇一樣,但是因為在self.navigationItem後面除了本篇要使用的leftBarButtonItem以外,還有一個會令人誤會的backBarButtonItem,依照字面上我們理論上可以使用backBarButtonItem屬性簡單地將自己的UIBarButtonItem指給他,完成客制化的動作。

但backBarButtonItem與leftBarButtonItem或是rightBarButtonItem不同,backBarButtonItem所設定的按鈕並不是目前所見的View,而是設定目前View push出的下一個View的返回鍵,也就是說我們重A轉移到B,希望B上面的返回鍵可以做些改變,那麼必須在A設定backBarButtonItem。

所以很快的我們在首頁進行設定,就可以改變下一個頁面的返回鍵:
UIBarButtonItem *backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"回去" style:UIBarButtonItemStylePlain target:nil action:nil]; self.navigationItem.backBarButtonItem = backBarButtonItem; 效果:

非常簡單的將原本的文字改成自己想要的文字,但這不符合我們的需求,主要還是希望整個按鈕的風格都換掉,所以可以嘗試這樣:
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"btn_back_un"] style:UIBarButtonItemStylePlain target:nil action:nil]; self.navigationItem.backBarButtonItem = backButton; 效果:

基本上這個效果非常的蠢,完全不符合需求。

這時我們會想到那我就學上一篇客制化按鈕的方式就OK了?很不幸的不管怎麼樣設定似乎都不會改變backBarButtonItem。

所以,最終還是必須回到最原始,以客制化leftBarButtonItem,並加上相對應的返回事件來完成:
UIImage *imgItem_BACK = [UIImage imageNamed:@"btn_back_un"]; UIImage *imgItem_BACK_click = [UIImage imageNamed:@"btn_back_click"]; UIButton *btnimg_BACK = [UIButton buttonWithType:UIButtonTypeCustom]; [btnimg_BACK setBackgroundImage:imgItem_BACK forState:UIControlStateNormal]; [btnimg_BACK setBackgroundImage:imgItem_BACK_click forState:UIControlStateHighlighted]; [btnimg_BACK addTarget:self action:@selector(btn_back_click) forControlEvents:UIControlEventTouchUpInside]; btnimg_BACK.frame = CGRectMake(0.0f, 0.0f, imgItem_BACK.size.width, imgItem_BACK.size.height); UIBarButtonItem *imageBACKButton = [[UIBarButtonItem alloc] initWithCustomView:btnimg_BACK]; self.navigationItem.leftBarButtonItem = imageBACKButton; [imageBACKButton release];
效果:

沒有留言:

張貼留言