Storyboard 電子書 App

Hank
彼得潘的 Swift iOS / Flutter App 開發教室
4 min readMar 22, 2022

不寫程式,用Storyboard實作電子書

功能需求

  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,可點選文字連結顯示網頁和地圖。

要注意如果要讓網址連接成功,selectable和link要打勾,如果要把字隱藏的話要將background和Tint顏色調成clear color。

7. 使用 SF Symbols。

8. 支援 dark mode。

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

10. 多個 storyboard

App Icon使用 App Icon Generator,這個網站可以幫我們製作成不同大小的Icon

因為特別喜歡七龍珠所以想試著做成電子書看看。

App架構

用Tab bar Controller連接三個Navigation Controller,在使用Segue串接多個storyboard。

一開始因為想要做成像遊戲的感覺所以加入了開頭畫面

在LaunchScreen加入一個image view

主頁想要有選擇主角代入感所以使用Scroll View水平加入角色

角色介紹也利用Lable及Button製作切換頁面的感覺

參考資料

--

--