HW2-使用scroll view中的contentSize來實現水平捲動，上下捲動和分頁.

這次作業就用常看的霹靂布袋戲來實現.現在上課所見入眼,入眼即忘,比金魚腦還慘….聽首歌吧

https://www.youtube.com/watch?v=hQMRGsteyRc

水平捲動的 Scroll View

1 先在 Assets.xcassets 加入 5張布布圖片。

2 在畫面上加入寬度等於螢幕寬度的 scroll view，並將背景顏色調成喜歡的顏色。

3 加入素素與一頁書的 View。

這裡要先將view拉到左邊Document Outline 的 Exit 下方,並將寬度設定為1000.這樣做的原因是先將view(拉大後)在外面完成後再放到scroll view裡面.

4.將剛剛設計好的 View 加到 scroll view 上。但此時所呈現的位置有點奇怪,需調整 x 與 y (見圖4.2 紅框處)

4.1

4.2

5.調整 View 的 X 和 Y,讓它出現在Scroll view上。

6.設定 scroll view 的 content size。(如下圖紅框處)

點＋之後在Key Path 內輸入contentSize ,大小寫有影響 大小寫有影響 大小寫有影響.

value為{1000,0}

{x,x}第一個數字是寬度，第二個數字是高度。捲動的關鍵技巧在於 contentSize 寬(高)要大於 scroll view 本身的寬(高)。我們一開始時將布布圖片的 View 的寬度 1000，由於 1000超過 scroll view 本身的寬度 414，因此 scroll view 將能水平捲動。由於我們不需上下捲動，因此我們只要將第二個數字設成小於 scroll view 本身的高度即可，在此我們設為 0.

7.這裡還要將原本白色的Vive 設成 Clear Color,讓背景不要醜醜的。

8.執行後結果(有沒有發現滑動到第二張圖時畫面沒有完整呈現）

這時候要使用分頁設定來完成.

在Scroll View 的Paging Enabled要給他用力勾起來,並調整分頁的寬度

比方當 Scroll View 的寬度等於 iPhone 12螢幕的寬度 390 時，每頁的寬度即為 390。若我們希望有三頁，則可將 contentSize 設為 390 的 3 倍，設為 1170(390 * 3)，然後將三張圖片分別放到這三頁，利用數學計算每張圖的 x 座標。比方第一張圖的 x 座標落在 0 ~ 390 之間，第二張圖的 x 座標在 390 ~ 780 之間，第三張圖的 x 座標在 780 ~ 1170 之間。

9.調整後

10.如何實現上圖-上下捲動的 Scroll View

原理和左右捲動的 Scroll View 類似，主要差別在 contentSize 的第二個數字(高度)決定上下捲動的範圍，比方 {0, 1000} 表示上下捲動的範圍為 1000，左右不捲動。