Storyboard製作App:模仿iOS的Apple Store App

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

另外加入了Dark Mode,介面和文字都有針對 淺色/深色 做調整,以防止在黑色背景時顯示不出黑色文字和黑色按鈕

模擬器的Dark Mode可以在 (設定 → 開發者 → Dark Appearance) 開啟

(也可以按快速鍵 command + shift + A)

先展示一下App的操作Gif:

Light mode淺色模式:

Dark Mode深色模式:

StoryBoard

使用了四個Tab

分別為 選購頁面 課程頁面 搜尋頁面 購物袋頁面

  • 注意事項
  • 每個 tab 都是獨立可有各⾃的 navigation controller
  • tab controller 要在第⼀個,後面再接 navigation

1.選購頁面

在選購的頁面加入了Bar Button Item 讓上面那排加入按鈕

另外因為還沒實作程式和資料庫,所以選購頁面先全部設定為已售完

2.課程頁面

在課程的頁面的Table View加入了Scroll View讓他除了上下還可以左右滑動

並且加入了圓角和陰影讓他比較像卡片也讓白色的卡片可以在白色的背景清楚顯示

3.搜尋頁面

Text View,Editable取消勾選,下面Data Detectors勾選Link(鏈接)可以將文字變成網頁連結。

Text View,Editable取消勾選,下面Data Detectors勾選Address(地址)可以將文字變成地圖連結。

GitHub:

--

--