iOSアプリ開発：「Auto Layout」と「制約」

iOS iOSアプリ開発 swift iOS app swift4.2

前回は制約（constraint）についてあまり説明せずに使用していました。

今回は制約関連の説明を行いたいと思います。

Anchor

Anchorとは船のイカリや固定する動作を表す英語です。 UIViewは水平垂直方向の位置や長さについてのAnchorを持っており、Anchorに制約を与えることにより固定することが出来ます。

例えば、あるビューの右端Anchorと左端Anchorを別のビュー基準で制約を与えれば、基準のビューが水平方向に動いたりサイズが変わった場合にもそれに合わせて伸び縮みしてくれるようになります。

また、伸び縮みして欲しくなく、いつでも同じ長さで、左端から決まった位置に配置したいような場合は、左端Anchorと水平方向の長さAnchorに制約を与えることで実現できます。

以下にAnchorの種類を並べます。

Anchorの種類

  • 垂直方向の位置についてのAnchor
メンバ名 タイプ 説明
topAnchor NSLayoutYAxisAnchor Viewの上端を表すAnchorです
centerYAnchor NSLayoutYAxisAnchor Viewの垂直方向中心を表すAnchorです
bottomAnchor NSLayoutYAxisAnchor Viewの下端を表すAnchorです
firstBaselineAnchor NSLayoutYAxisAnchor View内テキストの上端を表すAnchorです
lastBaselineAnchor NSLayoutYAxisAnchor View内テキストの下端を表すAnchorです
  • 水平方向の位置についてのAnchor
メンバ名 タイプ 説明
leadingAnchor NSLayoutXAxisAnchor Viewのリーディング端（左端）を表すAnchorです
centerXAnchor NSLayoutXAxisAnchor Viewの水平方向中心を表すAnchorです
trailingAnchor NSLayoutXAxisAnchor Viewのトレイリング端（右端）を表すAnchorです
leftAnchor NSLayoutXAxisAnchor Viewの左端を表すAnchorです
rightAnchor NSLayoutXAxisAnchor Viewの右端を表すAnchorです
  • 長さについてのAnchor
メンバ名 タイプ 説明
heightAnchor NSLayoutDimension 高さを表すAnchorです
widthAnchor NSLayoutDimension 幅を表すAnchorです

constraint

Anchorは制約を与えるためのメソッドを持っています。 Anchorのタイプ毎に行くつかのメソッドを持っていますので代表的なものを説明します。

constraintの種類

// 他のAnchor（equalTo）を基準にオフセット（constant）を足した位置に固定する制約です。
// NSLayoutXAxisAnchor, NSLayoutYAxisAnchorで使用します。
func constraint(equalTo: NSLayoutAnchor<AnchorType>, constant: CGFloat) -> NSLayoutConstraint

// サイズを固定する制約です。
// NSLayoutDimensionで使用します。
func constraint(equalToConstant: CGFloat) -> NSLayoutConstraint

他にも色々なメソッドがありますので興味のある人は調べてみましょう。 https://developer.apple.com/documentation/uikit/view_layout