#24 Storyboard 電子書 App

作業目的: 不寫程式,從 storyboard 運用 tab bar controller,navigation controller,table view controller & static cell 實作電子書 App。

創作一個自己有興趣的 App,比方唐詩三百首,美食記錄,電影記錄,音樂記錄,女朋友記錄,寵物寫真,寶寶寫真等。

例1: 唐詩三百首 App 。第一個tab是唐詩,第二tab是宋詞。第一頁顯示詩人列表,第二頁顯示詩人作品列表,第三頁顯示作品內容 。 每一頁的bar上要顯示標題 。

例2: 音樂 App。第一個 tab 是男歌手,第二個 tab 是女歌手。第一頁顯示歌手列表,第二頁顯示歌手的歌曲名稱列表,第三頁顯示歌詞。

功能需求

  1. 搭配 tab bar controller & navigation controller。
  2. 使用 table view controller with static cells。
  3. 使用 segue 串接頁面。
  4. 設定 App Icon ,名稱和 App 的開頭畫面(LaunchScreen.storyboard)。
  5. 使用到 iOS SDK 的各種 UI 元件,比方 view,button,label,image view,text field,text view,segmented control,slider,switch,table view,scroll view,progress view,stepper,date picker,visual effect view with blur。
  6. 使用到 text view,可點選文字連結顯示網頁和地圖。

7. 使用 SF Symbols。

8. 使用 Google 的 Material Icon。

9. 支援 dark mode。

錄製影片時,可從模擬器快速切換 dark mode。

10. 包含左右滑動區塊的 table view

11. 多個 storyboard

可考慮加入的特別功能

ps: 粉圓字型參考

  • 使用 auto layout。

SwiftUI 範例

以下連結同學以 SwiftUI 開發的電子書也可參考,Storyboard 也能實現一樣的畫面。

Storyboard 作品集

彼得潘的 100 道 Swift iOS App 謎題

適合新手練功的 100 道 Swift iOS App 謎題

彼得潘的 100 道 Swift iOS App 謎題

適合新手練功的 100 道 Swift iOS App 謎題

彼得潘的 iOS App Neverland

Written by

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com

彼得潘的 100 道 Swift iOS App 謎題

適合新手練功的 100 道 Swift iOS App 謎題