#7 Scoll View水平捲動練習
在做這個練習前想了很久要做什麼主題的練習，想到紙娃娃主題後，就想到以前國中時期玩的線上遊戲《仙境傳說Ragnarok》，當時這款遊戲以各種頭飾的紙娃娃系統而出名，但年代實在有點久遠找不太到素材，於是我又想起當初在玩遊戲時很常用裡面的表情符號。
沒想到在Line貼圖上有人上架了這款充滿回憶的貼圖。
於是借用一下Line這組貼圖來當素材做一下功課。
去背轉存為PNG後，先把這些材料放旁邊等等再來下鍋。
再來就是角色，在google的時候沒想到隨著網頁系統的進步，現在也可以在網頁上體驗這款充滿回憶的遊戲，MacOs也可以玩！！！
進入網站後選擇START DEMO，就可以直接開始啦！
本來想取個煞氣a之類的名字，但卻不支援中文嗚嗚。
進入遊戲就獲得一個角色素材了。
再來就是進入Xcode開啟專案。
在Assets的地方將剛剛的素材加入。
添加一個Image View將背景素材置入。
添加一個Scroll View來建立水平捲動，寬度設定和手機的寬度一樣。
再來添加一個View，把表情符號都放上去，View的寬必須長於剛剛的Scroll View，這樣才能製作水平捲動的效果。
超出範圍的View會看不到，這樣在設計上會不方便，因此把View拉到旁邊Exit的下方，這樣上方會出現我們剛剛的View，就可以慢慢設計啦。
再來就是我們在捲動時，該如何處理表情符號停留的位置必須在我們指定的位置上。
模擬器目前設定為iPhone 15 Pro，寬度為393px，我們希望表情符號的位置大約在中間偏左，所以先將View的寬度設定為393px，第一張Image View寬度設定為196px，差不多螢幕一半的位置，右半邊為了不讓另一個表情符號跑出來所以保持空白，放上寬為197px的空白Image View填滿一頁。
所以現在顯示表情符號的一個頁面佔了393px，一個螢幕的寬度，大概像這樣的感覺。
將這兩張圖片設定為Group以便等等複製，昨天剛好問了彼得這個方法所以來試試！
總共要放五頁表情符號，一頁為一個螢幕寬度（393px），所以View的寬度設定為1965px（393*5）。
將Group複製貼上，並放好位置並設定好圖片。
再來就是將View拉到Scroll View裡，剛丟進去時View的位置會亂跑，到設定裡將位置設定為X0Y0即可。
再來就是這三個地方要將Background設定為Clear Color，捲動的地方才會顯示透明。
- Scroll View。
- 放置表情符號Image View的View。
- 剛剛五張表情符號+五張空白的Image View。
完成後就會變成這樣。
接著就是設定 Scroll View 的 content size。
在彼得潘的教學有提到：
scroll view 的 content size 決定了它內容的大小，也就是它可以捲動的範圍。content size 的寬度要大於 scroll view 的寬度才能水平捲動。(ps: content size 的高度大於 scroll view 的高度時將可上下捲動)
- 首先點選Scroll View。
- 在右方 Identity inspector裡，按下方的+。
．Key Path設定為「contentSize」。
．Type設定為「Size」。
．Value的的設定為{寬度：高度}，因此這邊設定原本放Image View的View寬度（1965px）。
另外我們要將Scroll View設定分頁效果，這樣表情符號才會停留在我們想要的位置。
因為我們前面已經將分頁的位置都設定好，所以最後只要在Scroll View將Paging Enable打勾就可以了。
在選擇表情符號時，我們不希望下方有Scroll Bar。
將這兩個打勾的地方取消，就不會出現了。
執行結果如下。
