7、UIViewController導航欄

概述

上一節咱們算是跟UIViewController打了個招呼，同時也表示咱們正式介入iOS開發。本節咱們將介紹UI界面的一個經常使用元素：導航欄。

iOS爲UIViewController提供了內置導航欄，其界面符合iOS系統主題，同時有系統進行輔助維護，是一個很是方便的導航欄。

可是，無論iOS提供了多麼好用的導航欄，也沒法趕的上開發者們的想象力，有時候咱們但願自定義導航欄的樣式，這時候咱們就須要本身定製導航欄了。

 

內嵌導航欄

咱們新建1個工程Charpter7EmbeddedNav

 

在Main.storyboard選中ViewController面板（對面板單擊一下鼠標便可），而後選擇Editor->Embed In->NavigationController。

 

因而咱們就獲得了內嵌的導航欄了，咱們能夠看到ViewController的頂部多出了1塊陰影面積，那就是導航欄。 

點擊導航欄，咱們就能夠在右邊的屬性欄裏修改導航欄屬性（title等）了。

 

若是你不滿意字體的大小顏色等，還能夠點擊Navigation Controller面板頂部區域，而後修改相應的屬性。

運行結果以下

 

前面咱們說過，約束（AutoLayout）是開發靜態頁面的利器，可是對動態頁面卻無能爲力，而代碼卻專長於此。添加以下圖所示代碼，它能夠根據動態條件（好比人品），使用代碼修改導航欄的標題及其顏色。其中arc4random()會返回1個整數介於0～4294967295（2^ 32-1)。至於個人人品好很差，此處就再也不展現了。

 

 

單單隻玩1個標題，彷佛還不過癮，因而咱們再拖入1個按鈕

 

改爲「+」的樣子。

 

不過癮，再來一個

 

不過癮，再來。。。反正我過癮了，大家繼續玩。

有人可能會問，這些按鈕尚未添加約束，要是運行在小屏iPhone上會不會被遮住呢？

答案是不會，理由很簡單：內嵌導航欄，iOS本身管，咱們不用瞎操心，因此無需約束，並且也添加不了約束，不信你試試。

 

自定義導航欄

內嵌導航欄雖然功能強大，可是在人類的想（zuo）象（si）力面前，仍是略顯無力。好比我吧，就很是迷信數學之美，我非得要把頁面標題放在導航欄的黃金比例分割處（0.618），不然我就感到來自APP深深的敵意。

 

首先，咱們再新建1個工程Charpter7CustomNav，而後在ViewController面板上拖入1個View

 

給拖入的View添加約束：左/上/右邊距0，高60

 

拖入1個label到剛剛添加的View中

 

修改爲我要的標題內容

 

如今我要給標題添加這樣兩條約束：

(1) title.centerY = superview.centerY

(2) title.centerX = 0.618 * superview.width

其中約束（1）能夠直接使用容器約束「Vertically in Container」，可是約束（2）須要咱們作一些修改。因而咱們先添加2條容器約束「Horizontailly in Container」和「Vertically in Containner」，而後再對「Horizontally in Container」進行修改來達到咱們的效果。

首先選中「正大光明」label，添加2條容器約束

 

當咱們想修改約束時「Horizongtally in Container」，發現其「Second Item」不能修改成「superview.width」。這是由於「First Item」（正大光明.CenterX）是位置（矢量）而「width」是尺寸（標量），因此二者不能創建相等關係，那怎麼辦呢？

 

咱們知道centerX位於width一半的位置，既然不能引用「width」，那咱們就引用「centerX」，咱們不妨建個方程：

設新系數爲P，則

title.centerX = 0.618 * superview.width = P * superview.centerX

=> 0.618 * 2 * superview.centerX = P * superview.centerX

=> P = 1.236

因而咱們將約束脩改爲下圖狀

 

太好了，終於以爲世界和平了。

 

 

總結

「導航欄」，顧名思義就是爲了引導用戶使用咱們的APP，話說咱們的APP也就1個界面，須要導航個毛線啊？！好不容易學了1個新東西，結果發現沒有什麼卵用，難免讓人有一種英雄無用，懷才不遇之感。因此下一節，咱們將介紹多UIViewController的使用。

 

源碼下載（內置導航欄）：https://pan.baidu.com/s/1UgrENNxz1jrz5OO-RXUCHQ

源碼下載（自定義導航欄）：https://pan.baidu.com/s/1mx5djAqpO0LP0Ep5K0IXNw

 

 

上一節           回目錄          下一節