利用多個 container view 切換頁面

我們時常在 iOS App 上見到如下圖 App Store 的畫面設計，點選 segment control 可切換顯示不同的頁面。

有很多方法可實現這樣的畫面，接下來我們將示範其中一種方法，利用多個 view controller 負責每個 segment 對應的頁面，然後搭配多個 container view 控制 view controller 畫面的顯示和隱藏。

加入切換分頁的 segment control

分別顯示可愛小貓的一號表情，二號表情和三號表情。

加入 container view 和連結的 view controller

我們需要三個 container view 對應小貓的三個分頁，首先我們加入第一個 container view。

設定 container view 上下左右的間距為 0，讓它佔滿 segment control 下方的空間。(ps: 不包含 Safe Area 之外的空間)

當我們將 container view 拖曳到畫面上時，它會自動連結 segue 到一個新長出的 view controller，此 controller 的 view 即為它顯示的畫面。

因此我們將 image view 加到 view controller 上，將它設為小貓表情一號的圖片，然後設定上下左右的間距為 0，讓圖片佔滿 controller 的畫面。

接著我們點選左邊清單裡的 Container View，按下 cmd + c & cmd + v 複製貼上，生出第二個 container view。

第二個 container view 必須和第一個 container view 重疊，位置大小一樣，到時候切換頁面時，只是調整它們的 isHidden 控制是否顯示。

因此我們將兩個 container view 同時選取，然後利用 Alignment Constraints 設定它們的上下左右對齊，讓它們的位置大小一模一樣。

不過此時複製生成的 container view 並沒有連到任何的 view controller，因此我們要再進行以下步驟:

• 複製小貓表情一號的 view controller，將它的 image view 設為小貓表情二號的圖片。
• 從第二個 container view 連結 segue 到小貓表情二號的 view controller。

選擇 Embed。

重覆剛剛的步驟，加入顯示小貓表情三號的 container view & view controller。

查詢 container view 對應的 controller 畫面

現在我們已經成功加入三個 container view，分別顯示三個超可愛的小貓表情。但是這時候 App 啟動後，會顯示哪一個呢 ?

由左邊 container view 的階層排序，我們知道最下方的 container view 將是我們看到的畫面，因為它會覆蓋其它兩個 container view，但是它是對應哪一個 view controller 呢 ?

很簡單，只要切換到 container view 的 Connections inspector 頁面，將滑鼠移到連線身上，即可看到它連結的 controller 被標示出來，比方從下圖我們看出最下方的 container view 對應到小貓表情三號。

以同樣的方法觀察，我們可看出左邊列表的 contaienr view 由上而下分別對應小貓表情一號，二號和三號，因此先顯示的會是三號，但是我們希望先顯示一號呀 !

別擔心，接下來我們將從程式控制 container view 的顯示和隱藏。

利用 outlet collection 連結三個 container view

class ViewController: UIViewController {

   @IBOutlet var containerViews: [UIView]!

三個 container view 和 array containerViews 之間的對應關係可參考下圖，因此 containerViews[0] 代表小貓表情一號，containerViews[1] 是二號，containerViews[2] 是三號。

將畫面上多個元件變成 array 的 outlet collection

一開始先顯示小貓表情一號

在 viewDidLoad 裡設定 containerViews[0].isHidden = false，然後將其它 container view 的 isHidden 設為 true，讓小貓表情一號成為一開始顯示的主角。

override func viewDidLoad() {
    super.viewDidLoad()
    containerViews[0].isHidden = false
    containerViews[1].isHidden = true
    containerViews[2].isHidden = true
}

如果懶得寫程式，也可以從 storyboard 將小貓表情二號 & 三號的 container view 的 Hidden 勾選。

利用 segment control 的 action 切換 container view

將所有的 container view 隱藏，然後將要顯示的 container view 的 isHidden 設為 false。

@IBAction func changeCat(_ sender: UISegmentedControl) {
   for containerView in containerViews {
      containerView.isHidden = true 
   }
   containerViews[sender.selectedSegmentIndex].isHidden = false
}

若想讓程式更精簡，也可採用 ForEach 讓所有的 container view 隱藏。

@IBAction func changeCat(_ sender: UISegmentedControl) {
    containerViews.forEach {
       $0.isHidden = true 
    }
    containerViews[sender.selectedSegmentIndex].isHidden = false
}

大功告成 ! 學會運用多個 container view 切換頁面的原理後，只要短短幾行程式即可切換顯示療癒的小貓表情。

ps: 剛剛由於三個分頁的畫面類似，因此我們直接複製 view controller。實際開發 App 時，可能每個分頁是完全不同的畫面，甚至有的是顯示列表，container view 要連到 table view controller。

範例

AppPeterPan/ContainerViewDemo