利用 scroll view 的 Frame Layout Guide 設計浮動元件
捲動的 scroll view 有兩種 layout guide， Content Layout Guide & Frame Layout Guide， Content Layout Guide 搭配 auto layout 條件可決定 scroll view 捲動的範圍。
那麼 Frame Layout Guide 呢 ? 天生我材必有用，它代表 scroll view 本身 frame 的框框，從下圖我們可以更清楚看出 Frame Layout Guide & Content Layout Guide 的差異，Frame Layout Guide是比較小的黑色框框，Content Layout Guide的黃色框框則包含了整個捲動的內容。
透過 Frame Layout Guide搭配 auto layout 條件可實現特別的浮動元件效果，比方以下兩個例子:
- 讓 scroll view 裡的元件固定在某個位置。
- 讓元件一開始隨著畫面捲動，之後再卡在畫面的頂部。
接下來就讓我們親自實驗看看這兩種效果吧，假設我們已經利用 scroll view & stack view 實現上下捲動的頁面。
相關說明可參考以下連結。
ps: 以下操作需搭配 Xcode 11 以上版本，因為 Xcode 11 才能在 Interface Builder 設定 frame layout guide，不過如果從程式設定則可使用舊版的 Xcode。
不管怎麼捲動，依然屹立不搖的彼得潘
如下圖所示，我們希望不管 scroll view 如何捲動，彼得潘都能停留在畫面內固定不動。
- 將希望固定不動的 peter 圖片連到 frame layout guide。
- 選擇 Bottom Space to Frame Layout Guide & Center Horizontally in Frame Layout Guide。
frame layout guide 代表 scroll view 本身 frame 的框框，因此以下兩個條件將實現以下效果:
(1) 圖片水平置中於 scroll view 內。
(2) 圖片的底部跟 scroll view 的底部有固定的間距。
- 修改圖片和 frame layout guide 底部的間距，將它設為 50 points。
先隨著畫面捲動，之後卡在畫面頂部的彼得潘
我們希望 scroll view 一開始捲動時，彼得潘先隨著畫面捲動，但之後會卡在畫面頂部，別離開我們的視線。
- 將 peter 圖片連到 frame layout guide。
- 選擇 Top Space to Frame Layout Guide & Center Horizontally in Frame Layout Guide。
讓圖片水平置中於 scroll view 內， 圖片的頂部跟 scroll view 的頂部有固定的間距。
- 讓圖片和 frame layout guide 的頂部保持至少 30 points 的安全距離。
修改圖片和 frame layout guide 頂部的間距，將間距設為 30 points，Relation 設為 ≥，讓圖片捲動到一定程度時仍能保持卡在畫面頂部，距離頂部 30 points。
- 設定圖片和 content layout guide 的間距，控制它在捲動範圍內的位置。
選取圖片和 content layout guide，設定圖片和 content layout guide 上方的間距為 500 points。
加了剛剛的條件後，當我們捲動 scroll view 時，圖片也會乖乖地跟著捲動。但別忘了圖片和 frame layout guide 的上方有著至少要保持 30 points 的約定，因此當我們捲動到圖片和 scroll view 頂部即將小於 30 points 距離時，此兩個條件將產生衝突。
我們已經心有所屬，希望圖片維持和 scroll view 頂部至少 30 points 的間距，因此該犧牲誰很明顯了，我們必須將圖片和 content layout guide 上方間距條件的 priority 設為 999，在衝突發生時犧牲它。
