scroll view 決定捲動範圍的 Content Layout Guide
使用 scroll view 設計捲動畫面時，我們可以利用 Content Layout Guide 決定它的捲動範圍，接下來就讓我們一步步認識 Content Layout Guide 的特異功能吧。
Xcode 11 的 Content Layout guide
從 Xcode 11 開始，scroll view 預設勾選 Content Layout Guides，因此 scroll view 底下將出現 Content Layout Guide & Frame Layout Guide。
如果取消 Size inspector 下 Content Layout Guides 的勾選，scroll view 底下將不再長出 Content and Frame Layout guide。
ps: frame layout guide 代表 scroll view 本身 frame 的框框，有興趣的朋友可參考以下連結。
決定 scroll view 捲動內容大小的 content size
scroll view 能夠上下左右捲動，其實和它的另一個大小，容納的內容的尺寸有關。scroll view 本身的大小由 frame 決定，但內容的大小則由 content size 決定。
比方以下的例子，scroll view 本身的大小只能容納一張圖片，但它可以水平捲動，往左捲動後能看到右邊的圖片，關鍵正來自它的 content size。它的 content size 的寬度等於三張圖片加起來的寬度，所以可以容納三張圖。因此 scroll view 要能捲動有個重要的條件，它的 content size 必須大於 frame 大小，如此它才會覺得可以捲動。當 content size 的寬度大於 frame 的寬度時將可左右捲動，當 content size 的高度大於 frame 的高度時則可上下捲動。
決定 content size 的 content layout guide
content layout guide 將決定 content size 的大小。我們可以把 content layout guide 想成一個虛擬的框框，它的大小將決定 content size 的大小。
讓我們在 scroll view 裡加一張美麗的小王子圖片說明。
- 加入 scroll view，設定上下左右的間距為 0。
加了條件後，馬上產生可怕的紅色錯誤。
scrollable content size ambiguity 表示 scroll view 覺得頭很大，因為他不知道 content size 的大小，不知如何捲動。沒關係，請給我一首歌的時間，再等一下我們就能修正這個問題。
- 在 scroll view 加入顯示可愛小王子的 image view。
- 設定圖片的寬高條件。
我們希望顯示大大的小王子，在 scroll view 裡捲動欣賞小王子的每一寸肌膚，因此我們將它的寬高設為 1440 & 1920。
- 設定圖片和 content layout guide 之間零距離，彼此間距 0
關鍵的一步來了。現在請選取圖片 & content layout guide(可按住 cmd 鍵多選)，然後設定上下左右對齊的條件讓圖片和 content layout guide 的間距為 0。
大功告成 ! 現在紅色錯誤消失了，而且我們在 Interface Builder 裡就可以捲動 scroll view 呢。(ps: 要記得點選 scroll view 裡的東西才能捲動)
為什麼加了圖片和 content layout guide 間距 0 的條件後，就能決定 content size 呢 ? content layout guide 決定 content size 大小的原理跟 subView 的 constraint 決定 superView 大小的原理類似，都是由裡面東西的條件決定包含它的容器的大小。
如下圖所示 ，subView 的 constraint 可決定 superView 的大小，比方 peter 長度 100，左右間距 10，那麼藍色 superView 的寬度將為 120。
我們可以把 content layout guide 當成容納 scroll view 內容的容器，它的大小將決定捲動的範圍。當我們設定 scroll view 裡元件的條件時，將可決定 content layout guide 的大小。比方剛剛例子的圖片寬高為 1440 * 1920，而我們又指定圖片和 content layout guide 的間距為 0，因此 content layout guide 的大小將剛好為 1440 * 1920。
如下圖所示，點選 content layout guide 後，可從 Size inspector 查詢她的大小。
讓我們再看個例子 。若圖片和 content layout guide 的間距為 50，content layout guide 的大小將成為 1540 * 2020，因為 1440 + 50 * 2 等於 1540，1920 + 50 * 2 等於 2020。
如下圖所示，此時圖片和邊界將有著 50 的間距。
搭配 stack view
了解 content layout guide 的原理後，我們可以做一些比複雜的排版，比方在 scroll view 加入 stack view，利用 stack view 容納呈現的內容，然後設定 stack view & content layout guide 的間距，讓 content size 等於 stack view 的大小。
如下圖所示，stack view 裡裝了兩個圖片，透過 scroll view 我們可以水平捲動瀏覽圖片。
有興趣的朋友可參考以下連結，介紹如何利用 stack view + scroll view 製作分頁 tutorial。
