【 iOS 中文開放式課程 】Tab Bar 頁籤頁面切換
![](https://i.imgur.com/mnB0S2K.jpg)
(XCode 9, iOS 11 , Swift4 )
我們需要您的贊助
學習目標
學習如何使用 Tab Bar 頁籤進行頁面切換
APP UI 介面草圖
![](https://i.imgur.com/bTMZaVl.png)
操作步驟與說明
- 點擊 Xcode 圖示,開啟 Xcode 應用程式
- 在歡迎畫面中,選擇 『 Create a new Xcode project 』
- 選擇最基本的單頁畫面範本來建立專案
- iOS -> Single View App ->Next
- 設定專案名稱
Product Name: DemoTabBar - 開啟 Main.storyboard ,點擊場景 1
- Editor -> Embed In -> Tab Bar Controller
- 將會發現 Storyboard ,將會自動生出一個 Tab Bar Controller,且原本的場景一,將會自動加入 Tab Bar Item
- 我們再從元件庫,拉一個 View Controller 出來,此為場景2
- 從根 Tab Controller 與場景2 建立 Relationship Segue
- 連線完成後,將會發現多了一顆 Tab Bar Icon
- 我們將場景1,背景顏色設定為綠色,場景2,背景顏色設為黃色
自訂 tab bar icon 樣式
- 點擊 Assets.xcassets 新增兩組圖片,分別取名為 ImageA 和 ImageB,圖片來源可以參考: flaticon,下載自己喜愛的圖片,將它新增到指定的解析度內如: 3X。
![](https://i.imgur.com/6lNUJft.png)
點擊場景 1 的 tab bar,到屬性面板,指定圖片來源名稱,同理場景 2 也是這樣設定。
![](https://i.imgur.com/DxCC2OU.png)
![](https://i.imgur.com/DxCC2OU.png)
- 運行,看結果
本範例圖片取自:flaticon