HW #5 開發 Storyboard 電子書 App《名偵探柯南:100萬美元的五稜星》
作業目的: 不寫程式,從 storyboard 運用 tab bar controller,navigation controller,table view controller & static cell 實作電子書 App。
最近剛好柯南新的劇場版上映中,那就來做《名偵探柯南:100萬美元的五稜星》電影介紹。
App 架構
第一波規劃用 tab bar controller 做兩個分頁來介紹,分別是:劇情大綱、關鍵人物。 navigation controller 與 table view controller 做關鍵人物的列表與介紹。
先來看 App 操作的動畫影片 gif
storyboard
啟動畫面 (LaunchScreen): 是指在 App 啟動時顯示的初始畫面,通常是從啟動到載入完成之間的過渡畫面。我在這裡設計放入電影海報來傳達電影放映時間。
電影介紹:使用 image view(dark mode) + scroll view + label。
image 想在 dark 模式下顯示另一張圖要從這裡選擇。
關鍵人物:使用 Table View Controller 裡面使用 Static Cells,設置一個 Section,Table View Section 下設置文章數量的 Rows,每個 Table View Cell 建立 Segue 到各自對應人物說明。
cell 按下後不要變色的設定在這裡這設定。
總結實作項目
- 搭配 Tab Bar Controller & Navigation Controller
- 使用 SF Symbols
- 使用到 Scroll View + Label 實現捲動畫面
- 使用 Table View Controller with Static Cells
- 使用 Segue 串接頁面
- 設定 App Icon 、名稱和 App 的開頭畫面(LaunchScreen.storyboard)
- 圖片支援 Dark Mode
資訊來源:
github 連結: