#10 stack view + scroll view｜不寫程式也可以做捲動分頁

【Storyboard #3】

stackView 搭配 scrollView不需要寫程式，就可以製作捲動分頁，適合應用在儲存在App中的少量圖片顯示，或少量按鈕的水平捲動上。

若需要動態給圖，如連結資料庫、網路抓圖，就必須透過程式將元件加進stackView，方法請參考彼得文章👇

從程式動態加 view 到 stack view

「補充」捲動分頁的動態給圖更常用的是collectionView喔～

功能應用

◼ Auto Layout

◼ Stack View

◼ Scroll View

◼ Content Layout Guide & Frame Layout Guide

Storyboard

⚉ 捲動的scroll view有兩種layout guide：

Frame Layout Guide 決定scroll view本身的大小
Content Layout Guide 決定content size大小，而scroll view內容的大小則由 content size決定

⚉ 要讓scrollView能夠捲動，content size 必須大於scrollView大小：

content size 的寬度大於 scroll view 的寬度 → 可水平捲動
content size 的高度大於 scroll view 的高度 → 可上下捲動

STEP1：將數張圖片加到Assets.xcassets

STEP2：加入 scroll view，並設定上下左右與view/safe area的間距為 0，此為最外層的大小，可設定scroll view的大小，若不填滿調整間距即可。

勾選scroll view的 Paging Enabled，可在捲動時顯示完整的圖片。

STEP3：在scrollView加入imageView並放入一張圖片。

若要圖片佔滿畫面，Content Mode可設為Aspect Fill，圖片維持比例顯示，則可設為Aspect Fit。

STEP4：將image view加到stack view，並設定 stack view

stack view放多個image view，Distribution設定fill equally可讓每張圖一樣大，並使用scroll view左右滑動(horizontal)

STEP5：將 stack view 的上下左右間距設為 0。

stack view填滿scroll view，會由stack view的大小決定scroll view的content layout guide(捲動範圍)的大小，此時stack view的大小由裡面的image view決定，而每個image view的大小則由當初圖片的大小決定。

→ 選取stack view & content layout guide，設定上下左右對齊的條件讓 stack view 和 content layout guide的間距為 0。

STEP6：讓圖片的寬高等於螢幕的寬高

設定 image view和Frame Layout Guide為Equal Widths & Equal Heights

當我們設定圖片跟它一樣大時，由於 scroll view 的大小等於螢幕的大小，圖片的大小也將等於螢幕的大小。

STEP7：加入其他圖片進stackView

複製原本imageView來放入圖片，這樣stackView的寬度會自動調整為寬度的n倍。

QuickStep

AutoLayout

App實際操作

分頁水平捲動 (一)填滿螢幕 (二)設定範圍

參考文章

scroll view 決定捲動範圍的 Content Layout Guide

stack view + scroll view 製作分頁 tutorial (懶得寫程式版)