使用 Storyboard 實作歌詞 App (part. 1)

剛踏入或正想要踏入 iOS App 開發領域的小夥伴們好，相信有些夥伴一聽到寫程式就手心不自覺地冒汗，感到緊張對吧。這次要分享的是完全不在 Xcode 裡寫任何一行程式碼，卻能做出一個完整 App 的過程。話不多說，先看看做好的 App 長什麼樣子吧！

裡面實作的功能包含：

• 搭配 tab bar controller & navigation controller。
• 使用 table view controller with static cells。
• 使用 segue 串接頁面。
• 設定 App Icon ，名稱和 App 的開頭畫面(LaunchScreen.storyboard)。
• 使用到 iOS SDK 的各種 UI 元件， view，label，image view，table view，scroll view，text view，visual effect view with blur ⋯⋯。
• 支援 Dark Mode。

讓我們接著看下去⋯⋯

1. Tab Bar Controller 與 Navigation Controller 的搭配

讓我們先來看看下面這張圖，我一共使用了四種 Controller 在這個專案裡，分別是 Tab Bar Controller、Navigation Controller、Table View Controller、View Controller。

各頁面間在 xcode 中的階層順序

相信有些夥伴會有疑問，其中 Tab Bar Controller 和 Navigation Controller 為什麼是空白的？這是因為它們並不主要負責呈現內容，而是協助我們建立起有序的頁面呈現方式。

受到 Tab Bar Controller 管理的頁面會在下面出現一條 Tab Bar，相信大家很常在其他 App 裡看到，一般會拿來做不同分類或功能頁面間的切換管理，在 Tab Bar 上點選不同 Tab 的時候就會切換至相對應的頁面。建議不要同時使用超過 5 個 Tab 在同一個畫面出現，因為如果超過 5 個會以⋯⋯顯示，必須點選⋯⋯才能看到剩下的部分，也就失去了方便性。

另外值得注意的是，當我們在不同 Tab 之間切換的時候，原本的 Tab 分頁會保留在離開前的狀況。

在這個例子中使用兩個 Tab 做分類（男歌手 & 女歌手）

那麼，我們要如何使用 Tab Bar Controller 呢？ 以下介紹三種方法，選擇自己當下狀況最方便的做法就可以了。

a. 直接從 Xcode 的 object library 新增一個 Tab Bar Controller。

這種方式預設會建立一個 Tab Bar Controller 和 兩個已經受到管轄的 View Controller。

從 object library 新增 Tab Bar Controller

b. 點選已建立的 View Controller，使用 Embed In 新增一個 Tab Bar Controller。

這種方式適合在已經先做好 View Controller，之後想要使用 Tab Bar Controller 的時候。點選之後會在原本的 View Controller 前方新增一個 Tab Bar Controller。

使用 Embed In 新增 Tab Bar Controller

c. 點選已建立的 Tab Bar Controller，使用 Segue 新增與 View Controller 的關聯。

這種方式適合在已經有 Tar Bar Controller 管理頁面，但想要新增一或數個 Tab 時使用。

使用 Segue 新增 Tab Bar Controller 與 View Controller 的關聯

而受到 Navigation Controller 管理的頁面則是會在畫面上方產生一條 Navigation Bar，由它來控制有階層關係的畫面呈現，通常點到下一個頁面後，在 Navigation Bar 左邊會有返回鍵可以回到上一頁。

Navigation Bar 其實還有很多強大的功能可以設定使用，但我們現在的範例暫時用不到，之後再談。

在這個例子中使用 Navigation Controller 管理歷年專輯列表和專輯曲目列表的顯示

以下同樣介紹三種方法，這三種方法其實和 Tab Bar Controller 非常相似，當然也是選擇自己當下狀況最方便的做法就可以了。

a. 直接從 Xcode 的 object library 新增一個 Tab Bar Controller。

這種方式預設會建立一個 Tab Bar Controller 和 兩個已經受到管轄的 View Controller。

從 object library 新增 Tab Bar Controller

b. 點選已建立的 View Controller，使用 Embed In 新增一個 Tab Bar Controller。

這種方式適合在已經先做好 View Controller，之後想要使用 Tab Bar Controller 的時候。點選之後會在原本的 View Controller 前方新增一個 Tab Bar Controller。

使用 Embed In 新增 Tab Bar Controller

c. 點選已建立的 Tab Bar Controller，使用 Segue 新增與 View Controller 的關聯。

這種方式適合在已經有 Tar Bar Controller 管理頁面，但想要新增一或數個 Tab 時使用。

使用 Segue 新增 Navigation Controller與 View Controller 的關聯

小結一下，不管是 Tab Bar Controller 還是 Navigation Controller，只要選擇正確的管理方式，會讓使用者在操作 App 時更加的直覺，也就是簡單易上手。這對一個 App 受歡迎與否可是相當重要的喔。

以上是今天的分享，我們 part 2 見。

專案 GitHub

gogenkei/LyricWorld

使用 Storyboard 實作歌詞 App (part. 2)

使用 Storyboard 實作歌詞 App (part. 2)