Xcode の UIViewAutoresizing を覚えよう

UIViewAutoresizing を使用すると、親の View のサイズが変わった時に、子の View のサイズや位置を自動的に調整することができます。

Playground で実際の動きを確認してみましょう。

import UIKit
import PlaygroundSupport

let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
let subview = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
subview.center = view.center
subview.backgroundColor = .green
subview.autoresizingMask = [.flexibleWidth]
view.addSubview(subview)

PlaygroundPage.current.liveView = view

100 x 100 の View と、その半分のサイズの View を用意しました。UIViewAutoresizing の指定方法は6つあるので、1つずつ見ていきましょう。

flexibleWidth

親の View の横幅が変わったら、その分、子の View の横幅を調整します。addSubview の前後を以下のように変更してみましょう。

subview.autoresizingMask = [.flexibleWidth]
view.addSubview(subview)
view.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

親 の View の幅が 100 pt 増えたので、子の幅も 100 pt 増えました。

flexibleHeight

親の View の高さが変わったら、その分、子の View の高さを調整します。addSubview の前後を以下のように変更してみましょう。

subview.autoresizingMask = [.flexibleHeight]
view.addSubview(subview)
view.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

親 の View の高さが 100 pt 増えたので、子の高さも 100 pt 増えました。

flexibleLeftMargin

親の View の横幅が変わったら、その分、子の View の左側のマージンを調整します。addSubview の前後を以下のように変更してみましょう。

subview.autoresizingMask = [.flexibleLeftMargin]
view.addSubview(subview)
view.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

親 の View の横幅が 100 pt 増えたので、子の左側に 100 pt のマージンが追加されました。

flexibleRightMargin

親の View の横幅が変わったら、その分、子の View の右側のマージンを調整します。addSubview の前後を以下のように変更してみましょう。

subview.autoresizingMask = [. flexibleRightMargin]
view.addSubview(subview)
view.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

親 の View の横幅が 100 pt 増えたので、子の右側に 100 pt のマージンが追加されました。

flexibleTopMargin

親の View の高さが変わったら、その分、子の View の上側のマージンを調整します。addSubview の前後を以下のように変更してみましょう。

subview.autoresizingMask = [. flexibleTopMargin]
view.addSubview(subview)
view.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

親 の View の高さが 100 pt 増えたので、子の上側に 100 pt のマージンが追加されました。

flexibleBottomMargin

親の View の高さが変わったら、その分、子の View の下側のマージンを調整します。addSubview の前後を以下のように変更してみましょう。

subview.autoresizingMask = [. flexibleBottomMargin]
view.addSubview(subview)
view.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

親 の View の高さが 100 pt 増えたので、子の下側に 100 pt のマージンが追加されました。

複数の組み合わせ

たとえば、親の View の高さが変わった時に、上下に同じ分のマージンを取りたい時は以下のように指定します。

subview.autoresizingMask = [.flexibleTopMargin, .flexibleBottomMargin]
view.addSubview(subview)
view.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

ちなみに全部指定すると、最初の位置(親View の中央)を維持したままサイズだけ変更されます。

subview.autoresizingMask = [.flexibleTopMargin, .flexibleBottomMargin, .flexibleLeftMargin, .flexibleRightMargin, .flexibleWidth, .flexibleHeight]
view.addSubview(subview)
view.frame = CGRect(x: 0, y: 0, width: 200, height: 200)