iOS  Extra Viewsを使ってみる

# テーマ
Extra Viewsを使ってみます。

# Extra Viewsとはなんぞや？ 
Storyboard上にViewを配置しても、addSubviewされるまでは
画面に表示されない機能です。

今までXibやソースコードで動的にViewを配置していたものを
StoryBoard上で実現できるみたいです。

ContainerViewと似ていますが、
ContainerViewはviewDidLoad時に画面に表示されますが、
Extra Viewは画面上に表示されません。

インスタンスは、存在するようなので、(nilではない。）
hidden = trueに近い状態かもしれません。

# 参考 (Apple Doc)
https://developer.apple.com/library/tvos/recipes/xcode_help-IB_storyboard/Chapters/AddViewsToDock.html

# 実装手順
1. StoryBoard上のViewControllerに適当にViewを配置します。
2. 先ほど配置したViewをExtra Views扱いにします。
3. 任意のタイミングでaddSubViewします。

それでは、やってみます。

# 1. StoryBoard上のViewControllerに適当にViewを配置します。

<img width="352" alt="スクリーンショット 2015-12-18 21.21.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/71694/53126e84-e34a-8202-c68b-878a33ff971d.png">

# 2. 先ほど配置したViewをExtra Views扱いにします。
対象のViewをドラッグします。

<img width="370" alt="スクリーンショット 2015-12-18 21.18.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/71694/6a55205d-9774-0a79-f52f-3933e29d76a3.png">

ドラッグすると、下記のような表示に変わります。

<img width="415" alt="スクリーンショット 2015-12-18 21.18.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/71694/55fb6872-bafc-e111-b725-abf558afda35.png">

# 3. 任意のタイミングでaddSubViewします。

```
self.view.addSubview(myView)
```

ボタンを押下すると、Viewを表示するようにしてみます。
（ちょー適当です。）

```
import UIKit

class ViewController: UIViewController {

    @IBOutlet var myView: UIView!
    var isShowView = false
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func didSelectButton(sender: UIButton) {
        
        isShowView ? showView() : hideView()
        isShowView = !isShowView
    }
    
    private func showView() {

        UIView.animateWithDuration(0.5, animations: {[weak self] () -> Void in
            
                if let weakSelf = self {
                    weakSelf.myView.transform = CGAffineTransformMakeScale(0.5, 0.5);
                    weakSelf.myView.alpha = 0;
                }
            
            }, completion: {[weak self] (complated) -> Void in
                
                if let weakSelf = self {
                    weakSelf.view.subviews.last?.removeFromSuperview()
                }
        })

    }
    
    private func hideView() {
        myView.center = self.view.center
        self.view.addSubview(myView)
        
        UIView.animateWithDuration(0.5, animations: {[weak self] () -> Void in
            
            if let weakSelf = self {
                weakSelf.myView.alpha = 1
                weakSelf.myView.transform = CGAffineTransformMakeScale(1.5, 1.5);
            }
        })
    }
}
```

# 検証してみます。

![sample.gif](https://qiita-image-store.s3.amazonaws.com/0/71694/1fbb4b16-7c26-6bea-cc7a-125565ae2ae9.gif)

# おまけ
複数のViewもExtra Viewsとして扱えます。
各々、使いたいタイミングで、addSubViewするだけです。

ViewController側を選択すると、Extra Viewsを閉じます。

<img width="365" alt="スクリーンショット 2015-12-18 21.52.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/71694/ec3785bb-0438-4193-4e6c-8e1de0590f23.png">

ナビゲーションバーのスタイリングもできます。

<img width="358" alt="スクリーンショット 2015-12-18 21.58.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/71694/24a45686-fa12-3202-1a7e-e94879e9fa4b.png">

```
self.navigationItem.titleView = ナビゲーションバーのインスタンス
```

ジェスチャー等をつけると、ナビゲーションバーアイテムのイベント処理も出来ます。

# まとめ
レイアウト周りは、可能な限りStoryBoard+AutoLayoutで完結させたいですね。
hiddenにしたほうが、Viewの配置が楽そうな気がしますが、、、

誤りやもっとこうすべきだ！というご意見をお待ちしております。