Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

iOS Extra Viewsを使ってみる

More than 5 years have passed since last update.

テーマ

Extra Viewsを使ってみます。

Extra Viewsとはなんぞや?

Storyboard上にViewを配置しても、addSubviewされるまでは
画面に表示されない機能です。

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

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

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

参考 (Apple Doc)

実装手順

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

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

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

スクリーンショット 2015-12-18 21.21.05.png

2. 先ほど配置したViewをExtra Views扱いにします。

対象のViewをドラッグします。

スクリーンショット 2015-12-18 21.18.43.png

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

スクリーンショット 2015-12-18 21.18.56.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

おまけ

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

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

スクリーンショット 2015-12-18 21.52.39.png

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

スクリーンショット 2015-12-18 21.58.53.png

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

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

まとめ

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away