管理controller的超級controller - container view controller - 發生在南天宮和劍潭捷運的Kiss

一般的view controller，管理的是畫面上的view。

然而，在iOS的世界裡，

view controller也有著強弱之分。

超級controller管理的是controller，而不是單單的view。

比方我們常見的tab bar controller，

正是超級controller的代表。

當畫面上有4個tab時，

每個tab顯示的畫面分別由對應的view controller控制。

但tab bar controller控制著這些tab對應的controller，

控制著哪個tab的畫面能夠亮相。

因此最後畫面呈現內容的決定權，

其實掌控在超級controller tab bar controller手上。

在iOS 5，

除了內建的超級controller

我們終於可以創建自己的超級controller。

由於超級controller管理的對象為controller，

所以又被稱為container view controller。

接下來彼得潘將以百吻巴黎楊雅晴的美麗圖片，

為各位示範container view controller的應用。

1.  布置超級controller ContainerViewControllerViewController的畫面。

     此controller的view也將是App的主畫面。

      

     container view controller雖然特別之處在於控制其它controller，

     但它依然是不折不扣的view controller，

     因此它也控制著自己view上的畫面內容。     

     如上圖所示，

     我們於它的view上添加兩個button，

     "台中南天宮"和"劍潭捷運站"，

     只要點選button，

     即可看到發生於其中的浪漫Kiss照片。

  

   

      於畫面上我們另外加入一片浪漫的粉紅色背景，

      將來甜美的Kiss照片，

      將呈現於其中。

      而負責呈現圖片的，

      將是我們待會要創建，
      被ContainerViewControllerViewController管理的controller。 

2.   定義繼承自UIViewController的LeftViewController和RightViewController

    

       他們分別負責"台中南天宮"和"劍潭捷運站"Kiss圖片的呈現。

       說明:
       (1)     self.view.frame = CGRectMake(0, 0, 320, 320);
       
       我們必須設定view的大小和位置，
       此影響到時候Kiss圖片出現的位置和大小。
     
       我們稱ContainerViewControllerViewController為parent view controller，
       而其控制的LeftViewController和RightViewController為child view controller，
       child view controller畫面佔據的位置和大小，
       由其view的frame決定。
       這是因為到時候child view controller的view將被加到parent view controller掌控的view上，
       (parent view controller掌控的view可以是其掌控的任何一個view，
        比方view A的subview，view B。 )

3.   指定ContainerViewControllerViewController管理的controler。

      說明:
      (1).     [self addChildViewController:leftController];
         
           利用addChildViewController: method，將leftController交由ContainerViewControllerViewController物件管理。

     (2).    [contentView addSubview:leftController.view];

   

           child view controller的畫面，能夠出現在parent view controller的畫面。

           其實道理很簡單，

           正是我們最熟悉不過的addSubview:。

           我們將它加在containerView上 (前面建立的紫色畫面)

           將Kiss圖片限制於此區塊內神聖地保護著。

4.  切換顯示的kiss圖片 

    切換顯示的kiss圖片，
    其實也就是切換顯示圖片的child view controller。

    說明:
    (1) RightViewController *leftController = [self.childViewControllers objectAtIndex:0];
          LeftViewController *rightController = [self.childViewControllers objectAtIndex:1];

          利用childViewControllers property，取得管理的child view controller。

    (2)  [self transitionFromViewController:rightController toViewController:leftController duration:2.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:nil completion:nil];

          此method的定義如下

          fromViewController: fromViewController的view將被移除，
          toViewController: toViewController的view將被加入。
          duration: 動畫的時間。
          options: 定義動畫效果
          animations: 定義動畫效果
         completion: 定義切換成功後，執行的程式碼。

         有關動畫部分，
          請記得影響的範圍將是child view controller的view的parent view。
          因此當UIViewAnimationOptionTransitionFlipFromLeft動畫進行時，
          將只在前面建立的contentView內翻轉。


執行結果: