コードで作るAuto Layoutまとめ
本記事では、Auto Layoutをコードで扱う書き方をまとめます。
前提
コードによるAuto Layoutを行う前に必ずしなければならないことが2つあります。
addSubviewtranslatesAutoresizingMaskIntoConstraintsをfalseにする
Auto Layoutでは、部品同士は共通の祖先を持っている必要があるため、制約を付けるのはaddSubviewの後でなければなりません。addSubviewより前に制約を付けようとすると実行時にエラーが発生します。
また、コードからUI部品を生成するとデフォルトでtranslatesAutoresizingMaskIntoConstraintsがtrueになってしまいます。このプロパティは、AutoresizingMaskをAuto Layoutの制約に置き換えるかどうか指定する値で、trueのままだと意図しない制約がついてしまします。
制約の記述方法
制約の記述方法には、以下の3つがあります。
- NSLayoutConstraint
- NSLayoutAnchor（推奨）
- Visual Format Language
NSLayoutConstraint
NSLayoutConstraintは、2つのUI部品の関係を示すクラスです。幅が100pt, 高さが幅の2倍であるUIViewを親viewの中央に配置する制約は、次のように書くことができます。
NSLayoutAnchor（推奨）
NSLayoutAnchorは、NSLayoutConstraintよりも簡単にレイアウトの制約を生成することができるクラスです。先ほどと同じ制約をNSLayoutAnchorで記述すると次のようになります。
コードの記述量がNSLayoutConstraintと比べて圧倒的に少ないので可読性も高く、Appleによる公式ドキュメントでもNSLayoutAnchorの利用が推奨されています。
Visual Format Language
Visual Format Language（通称VFL）は、アスキーアートのように制約を定義することができる記法です。幅100pt, 高さ200ptであるUIViewの制約は以下のように書くことができます（viewに対する中央寄せはNSLayoutConstraintで記述）。
VFLは複数の制約を1行で記述することができますが、以下のようなデメリットがあります。
- 学習コストが高い
- リテラルな箇所が多く、タイプミスによる実行時エラーが起きやすい
- いくつかの制約（e.x. アスペクト比）を使用できない
制約のactivate
制約は定義したのちに、activateする必要があります。activate方法は次の2つがあります。
- 1つずつactivateする
- まとめてactivateする
NSLayoutConstraintとNSLayoutAnchorのサンプルコードでは、毎回isActiveプロパティをtrueにしているように、 1つずつactivateする方法を用いています。この書き方は可読性が高いですが、大量の制約をつける場合には少し手間がかかります。複数の制約がある場合は、VFLのサンプルコードのようにまとめてactivateすると良いです。
まとめ
幅が100pt, 高さが幅の2倍であるUIViewをsuperviewの中央に配置するAuto Layoutをコードで実装する場合には、NSLayoutAnchorを用いて次のように記述することをおすすめします。
