首先我們先來看下設(shè)計稿(設(shè)計稿來自某強)
看起來還不錯的設(shè)計圖
然后我們需要分析一下:
只有兩個頁面技健,乍一看......還挺簡單的
頭部的顏色是一樣的
其它暫時也沒想到
然后根據(jù)這個我們需要先把大概的框架搭一下
首先,因為頭部風(fēng)格是統(tǒng)一的雌贱,所以要用Navigation Controller來做根頁面,所以我們在SB(Main.storyboard)里面拖入一個Navigation Controller控件
Navigation Controller拖入以后進(jìn)行一堆設(shè)置
然后我們刪除拖進(jìn)來時候自帶的第二個頁面馋没,然后自己拖入一個View Controller
刪除自帶的第二個頁面,添加一個View Controller篷朵,關(guān)聯(lián)Navigation Controller
彈出框選擇root view controller
好!声旺!我們現(xiàn)在已經(jīng)把統(tǒng)一導(dǎo)航的頁面建好了
然后我們要把樣式調(diào)成跟設(shè)計稿一樣的顏色
設(shè)置標(biāo)題欄的樣式
接著把標(biāo)題欄的按鈕和名稱設(shè)置好
設(shè)置標(biāo)題欄的左右按鈕和標(biāo)題名稱
標(biāo)題欄的左右按鈕還是默認(rèn)的Item文字腮猖,我們要把它換成圖標(biāo),所以我們先要把圖標(biāo)的部分設(shè)置好澈缺,接下來看圖...
把圖標(biāo)資源添加到Assets.xcassets文件夾下 (關(guān)于@2x,@3x可以去百度下,大概意思就是適配各個版本的設(shè)備)
圖標(biāo)添加完成以后的是這樣的效果
圖標(biāo)已經(jīng)準(zhǔn)備好了姐赡,那就趕緊用起來吧,啪嗒啪嗒...
設(shè)置好標(biāo)題欄的左右圖標(biāo)
到這里第一個頁面的頭部已經(jīng)做好了雏吭,然后我們需要把第二個頁面也添加上 (現(xiàn)有左邊那里頁面是控制頭部樣式的跟頁面,我們在運行APP的時候是不會單獨顯示它的杖们,所以它不算事一個頁面)
拖入新的View Controller,建立頁面關(guān)系
頁面連接方式選擇Show姥饰,一連接起來,頭部是不是一下子就變成一樣的了呢
設(shè)置新頁面的控件
到此我們的兩個頁面都做好了列粪,Command+R 來運行下我們的APP吧
做好后模擬器上運行的效果圖