用 Tab Bar Controller 製作 Tab App 的步驟說明

1 建立第一個 tab 的 controller 畫面。

拉出 View Controller,設計 controller 的畫面。

2 點選 controller 的畫面後,點選右下角的向下箭頭,從選單選擇 Embed In View Controller 下的 Tab Bar Controller。

長出 Tab Bar Controller,透過 segue 連到 View Controller。

記得檢查 Tab Bar Controller 前是否有箭頭指到它。沒有的話請先點選 Tab Bar Controller,在它的 Attributes inspector 頁面勾選 Is Initial View Controller。

3 建立第二個 tab 的 controller 畫面。

拉出 View Controller,設計第二個 tab 的 controller 畫面。

4 從 Tab Bar Controller 拉 segue,連線到第二個 tab 的 controller。

連接 segue,放開觸控板後,選擇 Relationship Segue 下的 view controllers。

Tab Bar Controller 下方的 tab bar 現在顯示兩個 Tab 了 !

剛剛連 segue 時,請記得不要從下方的 Tab Bar 拉線,從 Tab Bar 拉出的 segue 是連不到 controller 的。

5 製作第三個 tab,第四個 tab 的畫面。

重覆前面第 3,第 4 步,從 Tab Bar Controller 拉 segue 到 View Controller。從 Tab Bar Controller 拉了幾條 segue 到 controller ,就代表會有幾個 tab 頁面。

例子: 四個 tab 的 App,顯示 4 本此生必讀的世界名著。

搭配 navigation controller

如果想要 tab 頁面有 navigation controller,可以一層一層地進到下一頁,可依以下步驟操作。

1 點選某個 tab 的 controller 畫面。

比方點選下圖的 Oliver Twist 畫面。

2 點選右下角的向下箭頭,從選單選擇 Embed In View Controller下的 Navigation Controller。

長出 Navigation Controller,插在 Tab Bar Controller & View Controller 之間。

App 執行的畫面

--

--

彼得潘的 iOS App Neverland
彼得潘的 Swift iOS App 開發問題解答集

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com