研究 navigation bar 的欄位

MikeWang
MikeWang
Jul 29, 2017 · 4 min read

今天的文章目的是研究Navigation Bar的欄位,
如果直接將Navigation Controller拉進畫面中,
會自動產生一個帶有TableView的Root View Controller(如下圖1),
反而會造成我們的不便,所以我們採用Embed in的方式
來加入Navigation Controller(如下圖2)。

一切準備就緒後,現在立馬開始我們今天的Navigation Bar的欄位研究之旅

圖3
  1. Bar Tint

此欄位就是整個Navigation Bar列的背景顏色,
我們將採用Blue連色來做識別

圖4

2. Translucent

半透明的效果,有開啟如圖四中左邊的效果,
如果沒有開啟則為不透明,如圖四中右邊模擬器的效果

圖5

3. Title Font

圖6

這個欄位就是Navigation Bar上面所顯示的字體(型),
身為一個App開發魔法師,等寬字體的魔力無疑是我們強大魔法的原力,
本文中就採用『Menlo』來當例子。

4. Title Color

這個欄位就是Navigation Bar上面所顯示的文字顏色,
我們將文字改為strawberry這個顏色,以作識別。

圖7

介紹完Navigation Bar的幾個欄位之後,我們繼續來看MAC要如何新增字體?在App開發的奇幻魔法世界中,魔法可是有千千萬萬種,現在我們馬上來修煉等寬字體的魔法

1. 首先打開字體簿(應用程式 => 字體簿)

2. 下載對應的字體,這邊以『Source Code Pro』為例

3. 打開字型的預覽視窗,並點選『安裝字體』,到這邊就完成安裝

圖8

4. 在字體簿中可以看到我們剛剛安裝好的字體

圖9

5. 如果要移除的話,可以點選字體,然後點選工具列的檔案 => 移除『Source Code Pro』系列

圖10

小技巧筆記:

  1. Label文字的內容如果超出大小框框大小,可以點選工具列的 Editor => Size to fit Content (快速鍵: Cmd=)來自動調整寬度。
  2. MAC新增字體
  3. 如果要兩台模擬器做實驗對照,可以採用同一個專案不同Device(e.g. I7 & I7 Plus),也是很方便的做法

GitHub:

參考資料:

1. 彼得潘 研究 navigation bar 的欄位

2. MAC安裝字體

3. Source Code Pro字體

彼得潘的 Swift iOS App 開發教室

學習 Swift iOS App 開發的學生作品集

MikeWang

Written by

MikeWang

mike

彼得潘的 Swift iOS App 開發教室

學習 Swift iOS App 開發的學生作品集

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade