#7 Storyboard 電子書 App — Pui Pui 天竺鼠車車

張又壬
5 min readJul 16, 2021

--

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

電子書簡介:

分為三個區塊:

  1. 故事大綱:介紹天竺書車車的世界
  2. 角色介紹:介紹五個主要的天竺鼠車車,讓大家了解這些可愛的天竺鼠車車有著什麼樣的性格
  3. 影片:前面介紹那麼多不如直接給大家看看這些天竺鼠車車有多可愛吧!

使用到的功能:

  1. tab bar controller 用來做內容的分類

2. navigation controller 用來顯示每個主題的 Title

3. table view controller with static cells 用來顯示每隻天竺鼠車車和影片

這裡要特別講一下我遇到的困難的地方就是 Navigation Bar 上的 Title 只要下面的 Scroll View 滑動一下 Title 就會變小然後顏色變成黑色,問了 Peter 才知道原來要去設定 Standard Appearances,勾起來才會出現 Standard 狀態時的 Title 設定

然後再來就是在按下 Table View Item 時,轉換頁面前,會讓選擇的那個 Item 變成灰色的,研究了好就才發現原來只要設定 Table View Cell 裡的 Selection 選擇 None 就不會出現灰色了

4. 使用 segue 串接頁面

5. 設定 App Icon ,名稱和 App 的開頭畫面(LaunchScreen.storyboard)

6. 使用到 iOS SDK 的各種 UI 元件,view,label,image view,text view,table view

7. 使用到 text view,可點選文字連結顯示網頁

可點擊連結到 youtube 觀看

8. 使用 SF Symbols

9. 使用 Google 的 Material Icon

10. 支援 dark mode

StoryBoard:

執行結果:

心得:

這次做這個作業花了好多時間想到底要做什麼內容好,想了好久才決定做超可愛的天竺鼠車車,做這個專案的時候終於有熟悉到一些元件的設定跟操作了,像是 Table View 和 Navigation View 的一些設定,沒實際跑一跑模擬器不知道問題出在哪裡,然後在 Assets 裡面設定自訂的顏色真的很重要,我一開始每個 Lable 或底色都自己選 custom 顏色,實在太麻煩了,然後想換顏色的時候更麻煩,有用自訂顏色的話,換色就容易多了!

參考資料:

Git:

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

張又壬
張又壬

Written by 張又壬

目前正在努力學習 swift

No responses yet

Write a response