#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:
