設定 content size，實現水平捲動，上下捲動和分頁的 scroll view
對剛學會從 storyboard 製作 App 畫面，但還不會 Auto Layout 和寫程式的朋友，利用 table view controller 的 Static Cells 可以實現上下捲動的表格，那類似下圖紅色框框水平捲動的專輯頁面呢 ? 其實也可以做到，只要搭配擅長上上下下左左右右捲動的朋友，scroll view。
水平捲動的 Scroll View
接下來，就讓我們一步步實現在 iPhone 8 左右滑動的 Penny 專輯頁面吧。
1 在 Assets.xcassets 加入 Penny 的專輯圖片。
2 在畫面上加入寬度等於螢幕寬度的 scroll view，將背景顏色設為藍色。
3 加入容納專輯圖片的 View。
我們想讓 scroll view 水平捲動，關鍵在於 scroll view 上放一個超過 scroll view 寬度的 view，在 view 裡裝 scroll view 要顯示的內容。如下圖所示，黑色框框是 scroll view，藍色框框是 view，當我們向左 scroll 時，即可瀏覽右邊的專輯。
因此接下來我們將在 scroll view 上加入比螢幕寬度還長的 view，比方如下圖所示，scroll view 上多了一個超出螢幕的 View。
然而將東西加到超出螢幕的區塊會有點難度，因為我們看不到超出螢幕的區塊。因此以下我們將採用另一個做法，先將 View 加到左邊 Document Outline 的 Exit 下方。
加在 Exit 下的 View 因為並沒有長在 Controller 的 View 底下，所以它還不會顯示在畫面上，它將變成一塊獨立的長方形，孤單地長在 controller 的外面。
4 設定 View 的大小。
點選 View 後，切換到 Size inspector，將它的大小設為 600 * 150。
5 在 View 上加入三張專輯的 image view。
6 將剛剛設計好的 View 加到 scroll view 上。
從左邊的 Document Outline 點選 View，拖曳到右邊畫布的 scroll view 框框裡。(也可以拖曳到 Document Outline 的 scroll view 下）
如下圖所示，此時 view 會長在 scroll view 底下。
不過當 View 加到 Scroll View 上時，它會失去方向感，落在奇怪的位置。
7 調整 View 的 X 和 Y。
設定 View 的 X 和 Y，讓它出現在 scroll view 上。
8 設定 scroll view 的 content size。
我們希望 scroll view 能水平捲動，還有最後關鍵的一步要設定。scroll view 的 content size 決定了它內容的大小，也就是它可以捲動的範圍。content size 的寬度要大於 scroll view 的寬度才能水平捲動。(ps: content size 的高度大於 scroll view 的高度時將可上下捲動)
我們可以在 scroll view 的 User Defined Runtime Attributes 設定 content size，方法如下:
- 點選 scroll view。
- 切換到 Identity inspector 頁面。(左邊數來第 4 個 icon)
- 點選 User Defined Runtime Attributes 左下的 + 新增內容。
- Key Path 欄位輸入 contentSize，大小寫要一模一樣。
User Defined Runtime Attributes 可設定元件的 property，在此我們設定 scroll view 的 contentSize，透過它指定內容的大小。
- Type 欄位選擇 Size。
- Value 欄位輸入 {600, 0}。
第一個數字是寬度，第二個數字是高度。切記捲動的關鍵在於 contentSize 的寬或高大於 scroll view 本身的寬或高。我們將第一個數字設成容納專輯圖片的 View 的寬度 600，由於 600 超過 scroll view 本身的寬度 414，因此 scroll view 將能水平捲動。由於我們不需上下捲動，因此我們只要將第二個數字設成小於 scroll view 本身的高度即可，在此我們設為 0。
9 將 View 的顏色設成 Clear Color。
最後還有個小地方要調整。剛剛的 View 是白色的，請將它的顏色改成 Clear Color，如此才不會顯示白白的一塊。
執行結果
如果不能左右捲動 ?
別心灰意冷，請檢查以下四個地方是否設定正確。
- scroll view 須設定 contentSize。
- scroll view 裝的 view 的寬度須超過 scroll view 的寬度。
- scroll view 裝的 view 的寬度須等於 contentSize 設定的寬度。
- contentSize 設定的寬度須大於 scroll view 本身的寬度。
上下捲動也是類似的方法，只是檢查的地方從寬度變成高度。
分頁效果
iOS App 的水平捲動頁面時常會搭配分頁效果，讓 App 顯示完整的畫面，避免出現滑到一半，畫面裡的東西只有部分顯示的情況，比方以下照片 App 的例子。
當我們向左滑動，右邊的照片已經顯示超過螢幕一半的大小時，此時手放開後畫面將自動滑動到第二頁，讓下一張圖片完整顯示。
利用 Scroll View 實現分頁功能其實很簡單，只要搭配以下 2 個步驟。
- 勾選 Paging Enabled，打開被封印的分頁功能。
2. 分頁的大小由 Scroll View 的寬度決定。
比方當 Scroll View 的寬度等於 iPhone 8 螢幕的寬度 375 時，每頁的寬度即為 375。若我們希望有三頁，則可將 contentSize 設為 375 的 3 倍，設為 1125 (375 * 3)，然後將三張圖片分別放到這三頁，利用數學計算每張圖的 x 座標。比方第一張圖的 x 座標落在 0 ~ 375 之間，第二張圖的 x 座標在 375 ~ 750 之間，第三張圖的 x 座標在 750 ~ 1125 之間。
上下捲動的 Scroll View
原理和左右捲動的 Scroll View 差不多，主要差別在 contentSize 的第二個數字決定上下捲動的範圍，比方 {0, 1000} 表示上下捲動的範圍為 1000，左右不捲動。
