#3 Storyboard 電子書 App _ 神隱少女

這次的作業我打算做一個介紹電影《神隱少女》的電子書APP。

整個規劃用tab bar controller做五個分頁來介紹。

1. 劇情大綱
2. 登場人物
3. 劇照
4. 電影海報
5. 相關資料

1. 劇情大綱：使用image view + text view + dark mode

在Assets裡設定Dark Mode的圖片

Any Appearance & Dark Mode

2.登場人物：這裡的背景圖片是參考彼得的文章用Container View設定好，在用 table view controller with static cells完成可以上下捲動的人物列表，並搭配navigation controller點選人物跳到各自的介紹畫面。

設定表格的背景圖片

Any Appearance & Dark Mode

3.劇照：這個頁面用table view controller做成照片牆的樣式，並搭配透明的button來實現照片點選的效果。

#53 照片牆(Grid Photo Wall)

4.電影海報：用scroll view呈現水平捲動和分頁效果。

設定 content size，實現水平捲動，上下捲動和分頁的 scroll view

5.相關資料：使用 text view，可點選文字連結顯示網頁。

Any Appearance & Dark Mode

最後在去Assets設定App icon還有LaunchScreen加上啟動畫面，大致上就完成了。

DEMO:

Github:

GitHub - ggisfun/SpiritedAway

Reference:

#24 Storyboard 電子書 App