#2-Xcode — Scroll View(簡易拼圖遊戲）

設定 content size，實現水平捲動的 scroll view

藉由Scroll View滑動圖片的原理實現拼圖遊戲並從中學習如何設定contentSize

Step1.在 Assets.xcassets加入圖片。

利用https://postcron.com/image-splitter/en/
裁切欲使用的圖片後，
將圖片加到Assets.xcassets中。

Assets.xcassets（加入圖片）

Step2.從library中找到Scroll View，加到View。

設定為一個３*３大小的拼圖，
因此在View加入9個同等大小且寬度總和與螢幕等寬的Scroll View。

library -> Scroll View

Step3.加入放置拼圖圖片的view。

要想在Scroll View實現水平滑動效果，
須在Scroll View中放入一個寬度大於Scroll View的View，
並在View中放置Image View。

！！Hint！！
設置寬度大於Scroll View的View時，
可先將View放置在左邊 Document Outline 的 Exit 下方。
待設定完成後再加回Scroll View中，
藉此免去因寬度較寬看不到畫面的窘境。

將View放置在左邊 Document Outline 的 Exit 下方

Step4.在view中設置ImageView並放入圖片。

Image View -> View

Step5.將設置完成的view放到Scroll View中。

View -> Scroll View

Step6.調整每個View在對應的Scroll View中的相對位置（x，y)。

size inspector

Step7.設定 scroll view 的 contentSize。

選取Scroll View後在Identity inspector中User Defined Runtime Attributes設定屬性。
Key Path設為contentSize(注意大小寫）
Type設為Size
Value{寬，高}設為和放置imageview的view等寬

setting contentSize

Step8.執行結果

GitHub:Scroll-View