之前我在使用導航欄的時候都是深度定制的辱姨,具體就是把系統(tǒng)的導航欄給隱藏掉誊酌,然后自己做一個view放到導航欄的位置,根據自己的需要直接往view上添加各種需要用到的控件椭员,導致對系統(tǒng)自帶的導航欄不是很清楚车海,今天特意研究了一下,記錄之隘击。
-
設置導航欄背景
如果項目中所有的導航欄的背景都是一樣的侍芝,可以在APPDelegate里面如下設置:
//設定導航欄的背景色
[[UINavigationBar appearance] setBarTintColor:[UIColor redColor]];
//設定導航欄的背景圖片,以下兩個方法均的效果是一樣的
[[UINavigationBar appearance] setBarTintColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"navgationBar"]]];
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navgationBar"] forBarMetrics:UIBarMetricsDefault];
//設定導航欄按鈕的顏色(返回按鈕等等埋同,但不包含標題)
[[UINavigationBar appearance] setTintColor:[UIColor blackColor]];
這樣設置完成后州叠,就把bar的背景色和按鈕的顏色統(tǒng)一完成了,在項目中所有的bar的背景都是一樣的了凶赁,需要注意的地方就是這些方法的調用要在navigationBar出現之前留量,一般在APPDelegate里面,否則該方法不會起作用哟冬。
那么如果有這樣一個需要楼熄,某個界面的導航欄和別的都不一樣,這個時候我們可以在那個界面做如下操作:
//設置背景色浩峡,如果需要的是圖片的話也可以設置成圖片
self.navigationController.navigationBar.barTintColor = [UIColor greenColor];
//設置按鈕標題的顏色
self.navigationController.navigationBar.tintColor = [UIColor grayColor];
注意:這樣設置后也是全局生效的可岂,如果我們需要在某個單獨的界面需要這種效果,而其他界面不需要翰灾,那么我們可以在該界面的viewWillAppear和viewWillDisappear中進行相應的設置:
//在這里設置成該界面需要的效果
-(void)viewWillAppear:(BOOL)animated{
self.navigationController.navigationBar.tintColor = [UIColor grayColor];
self.navigationController.navigationBar.barTintColor = [UIColor greenColor];
}
//在這里還原之前的設置
-(void)viewWillDisappear:(BOOL)animated{
self.navigationController.navigationBar.tintColor = [UIColor blackColor];
self.navigationController.navigationBar.barTintColor = [UIColor redColor];
}
那么效果就是缕粹,剛進入:
push后的界面:
而pop回來后還是原來的背景,這樣就實現了對單獨界面的定制纸淮。
-
設置標題
標題設置都是在相應的controller中平斩,一下三種方法任選其一即可
self.title=@"首頁";
self.navigationItem.title = @"首頁";
self.navigationItem.titleView = [自定義view及其子類(label、segment等)];
既然是標題咽块,那肯定就有字體的大小绘面、顏色等屬性,可以通過attribute屬性來進行相應的設置:
self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName:[UIColor whiteColor],NSFontAttributeName:[UIFont systemFontOfSize:21]};
這里只是設置了字體大小侈沪、顏色揭璃,還有很多可以設置的屬性,有興趣的可以試一下:
UIKIT_EXTERN NSString * const NSFontAttributeName NS_AVAILABLE(10_0, 6_0); // UIFont, default Helvetica(Neue) 12
UIKIT_EXTERN NSString * const NSParagraphStyleAttributeName NS_AVAILABLE(10_0, 6_0); // NSParagraphStyle, default defaultParagraphStyle
UIKIT_EXTERN NSString * const NSForegroundColorAttributeName NS_AVAILABLE(10_0, 6_0); // UIColor, default blackColor
UIKIT_EXTERN NSString * const NSBackgroundColorAttributeName NS_AVAILABLE(10_0, 6_0); // UIColor, default nil: no background
UIKIT_EXTERN NSString * const NSLigatureAttributeName NS_AVAILABLE(10_0, 6_0); // NSNumber containing integer, default 1: default ligatures, 0: no ligatures
UIKIT_EXTERN NSString * const NSKernAttributeName NS_AVAILABLE(10_0, 6_0); // NSNumber containing floating point value, in points; amount to modify default kerning. 0 means kerning is disabled.
UIKIT_EXTERN NSString * const NSStrikethroughStyleAttributeName NS_AVAILABLE(10_0, 6_0); // NSNumber containing integer, default 0: no strikethrough
UIKIT_EXTERN NSString * const NSUnderlineStyleAttributeName NS_AVAILABLE(10_0, 6_0); // NSNumber containing integer, default 0: no underline
UIKIT_EXTERN NSString * const NSStrokeColorAttributeName NS_AVAILABLE(10_0, 6_0); // UIColor, default nil: same as foreground color
UIKIT_EXTERN NSString * const NSStrokeWidthAttributeName NS_AVAILABLE(10_0, 6_0); // NSNumber containing floating point value, in percent of font point size, default 0: no stroke; positive for stroke alone, negative for stroke and fill (a typical value for outlined text would be 3.0)
UIKIT_EXTERN NSString * const NSShadowAttributeName NS_AVAILABLE(10_0, 6_0); // NSShadow, default nil: no shadow
UIKIT_EXTERN NSString *const NSTextEffectAttributeName NS_AVAILABLE(10_10, 7_0); // NSString, default nil: no text effect
UIKIT_EXTERN NSString * const NSAttachmentAttributeName NS_AVAILABLE(10_0, 7_0); // NSTextAttachment, default nil
UIKIT_EXTERN NSString * const NSLinkAttributeName NS_AVAILABLE(10_0, 7_0); // NSURL (preferred) or NSString
UIKIT_EXTERN NSString * const NSBaselineOffsetAttributeName NS_AVAILABLE(10_0, 7_0); // NSNumber containing floating point value, in points; offset from baseline, default 0
UIKIT_EXTERN NSString * const NSUnderlineColorAttributeName NS_AVAILABLE(10_0, 7_0); // UIColor, default nil: same as foreground color
UIKIT_EXTERN NSString * const NSStrikethroughColorAttributeName NS_AVAILABLE(10_0, 7_0); // UIColor, default nil: same as foreground color
UIKIT_EXTERN NSString * const NSObliquenessAttributeName NS_AVAILABLE(10_0, 7_0); // NSNumber containing floating point value; skew to be applied to glyphs, default 0: no skew
UIKIT_EXTERN NSString * const NSExpansionAttributeName NS_AVAILABLE(10_0, 7_0); // NSNumber containing floating point value; log of expansion factor to be applied to glyphs, default 0: no expansion
UIKIT_EXTERN NSString * const NSWritingDirectionAttributeName NS_AVAILABLE(10_6, 7_0); // NSArray of NSNumbers representing the nested levels of writing direction overrides as defined by Unicode LRE, RLE, LRO, and RLO characters. The control characters can be obtained by masking NSWritingDirection and NSTextWritingDirection values. LRE: NSWritingDirectionLeftToRight|NSWritingDirectionEmbedding, RLE: NSWritingDirectionRightToLeft|NSWritingDirectionEmbedding, LRO: NSWritingDirectionLeftToRight|NSWritingDirectionOverride, RLO: NSWritingDirectionRightToLeft|NSWritingDirectionOverride,
UIKIT_EXTERN NSString * const NSVerticalGlyphFormAttributeName NS_AVAILABLE(10_7, 6_0); // An NSNumber containing an integer value. 0 means horizontal text. 1 indicates vertical text. If not specified, it could follow higher-level vertical orientation settings. Currently on iOS, it's always horizontal. The behavior for any other value is undefined.
除了title外還有一個屬性:prompt,即副標題亭罪,設置后導航欄的高度會在原有的基礎上增加30:
self.navigationItem.prompt = @"我是副標題";
效果:
不怎么美觀的樣子瘦馍,很少會用到。
-
設置按鈕
對于barItem应役,如果不是rootController 情组,那么會在左上角有一個系統(tǒng)自帶的返回按鈕燥筷,按鈕的名字是上一級的title,效果如上圖院崇。我們當然可以自定制item:
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(backClick)];
self.navigationItem.leftBarButtonItem = item;
這是系統(tǒng)為我們提供的類型肆氓,有很多種,可以根據需要選用:
UIBarButtonSystemItemDone,
UIBarButtonSystemItemCancel,
UIBarButtonSystemItemEdit,
UIBarButtonSystemItemSave,
UIBarButtonSystemItemAdd,
UIBarButtonSystemItemFlexibleSpace,
UIBarButtonSystemItemFixedSpace,
UIBarButtonSystemItemCompose,
UIBarButtonSystemItemReply,
UIBarButtonSystemItemAction,
UIBarButtonSystemItemOrganize,
UIBarButtonSystemItemBookmarks,
UIBarButtonSystemItemSearch,
UIBarButtonSystemItemRefresh,
UIBarButtonSystemItemStop,
UIBarButtonSystemItemCamera,
UIBarButtonSystemItemTrash,
UIBarButtonSystemItemPlay,
UIBarButtonSystemItemPause,
UIBarButtonSystemItemRewind,
UIBarButtonSystemItemFastForward,
UIBarButtonSystemItemUndo NS_ENUM_AVAILABLE_IOS(3_0),
UIBarButtonSystemItemRedo NS_ENUM_AVAILABLE_IOS(3_0),
UIBarButtonSystemItemPageCurl NS_ENUM_AVAILABLE_IOS(4_0),
如果這些仍然不夠(實際上這些在項目中很少用到)亚脆,我們可以自定義做院,可放圖片或者文字:
//設置圖片
UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back"] style:UIBarButtonItemStylePlain target:self action:@selector(backClick)];
self.navigationItem.leftBarButtonItem = backItem;
//設置文字
UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithTitle:@"返回" style:UIBarButtonItemStyleDone target:self action:@selector(backClick)];
backItem.tintColor = [UIColor redColor];//可以自定義顏色
backItem.width = 100;//如果有需要可以設置寬度,此寬度會影響item的作用范圍
self.navigationItem.leftBarButtonItem = backItem;
假如我們想讓我們的item既包含圖片又包含文字濒持,應該怎么辦呢键耕?再定制:
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 60, 44)];
//button.backgroundColor = [UIColor blackColor];
button.titleLabel.font = [UIFont systemFontOfSize:14];
[button setTitle:@"返回" forState:UIControlStateNormal];
[button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"back"] forState:UIControlStateNormal];
[button addTarget:self action:@selector(backClick) forControlEvents:UIControlEventTouchUpInside];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, -20, 0, 0)];
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -40, 0, 0)];
UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithCustomView:button];
就是犟樣子的:
我承認,很丑柑营,木有什么藝術細菌屈雄,不過功能是實現了,等童靴們來做的更漂亮了官套。
以上是放置了一個item酒奶,也是可以放置多個的:
UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back"] style:UIBarButtonItemStylePlain target:self action:@selector(backClick)];
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(backClick)];
self.navigationItem.leftBarButtonItems = @[item,backItem];
效果:
這是左邊的,右邊的也是一樣的奶赔,可以進行同樣的設置惋嚎,在這就不再贅述了。
會有一個小問題站刑,就是iOS7之后自帶邊緣右滑返回的功能另伍,而當我們自定義返回按鈕后,右滑返回就失效了绞旅,解決辦法也很簡單摆尝,一句代碼:
self.navigationController.interactivePopGestureRecognizer.delegate = (id)self;
-
toolBar
這樣設置之后Toolbar就顯示了出來
self.navigationController.toolbarHidden = NO;
接著給Toolbar添加按鈕,也是barItem
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(backClick)];
UIBarButtonItem *item2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemReply target:nil action:nil];
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
view.backgroundColor = [UIColor redColor];
UIBarButtonItem *item3 = [[UIBarButtonItem alloc] initWithCustomView:view];
UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
[self setToolbarItems:@[item,item2,item3]];
看效果:
很擠得樣子因悲,我們可以修改一下:
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(backClick)];
UIBarButtonItem *item2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemReply target:nil action:nil];
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
view.backgroundColor = [UIColor redColor];
UIBarButtonItem *item3 = [[UIBarButtonItem alloc] initWithCustomView:view];
UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
[self setToolbarItems:@[flexItem,item,flexItem,item2,flexItem,item3,flexItem]];
再看:
這樣看著就比較順眼了堕汞。
-
push、pop動畫的修改
1晃琳、push動畫修改
SecondViewController *second = [[SecondViewController alloc] init];
CATransition *animation = [CATransition animation];//定義CATransition的一個對象
[animation setDuration:1];//設置動畫時間
[animation setType:kCATransitionMoveIn];//設置動畫類型讯检,有很多種可供選擇
[animation setSubtype:kCATransitionReveal];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[self.navigationController.view.layer addAnimation:animation forKey:nil];//這一步是不能省的
[self.navigationController pushViewController:second animated:NO];//這里一定要設置為No,否則的話效果就混亂了
2蝎土、pop视哑,也是一樣的
CATransition *animation = [[CATransition alloc] init];
animation.duration = 0.5;
animation.type = kCATransitionFade;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[self.navigationController.view.layer addAnimation:animation forKey:nil];
[self.navigationController popViewControllerAnimated:NO];//同樣要設為No
- End