【 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

這個網誌中的熱門文章

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

2023 最新 Android 教學【開發 Android APP 手機應用程式:使用 kotlin 程式語言】教學課程目錄 (Android Kotlin, Android Studio, Android APP 開發教學)

16天記下7000單字

nano 文字編輯器