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


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

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

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

3. Title Font

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

介紹完Navigation Bar的幾個欄位之後,我們繼續來看MAC要如何新增字體?在App開發的奇幻魔法世界中,魔法可是有千千萬萬種,現在我們馬上來修煉等寬字體的魔法。
1. 首先打開字體簿(應用程式 => 字體簿)
2. 下載對應的字體,這邊以『Source Code Pro』為例
3. 打開字型的預覽視窗,並點選『安裝字體』,到這邊就完成安裝

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

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

小技巧筆記:
- Label文字的內容如果超出大小框框大小,可以點選工具列的 Editor => Size to fit Content (快速鍵: Cmd 加 =)來自動調整寬度。
- MAC新增字體
- 如果要兩台模擬器做實驗對照,可以採用同一個專案不同Device(e.g. I7 & I7 Plus),也是很方便的做法
GitHub:
參考資料:
1. 彼得潘 研究 navigation bar 的欄位
2. MAC安裝字體
3. Source Code Pro字體

