引子
iOS導航欄返回按鈕的自定義,無非就是自定義文字和自定義圖像。
自定義文字
想要返回按鈕顯示不同的文字,只需在父視圖進行這樣修改:
//重新創建一個barButtonItem
UIBarButtonItem *backItem = [[UIBarButtonItem alloc]initWithTitle:@"你想要設置的返回按鈕文字" style:UIBarButtonItemStylePlain target:nil action:nil];
//設置backBarButtonItem即可
self.navigationItem.backBarButtonItem = backItem;
在這里,如果不想讓返回按鈕顯示任何文字,有兩種方式:
- 如上述方法所示,只要設置
barButtonItem
的title
為""
即可; - 也可以在本視圖中通過
[UIBarButtonItem appearance]
對文字的范圍進行設置,就像這樣:
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(NSIntegerMin, NSIntegerMin)
forBarMetrics:UIBarMetricsDefault];
自定義返回圖片
先說一下網上慣常的做法吧,就是在本視圖中自定義一個UIButton
,然后設置UIButton
的圖片,再給UIButton
添加事件進行返回上級視圖的操作,代碼類似于:
//創建一個UIButton
UIButton *backButton = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 40, 40)];
//設置UIButton的圖像
[backButton setImage:[UIImage imageNamed:@"left_select_img.png"] forState:UIControlStateNormal];
//給UIButton綁定一個方法,在這個方法中進行popViewControllerAnimated
[backButton addTarget:self action:@selector(backItemClick) forControlEvents:UIControlEventTouchUpInside];
//然后通過系統給的自定義BarButtonItem的方法創建BarButtonItem
UIBarButtonItem *backItem = [[UIBarButtonItem alloc]initWithCustomView:backButton];
//覆蓋返回按鍵
self.navigationItem.leftBarButtonItem = backItem;
這種方式也可以達到目的,不過通過這種方式自定義返回按鈕之后,系統的右滑返回的手勢就會無法識別,通常的解決辦法是再添加一個全局的手勢操作。而且,這個方法自定義完之后的返回按鈕一般都會偏右,然后再調位置。個人感覺有點麻煩,后來發現網上還有另外兩種簡便可行的方法。
1. 在本視圖中修改
代碼如下:
//方法1:在本視圖中設置
UIImage *backButtonImage = [[UIImage imageNamed:@"left_select_img.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 40, 0, 0)
resizingMode:UIImageResizingModeTile];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage
forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
//參考自定義文字部分
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(NSIntegerMin, NSIntegerMin)
forBarMetrics:UIBarMetricsDefault];
點進去這兩個設置方法,會發現蘋果官方給出了這么一段注釋:
/* The remaining appearance modifiers apply solely to UINavigationBar back buttons and are ignored by other buttons.
*/
/*
backgroundImage must be a resizable image for good results.
*/
大致意思也就是說:下邊的方法主要是為了設置返回按鈕,而且圖片必須是拉伸過后的圖片。這不正符合我們修改返回按鈕的初衷嗎?關于圖片拉伸的各種效果,可以看這篇,寫的非常清晰,有理有據。
2. 父視圖中修改
代碼如下:
//方法2:通過父視圖NaviController來設置
UIBarButtonItem *backItem = [[UIBarButtonItem alloc]initWithTitle:@""
style:UIBarButtonItemStylePlain
target:nil
action:nil];
self.navigationController.navigationBar.tintColor =
[UIColor colorWithRed:0.99 green:0.50 blue:0.09 alpha:1.00];
//主要是以下兩個圖片設置
self.navigationController.navigationBar.backIndicatorImage = [UIImage imageNamed:@"left_select_img.png"];
self.navigationController.navigationBar.backIndicatorTransitionMaskImage = [UIImage imageNamed:@"left_select_img.png"];
self.navigationItem.backBarButtonItem = backItem;
backIndicatorImage
和backIndicatorTransitionMaskImage
是什么呢?看官方文檔:
backIndicatorImage:The image shown beside the back button。
返回按鈕底層的圖片;
backIndicatorTransitionMaskImage:The image used as a mask for content during push and pop transitions.
視圖轉場過渡時被當作遮罩的圖片(我也不懂什么意思)。
不過重要的是后邊的Discussion
:
If you want to customize the back indicator image, you must also set backIndicatorTransitionMaskImage.
總結
這兩種方式創建的自定義按鈕,圖片都在原來返回按鈕的位置,而且右滑返回的手勢依然可用!非常方便。