はじめに

よくわかるAuto Layout iOSレスポンシブデザインをマスターを参考に、AutoLayoutで学んだことを記事にしていきたいと思います。今回はケースからAutolayoutを学んでいきたいと思います。

ケース1 同一幅のオブジェクトを並べるケース

以下のように、Buttonを3つ均一に並べる

大まかな手順

１. ContainerViewの配置
２. Buttonを3つ配置
３. 制約を追加

Buttonをグループ化するために親となるContainerView(UIView)を作成し、入れ子にする。

制約について

水平方向

ContainerView

１. ContainerView.leading = leading
２. trailing = ContainerView.trailing

Button

３. Button1.leading = leading + 5
４. Button2.leading = Button1.trailing + 5
５. trailing = Button3.trailing + 5
６. Button3.leading = Button2.trailing + 5
７. Button2.width = Button1.width
８. Button3.width = Button1.width

ContainerViewは画面幅に固定してあり(1, 2)幅は決定しているので3つのボタンの幅を等しくし(7, 8)、水平方向の制約をつけることで(3~6)、Buttonの幅が決定する

垂直方向

ContainerView

１. ContainerView.centerY = centerY

Button

２. Button1.top = top
３. bottom = Button1.bottom
４. Button2.centerY = centerY
５. Button3.centerY = centerY

垂直方向の制約はこれだけで良い。なぜならButtonの高さ（幅）はテキストとFontによって決定されるからである。よって2, 3の制約によって自然と親のContainerViewの高さも決定する。1. によって垂直方向の制約は画面の中央に設定されているのでここで垂直方向の制約が決定する。ContainerViewの高さが決定しているので(4, 5)によってButton2, Button3の高さも決定する。
これが見落としがちで高さの制約を余分に追加してしまうケースが多い。余分な制約はバグの温床となる。意図的にButtonの高さを決定したい場合はContainerViewの高さを決定すれば変更できる。

制約の全体像

ケース2 等間隔で並ぶオブジェクト

以下のように、Buttonを3つ均一に並べ、等間隔に配置する

大まかな手順

１. ContainerViewの配置
２. Buttonを3つ配置
３. 間隔のために用いるViewの配置
４. 制約を追加

一つ目と手順は大まか同じだが、今回は等間隔に配置するためのViewを用意する。(Space1, Space2)

制約について

水平方向

ContainerView

１. ContainerView.leading = leading
２. trailing = ContainerView.trailing

Button

３. Button1.leading = leading + 5
４. Space1.leading = Button1.trailing
５. Button2.leading = Space1.trailing
６. Space2.leading = Button2.trailing
７. Button3.leading = Space2.trailing
８. trailing = Button3.trailing + 5
９. Space2.width = Space1.width
１０. Button2.width = Button1.width
１１. Button3.width = Button1.width

ケース1とほとんど同じだが今回は、4~7の制約によってButtonの間の幅はSpace1とSpace2の幅にしている。これに加えて9の制約でSpace1とSpace2を同じ幅にすることによって等間隔な幅が計算されて水平方向の幅が決定する。

垂直方向

ContainerView

１. ContainerView.centerY = centerY

Button

２. Button1.top = top
３. bottom = Button1.bottom
４. Button2.centerY = centerY
５. Button3.centerY = centerY
６. Space1.centerY = Button1.centerY
７. Space2.centerY = Button1.centerY
８. Space1.height = 1
９. Space2.height = 1

垂直方向の制約はケース1とほとんど同じである。異なる部分は7~9によってSpaceの垂直方向の制約を決定しているところである。
Space1とSpace2は間隔を決定するためだけのViewなので色は透明色を設定する。しかし、透明色を設定する場合は、透過処理が入り描画パフォーマンスは落ちるため、背景色が決まってる場合は背景色を設定したほうが良い。

制約の全体像