iOS平滑移動切換 ViewController，使用 Storyboard、ScrollView、Container View、AutoLayout

這次要介紹一個讓 ViewController 之間像平滑移動相片的方式來切換顯示的方法

首先、先建立一個空白的專案，使用 SingleViewProject

1.建立專案

2.為了方便，將原本的  ViewController 改名為 ScrollViewController

3.再來建立三個空白的 UIViewController 的 class。分別為 FirstViewController、SecondViewController、ThirdViewController，準備等等使用

4.轉到 Main.storyboard，將初始的 UIViewController 設定 class 為 ScrollViewController，並加上三個 UIViewController 並把背景改變，方便辨識

5.把剛剛建立的 class 和 UIViewController 做設定

6.回到 ScrollViewController，將最初始的 UIView 元件取名為 vRoot

7.再 vRoot 底下放置一個 UIScrollVIew 並將 autolayout contrain 設定 top,leading,trailing,bottom 和 vRoot 關係設為 0，再把 UIScrollView 改名為 scvMain

8.再來放置三個 container view 元件至 scvMain 之內。分別取名為 cvFirst、cvSecond、cvThird

9.再來重點就是設定這三個 container view 的 constrain，因為有點複雜又不是太複雜，但是先把一先概念說清楚。因為這邊要水平的移動切換，所以會這樣設，如果要其他方式，就照同樣概念去變化設定，以下的設定是以水平移動切換並從 cvFirst 開始為設定

1.首先共同條件就是全部都個別 Equal Width 和 Equal Height with scvMain。(或者要 cvFirst 和 scvMain Equal 而 cvSecond 和 cvThird 和  cvFirst Equal，反正就是這幾個都要 Equal Width 和 Equal Height，需要另外客製化是可以調整的!)

2.因為要從 cvFirst 開始並滑到 cvThird 結束，所以設定上會將 cvFirst 和 scvMain 做左上角的對齊，cvThird 和 scvMain 做右下角的對齊。(這樣設定其實就是在設定 scrollview 的 contentSize 屬性)

3.中間的部分 cvSecond 會設定 Leading 對應  cvFirst 的 Trailing，讓  cvSecond 接在 cvFirst 之後，而 cvThird 的 Leading 就對應 cvSecond 的 Trailing

4.cvSecond 和 cvThird 的 Top 屬性就設定跟著 cvFirst 或 scvMain 就可以了

5.總結

cvFist 要設定 Leading(to scvMain)、Top(to scvMain)、Equal Width(to scvMain)、Equal Height(to scvMain)。

cvSecond 要設定：Leading(to cvFirst)、Top(to scvMain or cvFirst)、Equal Width(to scvMaincvFirst)、Equal Height(to scvMain or cvFirst)

cvThird 要設定：Leading(to cvSecond)、Top(to scvMaincvFirst)、Equal Width(to scvMain or cvFirst)、Equal Height(to scvMain or cvFirst)、Trailing(to scvMain)、Bottom(to scvMain)

這邊設定值都是 0，只要對應參考的對象正確，就沒問題
設定的位置可以參考這張圖。像圖上淺藍色區域表示

10.把 cvFirst、cvSecond、cvThird 拉 Segue 到對應的 ViewController，並且 Segue 型態選擇 embed

11.後將 scvMain 的 Paging 設定 Enable。就大功告成啦！！！

12.在模擬器上開啟

13.把一些事件 log 出來可以看到

以上，對原始碼有興趣的可以在這找到 github