#5 Storyboard eBook of Jewel Changi Airport 星耀樟宜 電子書

Jewel(星耀樟宜)是在2019.4月開幕的新加坡機場新景點，開幕不到一年就碰到新冠病毒肆虐，瞬間讓它變得空曠不擁擠，好好逛啊！但隨著旅遊逐漸開放，也漸漸回復起初的榮景。電子書的規劃包含簡介、景點、餐館以及圖片集。

用到的技術有：

1. tab bar controller & navigation controller
2. table view controller with static cells
3. segue （from button / cell to view controller)
4. App Icon
5. iOS SDK 的 UIKit : View, Button, Label, Image View, Text View, Table View Cell, Table View Controller, Scroll View
6. 讓照片呈現圓角

心得：

1. Scroll View 的程序比較多一些，在Image View選擇想要的影像 → 把幾個Image View放進View裡 → 把 View 放進 Scroll View，最後比較容易忘記的是把 View 放進 Scroll View 後得把 View 座標重新設定成 ( 0,0 )，感覺像是把 View 對齊 Scroll View 的左上角。

View 座標在 Scroll View 裡設成 (0,0)

2. Scroll View 要能捲動 必須要在 Identity inspector > User Defined Runtime Attributes下按＋，如下圖橘色箭頭輸入，Key Path 輸入 contentSize，Type 選 Size，Value則寬要至少等於 View 的寬。

藍色箭頭則是設定圓角的部分，一樣要在 Identity inspector > User Defined Runtime Attributes下按＋，Key Path 輸入 layer.cornerRadius，Type 選 Number，Value越大角度越圓。

3. 若是要進行許多次重複的動作，如製作類似IG的圖片牆，可以把第一個完全製作完成，當之後複製的樣本(Template)，可減少一些時間。

4. 最後，用到了 tab bar controller 和 navigation controller，連接tab bar controller的方法是拉 segue，放開觸控板後，選擇 Relationship Segue 下的 view controllers ；提一下如何換顏色，都是一樣在點選他們的 tab bar 跟 navigation bar 之後，在 Inspector area > Attributes Inspector 的 Appearances 下，勾選 Scroll Edge 就可以更改顏色了，預設是透明毛玻璃效果。

5. 設定App顯示名稱

🌟 若要使用到較複雜的表格技術可參考：
Header & Footer進一步的應用：

table view 的 header & footer

利用container view製作更複雜的畫面：

利用多個 container view 切換頁面

有關表格的背景設定：

設定表格的背景圖片

Storyboard 畫面

App 截圖

錄製 GIF

🌟 按下shift + command + A ：可以切換 Dark Mode

animated GIF

上傳 GitHub

GitHub - Ryan-CY/eBook-of-Jewel-SG-rename