七、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

 

 

上一節           回目錄          下一節


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM