#Task-02 Storyboard 電子書App-New Zealand Travels Guidelines
這是一個紐西蘭旅遊指南電子書，包含熱門景點、活動、美食介紹跟相片集
本來以為接近離職的時刻會比較輕鬆點，結果完全沒有，天天忙到爆炸！導致這邊作業進度嚴重落後😭 3月快結束吧！！！
這次的作業是要製作一個自己有興趣的電子書App，因為之前去紐西蘭打工度假的經驗很棒，太喜歡這個國家了，就想透過這次的作業將紐西蘭的美分享給大家：）
先來看看操作畫面：
還有 Storyboard 畫面：
使用到的功能
＊ Tab Bar Controller 搭配 Navigation Controller
＊ 水平捲動分頁的 Scroll View
＊ Segue 串接頁面
＊ Table View Controller with static cells
＊ Container View 設定表格背景圖片
＊ 各種 UI 元件的應用：View，Button，Label，Image view，Text view，Table view，Scroll view，Visual effect view with blur，Map Kit View
— — —
運用 Tab Bar Controller 搭配 Navigation Controller，做出有四個 Tab 的畫面
- 新增 Tab Bar Controller，設定為 initial view controller
- 新增 4 個 Navigation Controller，分別設定需要的 icon 跟文字
- 新增 View Controller，然後從 Navigation Controller 拉 Segue 到 View Controller 上，選 Relationship Segue 底下的 root view controller
- 製作每個 tab 的首頁跟下一層畫面
運用 Scroll View 製作可水平滾動的介紹畫面
- 新增一個 Scroll View 在要放置介紹圖片的位置，寬度跟螢幕一樣，高度依據需求調整
- 在 Scroll View 中加入一個 View，因為要水平捲動，所以 View 的寬度需大於 Scroll View 的寬度，才有足夠的畫面拿來捲動
- 超出螢幕的 View 會看不見，為了方便編輯，先將 View 拉到頁面外面，將圖片及文字都擺好再放回 Scroll View 中
- 在 Scroll view 的 User Defined Runtime Attributes 設定 Content size （Key Path: contentSize，Type: Size，Value: { view的寬度 , 0 }，），Content Size 的寬度(x)也要大於 Scroll View，執行時才能順利水平捲動，高度(y)可以設 0 就好
- 把 View 的背景顏色設為 Clear Color，只顯示美美的圖片，不要其他背景
- 希望使用者往左右滑到一定距離後就自動捲動到下一個圖片，所以在 Scroll View 的屬性欄位中，將 Scrolling 裡的 Paging Enabled 打勾
運用 Container View 設定表格背景圖片
- 在 View Controller 上新增一個 Image View，將想設為背景的圖片放入，並將大小調整成自己需要的尺寸 (若要使用毛玻璃效果，也在這邊先設定好)
- 新增 Container View 到 View Controller 上，並將Container View 調整成Image View 的大小
註：Container View 應該要在 Image View 上方（把 Container 包在圖片上面的概念） - 刪除原本 Container View 另外連接的空白 View Controller，因為我們要用的背景已經在現在放 Container View 的 View Controller 中
- 從 Container View 拉 Segue 到 Table View Controller，選擇 Embed，執行時 Table View 的內容就會顯示在上面
- 將 Table View Cell 的 Background 設成 Clear Color，才不會擋住背景圖片
用 Text View 製作可上下捲動的介紹畫面
Text View 預設都是可以讓使用者編輯文字跟複製文字，但因為這裡只想要顯示文字，不讓別人編緝，所以將屬性中 Behavior 的 Editable 取消勾選
用 Table View Controller 製作照片牆
- 新增 Table View Controller，將 Table View 的屬性設為 Static Cells。這時候預設會產生 3 個 Cells，先把後面兩個刪除，留一個就好
- 將 Cell 調整成適合放照片的高度，然後新增 Image View 到 Cell 中。因為希望圖片跟圖片之間留點白線，因此寬度依照畫面的寬度約略除以 3 ， 高度設成比 Cell 少一點點，之後再複製兩個擺上去看看是不是自己想要的樣子
- 調整好後，根據需求在 Table View Section 設定 Rows 的數量。因為我一共要放 36 張照片，一個 Cell 放 3 張，所以設定 36/3 = 12
- 依序將 Image View 設成要顯示的圖片就完成
P.S 照片牆裡的所有照片都是本人拍攝，不是網路抓的哦！紐西蘭真的好美嗚嗚嗚我好想念那裡！！！
— — —
這次因為希望可以直接在畫面上顯示地圖，所以還是用了 Map Kit View，寫了一點點程式，不過因為只先做了 3 個地點的分頁示意，加上這個不是這次作業的重點，這邊就不贅述，大家可以參考彼得潘的文章了解怎麼設定地圖
— — —
附上作業的 Github 檔案
其他參考資料
— — —
最後是作業心得：
這是一個邊做邊激起我在紐西蘭打工度假的回憶的作業啊啊啊
不過撇開最近因為比較忙沒什麼時間做作業外，這個作業意外地也真的是花了我不少時間…
一方面是希望做出來的東西不要太隨便(? 所以在構思、設定樣式跟背景來來回回改了好幾次（這時候就突然覺得還好以後當工程師會有專業的美術人員搞定畫面設計XD），糾結到底要純色背景就好還是統一都要放背景圖 ; 到底要用 Scroll View 捲動還是用 Table View Controller ; 到底底下的 Tab 要更像個完整的 App 加上可以儲存喜歡的頁面跟搜尋功能，還是單純旅遊介紹就好（後來因為這些功能目前無法實踐只能弄個空白頁示意，所以乾脆還是做旅遊介紹就好），最後就是現在這個樣子，哈哈
再來就是可能因為我放了太多圖了所以 Project 檔案超過可以直接上傳 Github 的大小(>100MB)，所以要透過 Terminal 上傳，這部分又搞了一段時間 Orz，我會再發另一篇專門說明這個部分！
