#13 Storyboard 電子書 App — BT21

這次的作業是電子書App, 特別的是需要不使用程式來完成. 這次的主題為BT21, 這個常常出現在Line App的角色, 如果你對他還不認識, 希望這次的App能夠讓你對BT21有些初步的了解.

首先, 先附上完成時的Main.storyboard截圖:

彼得潘的教學網站已經有許多詳細的教學文章, 引導大家一步一步完成自己想要的功能, 所以這篇文章的重點我會放在如何使用tab bar controller, navigation controller 以及 table view controller 來完成電子書的架構. 若對其他功能有興趣的話可以參考彼得潘的網頁:

Navigation Controller

大多數的App都會有畫面切換, 可以透過點選左上角的返回鍵來回到上一頁.

Step1:點選View Controller頁面,

Step2: 在右下角的Embed In 中點選Navigation Controller.

Step3: 這時候會發現原本的View Controller前面多增加了一個Navigation Controller.

Step4: 新增一個Button以及View Controller.

Step5: 選取Button, 並按住滑鼠 (以及control鍵)並拖曳到右邊的View Controller, 並選取Show (透過Segue的方式連接這兩個View Controller).

Step6: 可以看到右邊的View Controller出現了Back頁面. 已經能夠透過點選Button和Back來切換頁面了!

Tab Bar Controller

接著, 我們希望能夠過Tab Bar Controller的功能來讓App的畫面更豐富.

Step1: 先透過Library新增Tab Bar Controller. 會看到預設畫面會是一個Tab Bar Controller連接到兩個分頁.

Step2: 先把Tab Bar Controller的頁面設為首頁 (Is Initial View Controller). 點選Tab Bar Controller, 按著滑鼠 (加上control鍵)拖曳到Navigation Controller, 點選view controllers.

Step3: 可以點選Navigation Controller的畫面, 選到一個藍色星星的檔案, 便可以透過右方的Title和Image來修改分頁的名稱以及圖案.

Table View Controller

完成上面的步驟後, 你已經能夠做出透過Tab Bar來切換不同分類的頁面, 並再透過Navigation的方式來點選每個分頁內的子頁面功能.

接著, 我們再來學習Table View Controller的功能, 可以實現多個表格上下捲動的功能.

Step1: 透過Library來新增Tab View Controller. 因為是不用寫程式的版本, 所以需要點選右邊Table View, 把裡面的Content的內容改成Static Cells.

Step2: 我們先專心設計一個Cell的畫面, 所以先把左邊其他的Table View Cell刪除掉 (原本預設為3組Cells). 接著, 再Table View的畫面調整Cell的大小.

Step3: 透過Library加入畫面(Image View)以及內容(Label).

Step4: 我們希望點選Cell後能夠跳到另一個畫面來顯示更多內容, 所以這邊我們先點選Table View Controller, 再從下角的Embed In中點選Navigation Controller, 這樣待會後面的頁面才可以透過Back來返回前一個畫面.

Step5: 接著是把Tab Bar Controller和Navigation Controller做連結. 點選Tab Bar Controller 後, 按住control鍵並拖曳到Navigation Controller, 點選view controllers.

Step6: 新增一個View Controller, 並加入Image View來顯示大張的圖片.

Step7: 再來是Cell厲害的地方, 我們可以透過Cell來連接後面的畫面(不需要透過Button). 點選Table View Cell (按住control鍵), 拖曳到要連接的View Controller, 放開後點選show即可連結.

接著來看看最後的成果吧!

GitHub:

--

--

KuoJed
彼得潘的 Swift iOS / Flutter App 開發教室

「沒有一件你努力過的事是白費的。」 當你這麼相信,並且實踐,就會成真。