#15 應用 Figma 圖片配合 Stack view 與 Scroll view 製作分頁

Netflix 算是當下最熱門的影視軟體之一，他旗下擁有非常大量的 Video，所以在他的 APP 中需要有大量的滾動畫面功能。這裡應用在 Figma 中找到的 Netflix 模板，製作能夠讓 Stack View 搭配 Scroll View 的滾動畫面，並且練習相關的 Autolayout 功能。

測試 iphone 8 plus

測試 iphone 13 mini

首先在 Figma 網站中建立帳號，請參考

從 Figma 設計圖練習 Auto Layout

搜尋關鍵字 “Netflix” 出現了很多 template，選取其中一個

選一個比較可愛的模板

點選想複製的圖案，參考右邊相關係數就是在 storyboard 上要建立的數值

因為這是一個往下滑動的部分，所以在 storyboard 上建立 stack view 與 scroll view 的組合

建立 Scroll View

先放入一個 Scroll View，並且在 Figma 上查詢相關位置與大小

選取 Scroll View

放入 View Controller 中

找到 Scroll View 的大小

在 Scroll View 裡加入 Image View，並且把他包在 Stack View 裡，並設定好相關大小及位置，並且以 Autolayout 先限制大小。

加入新的 Image View

把 Image View 放入 Scroll View 中

把 Image View 包入 Stack View 中

設定 Stack (Image) View 大小

設定 Stack View 為橫向包裹，複製另外兩個 Image View，並且設定間距，並指定 Stack View 與 Scroll View 的距離。

水平部署 Image View 在 Stack View 中的排序

增加三個 Image View

設定每個 Image View 的間距為 17.5

設定 Scroll View 與 View Controller 的距離 (Safe Area)

接著複製這個包裹三個 Image View 的 Stack View 在 Scroll View 中

複製你想要的 Stack View 數量

把這些 Stack View 全部包裹成一個 Stack View

把這些 Stack View 再統一包成一個 Stack View

設定好間距，他們就會乖乖排列整齊了

他們會自動把距離排好

最後設定這個大的 Stack View 與 Scroll View 上 Content Layout Guide 的 上下左右貼齊，並且與 Frame Layout Guide 的左右貼齊。

設定 Stack View 與 Content Layout Guide 的上下左右貼齊

設定 Stack View 與 Frame Layout Guide 的左右貼齊

把兩個 Image View 加上顏色，測試成功

測試可以滑動之後，就可以幫每一個 Image View 標注上相關的 Image 了

上排相關 Button 與 Label 也依序裝上，並且左邊的設定「上」與「左」的 Autolayout；中間的設定「上」與「水平置中」；右邊的設定「上」與「右」的 Autolayout。當然每個物件都要設定大小。

左邊的物件設定「上」與「左」的 Autolayout

中間的物件設定「上」與「水平對齊」的 Autolayout

右邊的物件設定「上」與「右」的 Autolayout

最下面的 Tab Bar Controller 裝上去，並且把畫面底色改成黑色之後，就大功告成了。

後記

其實覺得 Figma 的功能沒有 Sketch 與 Zeplin 搭配好用

1. 抓下來的圖不是很清楚

本尊

複製結果（撇開那個小紅點，中間還是不知怎地細節都不見了）

2. 跟 Zeplin 不一樣，沒辦法抓三種不同規格的 png 檔

各圖案只有一個規格

3. 邏輯不精確，連 -2 這種座標都跑出來了

-2 是要怎樣設定？！

參考資料

從 Figma 設計圖練習 Auto Layout

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

#129 從 Figma Community 練習實作 App 畫面

輸出 Figma 設計的 iOS App 圖片

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

Github

GitHub - Jerry301/Homework015-ScrollingView