星期六, 7月 08, 2017

【 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

0 意見 :

張貼留言

回覆意見時,麻煩輸入一下暱稱
(隨便取個名字也好~ ^_^)
好讓我方便回覆您的問題,
選擇「名稱/網址」輸入您的暱稱,
麻煩一下,謝謝大家。

關閉廣告 [X]