讓不懂程式設計的人愛上iPhone開發系列2 iOS12+Swift4.2版-Checklists-15
說明:本系列教程改編自 raywenderlich.com 中的iOS Apprentice系列,有需要的童鞋請移步到這裡購買英文版原教程: https:// store.raywenderlich.com /products/ios-apprentice
歡迎繼續我們的學習。
在之前的章節中,我們已經成功的往表檢視中添加了⼀大堆資料,但遺憾的是這些資料都是程式預設提供的,沒使用者什麼事兒。說白了,前5章我們都只不過是在自娛自樂而已,從這⼀章開始我們要賜予使用者力量了。
May the force be with you
在本章學習中,我們⾸先要在界⾯頂部新增⼀個所謂的navigation bar(導航欄),這個bar上⾯有一個新增按鈕(⼤大的+號),⽤它可以開啟新的界⾯,在其中可以讓使用者輸入新的代辦事務。當用戶觸碰Done時,新的代辦事務就會出現在列表中。

在很多iOS應用中都用到了這種模式,也就是開啟⼀個新的界⾯來新增新專案。當你學會了這⼀點,你就可以自豪的說⾃己的iOS已經入門了。
好吧,看看我們要做哪些事情?
1. 新增⼀個navigation controller(導航控制器)
2. 在導航欄上⾯放⼀個“+”新增按鈕
3. 當觸碰”+“新增按鈕的時候往列表中新增⼀個偽項⽬
4. 使⽤swipe-to-delete(滑動刪除)的方式來刪除已有項⽬5,開啟Add Item界⾯讓⽤戶輸入專案的⽂字描述。
為了完成這一系列的任務,我們將接觸一個全新的UI控制元件-Navigation Conroller(導航控制器)。
Navigation controller(導航控制器)
這⾥不多說理論⽅⾯的廢話,先實際操作來感受下吧。⾸先讓我們來新增導航欄(navigation bar),當然,如果你觀察⼒不錯的話,會發現在Object Library 中有⼀個名為Navigation Bar的物件。你可以把它拖曳到檢視⾥⾯。不過這⾥我們暫時不這樣做,這⾥的方法是把當前的表檢視控制器embed(內建)在⼀個navigation controller(導航控制器)中。
神馬?這樣也行?
Don’t panic,先讓我們試試看吧。
實際上,在iOS界⾯開發中,導航控制器的使⽤頻率僅次於表檢視控制器。使⽤導航控制器,可以從⼀個界⾯跳轉到另⼀個界⾯。除了導航控制器,還有⼀個UITabBarController的傢伙也可以管理多個 檢視控制器,當然這⾥就不細說了。

UINavigationController物件可以幫你輕鬆解決介面間跳轉導航的事情,可以節省很多程式碼工作。通常在界⾯上方中間有⼀個帶title標題的導航條,以及一個用於返回上⼀個界⾯的”<”返回按鈕。我們還可以在右側放上⾃己的按鈕。
新增一個navigation controller(導航控制器)
新增導航控制器沒有你想象的那麼複雜。
在Xcode中開啟Main.storyboard,然後選中Checklists View Controller。然後在頂部選單選擇 Editor-Embed In- Navigation Controller。
就這樣搞定了。

現在Interface Builder已經添加了⼀個新的Navigation Controlller 介面,同時在導航控制器和之前的Checklists View Controller之間建立了關聯。
編譯運⾏項⽬,當啟動應用的時候,Checklists View Controller會被⾃動放到⼀個導航控制器中。

但是因為我們沒有為導航欄設定標題,所以從外觀上看起來幾乎沒什麼變化。
設定導航欄標題
返回storyboard,在Checklist View Controller的Document Outline中選中Checklists這個Navigation Item,然後在右側的面板中將Title更改為Checklists(或者其它你喜歡的名稱)。

我們剛才做的事情就是更改⾃動新增到檢視控制器中的Navigation Item物件的標題。Navigation Item物件中包含了將在導航欄中顯⽰示的標題和按鈕。 每個內建的檢視控制器都有⼀個⾃己的Navigation Item.
當導航控制器讓⼀個新的檢視控制器來接 管界⾯時,就會替換該檢視控制器的Navigation Item的導航欄內容。
再次執行應用,可以看到導航欄的標題就出現了~
顯示更大的標題
在iOS11之前,完成以上操作後,我們就搞定了設定導航欄標題的工作。不過從iOS 11開始,蘋果引入了一種新的導航欄設計,可以顯示更大的標題。當然,預設情況下不會啟用大標題,但是我們可以通過storyboard的設定,或是通過新增程式碼的方式來完成。

切換到ChecklistViewController.swift,然後在viewDidLoad方法中新增一行程式碼,位置在super.viewDidLoad()這一行程式碼之後:
navigationController?.navigationBar.prefersLargeTitles = true
關於程式碼的細節,這裡暫且不做更加深入的講解,不過有幾件事情大家需要記住的是:
1. 通常來說,對於給定的導航流程,只有一個導航控制器。
2. 一個導航控制器可以管理多個檢視控制器。
3. 導航體系中的每個檢視控制器都有到導航控制器的引用。
所以,上面的這行程式碼只是使用了當前檢視控制器對導航控制器的引用,從而獲取了導航欄。
然後,再將它的prefersLargeTitles屬性設定為true,從而讓導航欄的標題使用更大的樣式。
當然,除了在程式碼中修改,我們還可以採用另外一種視覺化的方式。
只需要選中導航欄,然後在Attributes inspector中勾選Prefers Larget Titles就好了~
再次執行應用,看看有什麼變化?
注意: 蘋果官方並推薦所有的介面都使用大標題。通常我們可以考慮在主介面上使用大標題,然後其它的介面仍然使用普通的標題樣式。
好了,本課的內容就先到這裡了,我們下一課再見~
AR/VR/AI 實戰開發課程推薦:

聯絡方式:
- 微信討論群請先添加個人微信iseedo,說明要加入iOS開發討論
- QQ討論群:375143733
- 微信公眾號:icodefun
答疑說明:
有相關的問題請到課程答疑專區提問: http:// icode.fun/ask/forum.php