iOS學習筆記02--導航欄(UINavigationController)

之前我在使用導航欄的時候都是深度定制的辱姨,具體就是把系統(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];
}

那么效果就是缕粹,剛進入:

屏幕快照 2016-04-12 上午10.37.18.png

push后的界面:

屏幕快照 2016-04-12 上午10.37.32.png

而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 = @"我是副標題";

效果:

屏幕快照 2016-04-12 上午11.09.13.png

不怎么美觀的樣子瘦馍,很少會用到。


  • 設置按鈕
    對于barItem应役,如果不是rootController 情组,那么會在左上角有一個系統(tǒng)自帶的返回按鈕燥筷,按鈕的名字是上一級的title,效果如上圖院崇。我們當然可以自定制item:
    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(backClick)];
    self.navigationItem.leftBarButtonItem = item;
屏幕快照 2016-04-12 下午12.10.59.png

這是系統(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];

就是犟樣子的:


屏幕快照 2016-04-12 下午12.44.37.png

我承認,很丑柑营,木有什么藝術細菌屈雄,不過功能是實現了,等童靴們來做的更漂亮了官套。

以上是放置了一個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];

效果:


屏幕快照 2016-04-12 下午12.52.54.png

這是左邊的,右邊的也是一樣的奶赔,可以進行同樣的設置惋嚎,在這就不再贅述了。
會有一個小問題站刑,就是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]];

看效果:

屏幕快照 2016-04-12 下午2.05.55.png

很擠得樣子因悲,我們可以修改一下:

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

再看:

屏幕快照 2016-04-12 下午2.01.32.png

這樣看著就比較順眼了堕汞。


  • 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
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市誊涯,隨后出現的幾起案子,更是在濱河造成了極大的恐慌蒜撮,老刑警劉巖暴构,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件跪呈,死亡現場離奇詭異,居然都是意外死亡取逾,警方通過查閱死者的電腦和手機耗绿,發(fā)現死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來砾隅,“玉大人误阻,你說我怎么就攤上這事∏绻。” “怎么了究反?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長儒洛。 經常有香客問我精耐,道長,這世上最難降的妖魔是什么琅锻? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任卦停,我火速辦了婚禮,結果婚禮上恼蓬,老公的妹妹穿的比我還像新娘惊完。我一直安慰自己,他們只是感情好处硬,可當我...
    茶點故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布小槐。 她就那樣靜靜地躺著,像睡著了一般郁油。 火紅的嫁衣襯著肌膚如雪本股。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天桐腌,我揣著相機與錄音拄显,去河邊找鬼。 笑死案站,一個胖子當著我的面吹牛躬审,可吹牛的內容都是我干的。 我是一名探鬼主播蟆盐,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼承边,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了石挂?” 一聲冷哼從身側響起博助,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎痹愚,沒想到半個月后富岳,有當地人在樹林里發(fā)現了一具尸體蛔糯,經...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年窖式,在試婚紗的時候發(fā)現自己被綠了蚁飒。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡萝喘,死狀恐怖淮逻,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情阁簸,我是刑警寧澤爬早,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布,位于F島的核電站强窖,受9級特大地震影響凸椿,放射性物質發(fā)生泄漏。R本人自食惡果不足惜翅溺,卻給世界環(huán)境...
    茶點故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一脑漫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧咙崎,春花似錦优幸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至伊滋,卻和暖如春碳却,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背笑旺。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工昼浦, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人筒主。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓关噪,卻偏偏與公主長得像,于是被迫代替她去往敵國和親乌妙。 傳聞我的和親對象是個殘疾皇子使兔,可洞房花燭夜當晚...
    茶點故事閱讀 45,435評論 2 359

推薦閱讀更多精彩內容