#4 Storyboard 電子書練習

搭配tab bar controller, table controller, navigation controller

主題是<<Personal Color>>,靈感源自曾經測過的個人色彩與一本分析骨架&基因色彩的穿搭書,找到適合自己的穿搭與顏色,可以大大降低買錯衣服的機率,環保又省錢~

使用 Xcode的storyboard:

  1. 加入多個 View Controllers_> 在 View中加入所需的 Label, Image, Button_>

2. 之後再使用Segue做串接:

在Button同時按壓兩指作拖曳到下個頁面(選show)

在Button同時按壓兩指作拖曳到下個頁面,選show

3. 透過 Navigation controller讓後續頁面可以回到前一頁:

點選第一張起始頁面_> 點選下方的向下箭頭_> 選擇Navigation Controller,之後就會在首頁前出現(藍色框框)

4. 使用 Tab bar controller 使頁面可以直接回到首頁:

點選 Navigation Controller_> 點選下方的向下箭頭_> 選擇 Tab Bar Controller,之後會在Navigation Controller的介面前出現,Initial View Controller的箭頭會跑到 Tab Bar Controller前面(這是正常的,若把箭頭移回首頁,模擬器跑起來畫面會是全黑的)

做到這裡使用模擬器效果會是:

Navigation Controller對應Back鍵, Tab Bar Controller對應Home鍵

5. 透過 Table View Controller 額外在首頁增加平行的標籤頁:

從右上方的“+” 加入 Table View Controller的介面_> 編輯內容:這頁想做個四季色彩的總覽,做出像電影節目表般一條一條的目錄

1)點選底下的 Table View_> 在右側 Table View的 Content選擇 Static Cells

2)先將 Table View Section底下的 Table View Cells刪除到只剩一個(方便之後調整頁面讓每個cell的大小比例一致)_> 編輯畫面 _> 再將右側工具列中的 Rows 從 1 調整到想要的排數_> 編輯畫面(置換對應的圖片與文字)

3)最後再從 Tab Bar Controller做Segue(show controller)拖曳到 Table View Controller上

最後模擬器呈現的效果會像:底下多了一個總覽的標籤頁

GitHub網址:

介面圖片來源:

--

--