【 iOS 中文開放式課程 】Tab Bar 頁籤頁面切換





(XCode 9, iOS 11 , Swift4 )

我們需要您的贊助

學習目標

學習如何使用 Tab Bar 頁籤進行頁面切換

APP UI 介面草圖

操作步驟與說明

  • 點擊 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。
點擊場景 1 的 tab bar,到屬性面板,指定圖片來源名稱,同理場景 2 也是這樣設定。
  • 運行,看結果

本範例圖片取自:flaticon

這個網誌中的熱門文章

16天記下7000單字

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)

nano 文字編輯器

【從零開始學 Flutter 程式設計】SharedPreferences 設定檔資料存取