#13 stack view + scroll view 製作分頁 tutorial (懶得寫程式版)-三麗鷗肖像

scroll view的滑動功能搭配stack view ,在製作畫面水平或垂直滑動變的便利許多,這次以三麗鷗肖像介紹實作。

實作成果如下

各個分頁的auto layout設定,1.scroll view 大小要設和view 一樣,設定上下左右對齊。2.先加 1 個 image view,Content Mode 設為 Aspect Fill 或 scale fill。3. image view embed in stack view,image view加入stack view。4.image view加入圖片。5.scroll view的Axis 設為 Horizontal,Alignment 設為 Fill,Distribution 設為 Fill Equally, Spacing 設為 0,這個步驟的設定設錯會出現水平滑動顯示異常。6.設stack view 與content layout guide 上下左右間距是0。7.把image view 大小設定跟view 一樣大,設定 image view 和flame layout guide Equal Widths & Equal Heights,圖片大小等於螢幕大小。8.加入其他圖片。9.勾選 scroll view 的 Paging Enabled讓滑動剛好是一頁。

這個練習可熟習scroll view, stack view ,auto layout,的用法,此功能可應用在選單,分項說明等。auto layout 如下

stack view 設定完成後就可滑動檢視有無錯誤,製作重點還是要注意auto layout, content layout guide , frame layout guide 的設定。

gitHub

--

--