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

資訊來源：

劇場版『名探偵コナン 100万ドルの五稜星（みちしるべ）』

github 連結：

GitHub - katehh1423/Konan