第一次使用Scroll View+Stack View決定捲動範圍就上手

如題,使用Scroll View再配合Stack View製作出一個可以左右滑動的功能。主要利用Auto Layout設定Align,然後利用每個View的內容決定他自身的大小,然後在左右的Scroll View再加一個Scroll View+Stack View實作出一個可以上下滑動的功能。先上個GIF

最後成果是第一張圖片還額外包含了可以上下滑動的功能,簡單說明一下。
首先有個概念,Scroll View裡面有Content Layout Guide和Frame Layout Guide兩個Layout,Content Layout Guide代表整個你能滑動的內容大小,而Frame Layout Guide則是Scroll View本身的大小,所以可以這麼想,Content Layout Guide是我們無法一眼容納的美麗風景,而Frame Layout Guide是我們眼睛可以看到的範圍,所以我們得轉動眼睛或頭來好好欣賞全貌。

由於我們希望顯示整個畫面的大小,所以最外層的Scroll View要先與View設定上下左右的Align為0。

再來決定最外層Content Layout Guide的大小,最外層Content Layout Guide等於最外層Stack View的大小,所以將最外層Stack View與最外層Content Layout Guide設定上下左右的Align為0。

最後最外層Stack View的大小是由裡面的內容Image View決定,所以內容排列好後,重點在於水平的話要設定與最外層Frame Layout Guide高度等高,垂直的話要設定與最外層Frame Layout Guide寬度等寬。

至於內層的Scroll View+Stack View也是一樣的規則,只差在內層的Scroll View大小已經設定好了。

以上大概這樣,有錯請糾正Thx
下面有超詳細的解說,歡迎參閱

參考文章

--

--