iOS 導(dǎo)航欄實(shí)現(xiàn)技巧

其實(shí)導(dǎo)航欄是每一個(gè)項(xiàng)目中多多少少會(huì)涉及的部分,從開發(fā)到后期的維護(hù)薇宠,如果導(dǎo)航欄維護(hù)的不錯(cuò)憨栽,那么后續(xù)的開發(fā)也會(huì)簡(jiǎn)單一些浓领,所以記錄下我在開發(fā)中的幾個(gè)思路技巧反镇。


1 原生導(dǎo)航欄

1.1 基礎(chǔ)簡(jiǎn)介

系統(tǒng)的導(dǎo)航欄已經(jīng)可以滿足很多的要求了犯戏,一開始設(shè)置的可以是導(dǎo)航欄的整體框架barStyle送火,

barStyle的值

顯而易見,barStyle目前可以使用的只有UIBarStyleDefault和UIBarStyleBlack兩個(gè)值先匪,兩個(gè)值設(shè)置的差異是:

UIBarStyleDefault的效果圖

UIBarStyleDefault:狀態(tài)欄和導(dǎo)航欄上的字都是黑色种吸,表面有一層略透明的白色遮罩。

UIBarStyleBlack的效果圖

UIBarStyleBlack:狀態(tài)欄和導(dǎo)航欄上的字都是白色的呀非,表面有一層略透明的黑色遮罩坚俗。

而略透明的遮罩在iOS 7之后是由translucent屬性控制,該值默認(rèn)為YES(略透明)岸裙,而設(shè)置為no的時(shí)候猖败,就是完全不透明的狀態(tài):UIBarStyleDefault(全白),UIBarStyleBlack(全黑)

官方文檔簡(jiǎn)介

但是設(shè)置圖片之后的話降允,還是沒有太大的差異性恩闻。

1.2 顯示效果

導(dǎo)航欄最重要的部分還是左右按鈕和中間的title或titleView,按鈕的話,主要是系統(tǒng)返回按鈕back是在navigationController上剧董,所以在沒有設(shè)置任何的leftBarButtonItem的情況下會(huì)顯示默認(rèn)的幢尚。中間的字體其實(shí)是固定的,顏色也是黑白兩色送滞,要改成別的顏色或者字體大小以及位置的時(shí)候侠草,使用titleView這個(gè)屬性:

titleView的設(shè)置

效果圖:

效果圖

1.3 效果設(shè)置

其實(shí)除了導(dǎo)航欄中間的title或titleView以及左右的按鈕item,更多的效果是配合scrollView的一個(gè)滾動(dòng)犁嗅,在iOS 8之后原生的導(dǎo)航欄添加一些點(diǎn)擊事件的處理,其中比較常見的有:

滑動(dòng)處理

hidesBarsOnSwipe:當(dāng)向下滑動(dòng)的時(shí)候晤碘,導(dǎo)航欄會(huì)顯示褂微;當(dāng)向上滑動(dòng)的時(shí)候功蜓,導(dǎo)航欄會(huì)消失

hidesBarsOnSwipe效果圖

hidesBarsOnTap:如果是沒有處理的點(diǎn)擊效果會(huì)讓導(dǎo)航欄消失。

點(diǎn)擊處理

當(dāng)然還有一些不錯(cuò)的處理方法宠蚂,但是處理這些基礎(chǔ)的導(dǎo)航欄消失和消失的效果式撼,還有一個(gè)常用就是滑動(dòng)時(shí)候的動(dòng)態(tài)顏色改變:

這里的話一定要注意不能使用[UINavigationBar appearance]來處理,因?yàn)閇UINavigationBar appearance]獲得的是屏幕中已有的導(dǎo)航欄求厕,滑動(dòng)時(shí)不能改變屏幕中已經(jīng)存在的元素著隆。所以只能在導(dǎo)航欄上面加一層view,通過改變這個(gè)view的顏色實(shí)現(xiàn)動(dòng)態(tài)的顏色改變效果:

滑動(dòng)處理方法

滑動(dòng)處理效果:

滑動(dòng)處理效果圖


2 自定義導(dǎo)航欄

2.1基礎(chǔ)元素封裝

其實(shí)封裝的話主要還是因?yàn)樵O(shè)置一些固定位置的圖片呀癣、側(cè)滑效果等美浦,封裝其實(shí)不需要放在NavigationController的類中,可以直接放在rootViewController中项栏。屬性方面:中間標(biāo)題是一定存在的浦辨,但是左邊按鈕的設(shè)置可以添加一個(gè)bool判斷值等:

nav相關(guān)屬性設(shè)置

這樣的話其實(shí)將能將大部分導(dǎo)航欄的顏色、按鈕位置沼沈、分割線固定流酬,而且在RootViewController里面還可以加上轉(zhuǎn)屏相關(guān)的設(shè)置。


導(dǎo)航欄的基礎(chǔ)設(shè)置的話搞明白的話列另,其實(shí)加一些效果的話也不會(huì)很難芽腾。接下來的話可能對(duì)側(cè)滑的實(shí)現(xiàn)技巧研究一下。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末页衙,一起剝皮案震驚了整個(gè)濱河市晦嵌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拷姿,老刑警劉巖惭载,帶你破解...
    沈念sama閱讀 222,183評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異响巢,居然都是意外死亡描滔,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門踪古,熙熙樓的掌柜王于貴愁眉苦臉地迎上來含长,“玉大人,你說我怎么就攤上這事伏穆【信ⅲ” “怎么了?”我有些...
    開封第一講書人閱讀 168,766評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵枕扫,是天一觀的道長(zhǎng)陪腌。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么诗鸭? 我笑而不...
    開封第一講書人閱讀 59,854評(píng)論 1 299
  • 正文 為了忘掉前任染簇,我火速辦了婚禮,結(jié)果婚禮上强岸,老公的妹妹穿的比我還像新娘锻弓。我一直安慰自己,他們只是感情好蝌箍,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評(píng)論 6 398
  • 文/花漫 我一把揭開白布青灼。 她就那樣靜靜地躺著,像睡著了一般妓盲。 火紅的嫁衣襯著肌膚如雪杂拨。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,457評(píng)論 1 311
  • 那天本橙,我揣著相機(jī)與錄音扳躬,去河邊找鬼。 笑死甚亭,一個(gè)胖子當(dāng)著我的面吹牛贷币,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播亏狰,決...
    沈念sama閱讀 40,999評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼役纹,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了暇唾?” 一聲冷哼從身側(cè)響起促脉,我...
    開封第一講書人閱讀 39,914評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎策州,沒想到半個(gè)月后瘸味,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,465評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡够挂,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評(píng)論 3 342
  • 正文 我和宋清朗相戀三年旁仿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片孽糖。...
    茶點(diǎn)故事閱讀 40,675評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡枯冈,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出办悟,到底是詐尸還是另有隱情尘奏,我是刑警寧澤,帶...
    沈念sama閱讀 36,354評(píng)論 5 351
  • 正文 年R本政府宣布病蛉,位于F島的核電站炫加,受9級(jí)特大地震影響瑰煎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜琢感,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評(píng)論 3 335
  • 文/蒙蒙 一丢间、第九天 我趴在偏房一處隱蔽的房頂上張望探熔。 院中可真熱鬧驹针,春花似錦、人聲如沸诀艰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽其垄。三九已至苛蒲,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間绿满,已是汗流浹背臂外。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留喇颁,地道東北人漏健。 一個(gè)月前我還...
    沈念sama閱讀 49,091評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像橘霎,于是被迫代替她去往敵國(guó)和親蔫浆。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評(píng)論 2 360

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫姐叁、插件瓦盛、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,122評(píng)論 4 61
  • Swift版本點(diǎn)擊這里歡迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh閱讀 25,420評(píng)論 7 249
  • 從小被教育的便是好好學(xué)習(xí)將來才能有出息处窥,小時(shí)候絲毫不懷疑嘱吗,越長(zhǎng)大越有些迷茫學(xué)習(xí)真的那么有用嗎? 大一的時(shí)候覺著何苦...
    安糖糖閱讀 166評(píng)論 0 0
  • 遇見一個(gè)陌生人碧库,你會(huì)最先注意他什么柜与? 發(fā)型,言談嵌灰,姿態(tài)或者眉眼弄匕? 我不會(huì), 我會(huì)看他沽瞭, 像不像你迁匠。 ...
    火星之旅閱讀 173評(píng)論 0 6
  • 度吾心,憂吾境,業(yè)未立城丧,內(nèi)不靖延曙。詩和遠(yuǎn)方吾亦愿也!奈何羅馬尚遠(yuǎn)亡哄,彼岸茫茫枝缔。年華易逝,美景難圖蚊惯,莫愿卸!莫!莫截型!
    玉之蕭閱讀 316評(píng)論 0 0