14
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

親のUIViewにAuto Layoutで上下左右くっつけるextension

Last updated at Posted at 2016-03-08

addSubviewした時に親Viewに対して上下左右くっつけたい

単にaddSubviewするだけだと、端末を回転させたりすると崩れたりする。
なので、親のViewに上下左右くっつけるようなやつが欲しい。

extensionでなんとかしてみた

2019/08/31更新:
iOS9以上だとNSLayoutAnchorを使った方がわかりやすいです。

extension UIView {
    
    func addAndFit(subview:UIView) {

        // Autosizingからの変換を無効にする
        subview.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            subview.leftAnchor.constraint(equalTo: leftAnchor),
            subview.rightAnchor.constraint(equalTo: rightAnchor),
            subview.topAnchor.constraint(equalTo: topAnchor),
            subview.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])
    }
}

ここから以下はiOS9以前の内容です。

extension UIView {

    func addAndFit(subview:UIView) {

        subview.translatesAutoresizingMaskIntoConstraints = false

        addConstraints([
            NSLayoutConstraint(
                item: subview,
                attribute: .left,
                relatedBy: .equal,
                toItem: self,
                attribute: .left,
                multiplier: 1.0,
                constant: 0
            ),
            NSLayoutConstraint(
                item: subview,
                attribute: .top,
                relatedBy: .equal,
                toItem: self,
                attribute: .top,
                multiplier: 1.0,
                constant: 0
            ),
            NSLayoutConstraint(
                item: subview,
                attribute: .right,
                relatedBy: .equal,
                toItem: self,
                attribute: .right,
                multiplier: 1.0,
                constant: 0
            ),
            NSLayoutConstraint(
                item: subview,
                attribute: .bottom,
                relatedBy: .equal,
                toItem: self,
                attribute: .bottom,
                multiplier: 1.0,
                constant: 0
            )]
        )
    }
}

VisualFormatを使うと、より簡単に書けるようです。 ( rizumitaさんよりコメントを頂きました )

extension UIView {

    func addAndFit(subview:UIView) {

        // Autosizingからの変換を無効にする (trueだとAutoLayoutが正常に設定できない)
        subview.translatesAutoresizingMaskIntoConstraints = false
        
        addConstraints(
            NSLayoutConstraint.constraints(
                withVisualFormat: "V:|[subview]|",
                options: .init(rawValue: 0),
                metrics: nil,
                views: ["subview" : subview]
            )
        )
        addConstraints(
            NSLayoutConstraint.constraints(
                withVisualFormat: "H:|[subview]|",
                options: .init(rawValue: 0),
                metrics: nil,
                views: ["subview" : subview]
            )
        )
    }
}

関連記事

Protocol Extensionを使って利用制約をかけつつmapを使ってより短く書く方法が書かれています。
また、コメント欄にもautoresizingMaskからAuto Layoutへの変換で実現するやり方もコメントに書かれています。

14
7
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?