SwiftでのNSLayoutConstraintの使い方！初心者向け12選の方法

はじめに

あなたは、Swiftでアプリを開発する際に、UIの配置に悩んだことはありませんか？

デザインが複雑になるにつれ、UI要素を自由に配置するのは難しくなります。

しかし、Swiftの「NSLayoutConstraint」をマスターすれば、そんな悩みは解消できます。

この記事を読めば、初心者から中級者までの方がSwiftでのNSLayoutConstraintの使い方をマスターできるでしょう。

徹底的に基礎から応用までを解説していきます。

●NSLayoutConstraintとは

NSLayoutConstraintは、Appleが提供するAuto LayoutのAPIの一部であり、ユーザインターフェースの各要素間の関係を定義することができます。

これにより、さまざまなデバイスや画面サイズでの動作を柔軟にカスタマイズできます。

従来のフレームワークでは、ピクセル単位での絶対的な位置を指定する必要がありましたが、NSLayoutConstraintを使用することで、ビュー同士の相対的な位置関係や大きさを簡単に設定することができます。

これにより、異なる画面サイズやデバイス間での表示を一貫して維持することが容易になりました。

○NSLayoutConstraintの基本

NSLayoutConstraintは、基本的には次の4つの要素から成り立っています。

1. item：制約を追加するオブジェクト (例：ボタンやラベル)
2. attribute：オブジェクトのどの部分に制約を追加するか (例：左端や上端)
3. relation：制約の関係性 (例：等しい、以上、以下)
4. constant：制約の値 (例：20ピクセル右に配置)

これらを組み合わせることで、ビューの位置や大きさを自由に指定することができます。

この基本の理解をもとに、具体的な使い方やサンプルコードを見ていきましょう。

●NSLayoutConstraintの使い方

NSLayoutConstraintを本当に解放するためには、それをどのように使用するかを理解することが不可欠です。

実際にコードでどのように機能するのかを見てみましょう。

○サンプルコード1：基本的なビューの制約設定

このコードではUILabelを使ってテキストを表示するコードを紹介しています。

この例ではUILabelを中央に配置しています。

let label = UILabel()
label.text = "こんにちは、Swift!"
label.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(label)

let horizontalConstraint = NSLayoutConstraint(item: label, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0)
let verticalConstraint = NSLayoutConstraint(item: label, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerY, multiplier: 1, constant: 0)

NSLayoutConstraint.activate([horizontalConstraint, verticalConstraint])

このコードは、ラベルをビューの中央に配置します。

translatesAutoresizingMaskIntoConstraintsプロパティをfalseに設定することで、Auto Layoutが正しく動作するようになります。

そして、ラベルの中央が親ビューの中央と一致するように制約を追加します。

○サンプルコード2：ビュー間の制約設定

このコードではUIButtonとUILabelを使って、ボタンとラベルの間に間隔を持たせるコードを紹介しています。

この例ではボタンがラベルの上に20ピクセルの間隔を持って配置されています。

let button = UIButton(type: .system)
button.setTitle("クリック", for: .normal)
button.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button)

let label = UILabel()
label.text = "ボタンの上に表示されるテキスト"
label.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(label)

let verticalConstraint = NSLayoutConstraint(item: button, attribute: .bottom, relatedBy: .equal, toItem: label, attribute: .top, multiplier: 1, constant: -20)

NSLayoutConstraint.activate([verticalConstraint])

ボタンのbottom属性とラベルのtop属性の間に20ピクセルの間隔を持たせるための制約を追加しています。

constantの値が-20であるため、ラベルがボタンの上に20ピクセルの間隔で配置されます。

これで、UILabelとUIButtonの間に正確な20ピクセルの間隔ができます。

○サンプルコード3：複数のビューに同時に制約を設定

AutoLayoutを使ってUIをデザインする際、複数のビューに対して同時に制約を設定したい場面は多々あります。

例えば、複数のボタンやラベルを同じ間隔で並べたいといったケースです。

このコードではUIButtonを3つ使って、各ボタン間に等しい間隔を持たせるコードを紹介しています。

この例では3つのボタンを垂直に等間隔で配置しています。

let button1 = UIButton(type: .system)
button1.setTitle("ボタン1", for: .normal)
button1.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button1)

let button2 = UIButton(type: .system)
button2.setTitle("ボタン2", for: .normal)
button2.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button2)

let button3 = UIButton(type: .system)
button3.setTitle("ボタン3", for: .normal)
button3.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button3)

let constraints = [
    button1.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
    button2.topAnchor.constraint(equalTo: button1.bottomAnchor, constant: 20),
    button3.topAnchor.constraint(equalTo: button2.bottomAnchor, constant: 20)
]

NSLayoutConstraint.activate(constraints)

このコードにより、3つのボタンは画面上部からそれぞれ20ピクセルの間隔で配置されます。

各ボタンの上端は前のボタンの下端から20ピクセルの位置になるように制約が追加されています。

このようにして、複数のビュー間の間隔を簡単に統一的に設定することができます。

特にリストやグリッドのようなレイアウトを作成する際には、このような方法で制約を追加することで、効率的かつ迅速にデザインを実装することができます。

○サンプルコード4：優先度を設定して制約を調整

AutoLayoutの制約には優先度という概念があります。

この優先度を利用することで、どの制約を優先して適用するかを制御することができます。

このコードではUILabelとUIButtonを使って、ラベルの横にボタンを配置し、ボタンの存在に応じてラベルの幅を調整するコードを紹介しています。

この例では、ボタンが存在する場合にラベルの幅を縮め、ボタンが存在しない場合にラベルの幅を広げる動作をします。

let label = UILabel()
label.text = "こちらのテキストは長めです。"
label.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(label)

let button = UIButton(type: .system)
button.setTitle("確認", for: .normal)
button.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button)

let labelWidthConstraint = label.widthAnchor.constraint(equalToConstant: 200)
labelWidthConstraint.priority = UILayoutPriority(750)

let constraints = [
    label.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20),
    button.leadingAnchor.constraint(equalTo: label.trailingAnchor, constant: 10),
    button.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20),
    labelWidthConstraint
]

NSLayoutConstraint.activate(constraints)

labelWidthConstraintの優先度を750に設定することで、この制約は他の制約よりも低い優先度となります。

これにより、ボタンが存在する場合、ボタンの制約が優先され、ラベルの幅が縮まる動作を実現します。

優先度を活用することで、柔軟なレイアウトを簡単に実装することができます。

特に複雑なUIデザインやアニメーションを実装する際には、この機能は非常に役立ちます。

○サンプルコード5：サイズクラスを利用した制約の変更

サイズクラスはデバイスのサイズや向きに応じて異なるレイアウトを提供するためのツールです。

サイズクラスを利用することで、例えば縦向きの場合と横向きの場合で異なるレイアウトを適用することができます。

このコードではUIImageViewを使って、デバイスの向きに応じて画像のサイズを変更するコードを紹介しています。

この例では、縦向きの場合は画像の幅を200ピクセル、横向きの場合は画像の幅を300ピクセルとしています。

let imageView = UIImageView(image: UIImage(named: "sampleImage"))
imageView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(imageView)

let portraitConstraint = imageView.widthAnchor.constraint(equalToConstant: 200)
portraitConstraint.priority = UILayoutPriority(999)
portraitConstraint.isActive = traitCollection.verticalSizeClass == .regular

let landscapeConstraint = imageView.widthAnchor.constraint(equalToConstant: 300)
landscapeConstraint.priority = UILayoutPriority(999)
landscapeConstraint.isActive = traitCollection.horizontalSizeClass == .regular

サイズクラスを使用することで、簡単に向きに応じたレイアウトを作成することができます。

サイズクラスは非常に強力なツールであり、多くのアプリケーションで幅広く利用されています。

●NSLayoutConstraintの応用例

SwiftでのUIデザインにおいて、NSLayoutConstraintは非常に強力なツールとして知られています。

ここでは、NSLayoutConstraintのさらなる応用例について詳しく解説していきます。

○サンプルコード6：アニメーションと制約の組み合わせ

制約を変更することで、簡単にビューのアニメーションを実装することができます。

このコードではUIButtonの位置を変えることで、ボタンの移動アニメーションを作成しています。

この例では、ボタンがタップされたときに上に移動する動作をします。

let button = UIButton(type: .system)
button.setTitle("タップして移動", for: .normal)
button.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button)

var buttonTopConstraint = button.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 100)
buttonTopConstraint.isActive = true

button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)

@objc func buttonTapped() {
    buttonTopConstraint.constant = 50
    UIView.animate(withDuration: 0.5) {
        self.view.layoutIfNeeded()
    }
}

ボタンがタップされた時に、buttonTopConstraintのconstantを50に変更して、アニメーションを実行しています。

この動作により、ボタンは上に移動するアニメーションを見せることができます。

○サンプルコード7：ダイナミックタイプを考慮した制約設定

ダイナミックタイプは、iOSのアクセシビリティ機能の一部として、テキストのサイズをユーザーが自由に変更できる機能です。

ダイナミックタイプをサポートするためには、制約も適切に設定する必要があります。

このコードではUILabelを使って、ダイナミックタイプに対応したテキストのレイアウトを実現するコードを紹介しています。

この例では、テキストのサイズが変わってもレイアウトが崩れないように制約を設定しています。

let label = UILabel()
label.text = "ダイナミックタイプをサポートするテキスト"
label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true
label.numberOfLines = 0
label.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(label)

let constraints = [
    label.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
    label.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20),
    label.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20)
]

NSLayoutConstraint.activate(constraints)

上記のコードを使用することで、テキストのサイズが大きくなっても、または小さくなっても、レイアウトが崩れることなく適切に表示されるようになります。

ダイナミックタイプは多くのユーザーにとって重要な機能であるため、このような実装を取り入れることで、より多くのユーザーに快適にアプリを利用してもらうことができます。

○サンプルコード8：スクロールビュー内の制約設定

スクロールビューを使用する場面は非常に多いですが、中でも制約の設定はトリッキーな部分もあるため、正確に理解して適切に設定することが重要です。

このコードではUIScrollView内に複数のUI要素を配置し、適切に制約を設定する方法を解説します。

この例では、スクロールビュー内に縦方向に連続したUILabelが配置されており、それぞれのラベルの間隔やサイズを制約で調整しています。

let scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(scrollView)

let stackView = UIStackView()
stackView.axis = .vertical
stackView.spacing = 20
stackView.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(stackView)

for i in 1...10 {
    let label = UILabel()
    label.text = "ラベル \(i)"
    stackView.addArrangedSubview(label)
}

let constraints = [
    scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),

    stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
    stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
    stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
    stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
    stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
]

NSLayoutConstraint.activate(constraints)

このコードでは、UIScrollViewの内部にUIStackViewを使用して複数のUILabelを配置しています。

UIStackViewの特性を利用することで、ラベル間の間隔や配置を容易に調整できます。

さらに、スクロールビューの制約は、スクロールビュー自体とその内容に対して適切に設定することで、期待通りのスクロール動作を実現することができます。

○サンプルコード9：コードでの制約作成と更新

制約をプログラムで動的に変更したい場面は多々あります。

例えば、ユーザーの操作に応じてビューのサイズや位置を変更する際などには、動的な制約の更新が求められます。

このコードでは、UIButtonをタップすることでUILabelの高さを変更するサンプルを紹介します。

let label = UILabel()
label.text = "動的に高さが変わるラベル"
label.backgroundColor = .lightGray
label.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(label)

let button = UIButton(type: .system)
button.setTitle("高さを変更", for: .normal)
button.translatesAutoresizingMaskIntoConstraints = false
button.addTarget(self, action: #selector(changeHeight), for: .touchUpInside)
view.addSubview(button)

var labelHeightConstraint = label.heightAnchor.constraint(equalToConstant: 50)
labelHeightConstraint.isActive = true

@objc func changeHeight() {
    labelHeightConstraint.constant = 100
    UIView.animate(withDuration: 0.3) {
        self.view.layoutIfNeeded()
    }
}

上記のコードで、ボタンが押されるとラベルの高さが50から100に変更されるアニメーションが行われます。

制約のconstantプロパティを変更することで、動的にビューのサイズや位置を調整することが可能となります。

○サンプルコード10：Visual Format Languageを使った制約の追加

Visual Format Language (VFL)は、テキストベースでの制約の記述を可能にする非常に有用なツールです。

この手法は、特に複数のオブジェクトに似たような制約を適用する場面などで、非常に効率的に制約を記述することができます。

この例では、複数のボタンを水平方向に均等に配置するための制約をVFLを使用して設定しています。

let button1 = UIButton(type: .system)
button1.setTitle("ボタン1", for: .normal)
button1.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button1)

let button2 = UIButton(type: .system)
button2.setTitle("ボタン2", for: .normal)
button2.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button2)

let views: [String: Any] = ["button1": button1, "button2": button2]

let metrics = ["spacing": 20]

let horizontalConstraints = NSLayoutConstraint.constraints(
    withVisualFormat: "H:|-spacing-[button1]-spacing-[button2]-spacing-|",
    options: .alignAllCenterY,
    metrics: metrics,
    views: views
)

NSLayoutConstraint.activate(horizontalConstraints)

このコードでは、button1とbutton2という名前のボタンを画面に追加しています。

そして、viewsというディクショナリでそれぞれのボタンを文字列のキーと関連付けています。

VFLの中で、H:は水平方向の制約を表し、|-spacing-[button1]-spacing-[button2]-spacing-|は、それぞれのボタンの間に指定したスペーシングを確保しながらボタンを配置することを示しています。

VFLを用いると、このように簡潔に、しかも直感的に制約を記述することができます。

しかし、特定の複雑な配置や制約を適用する際には、VFLだけでの記述が難しい場面もあります。

そのため、VFLと通常の制約のAPIを組み合わせて使用することで、より効率的にレイアウトを設計することができます。

○サンプルコード11：Interface Builderでの制約のカスタマイズ

多くの開発者は、Interface Builderを利用してUIを設計しています。

Interface Builderでは、グラフィカルなインターフェースを通じて制約を追加したり、調整したりすることができます。

しかし、実際の制約の調整やカスタマイズはコードベースで行うことが多いです。

このコードでは、Interface Builderで配置したボタンの高さ制約をコードで取得し、変更する例を紹介しています。

まず、Interface Builder上でボタンを配置し、高さ制約を追加します。

その後、その制約をIBOutletとして関連付けます。

@IBOutlet weak var buttonHeightConstraint: NSLayoutConstraint!

次に、ボタンがタップされた際に、この制約のconstantプロパティを変更することで、ボタンの高さを動的に変更します。

@IBAction func changeButtonHeight() {
    buttonHeightConstraint.constant = 100
    UIView.animate(withDuration: 0.3) {
        self.view.layoutIfNeeded()
    }
}

このように、Interface Builderとコードを組み合わせて制約をカスタマイズすることで、UIの動的な変更をスムーズに実現することができます。

○サンプルコード12：レスポンシブデザインのための制約調整

レスポンシブデザインは、異なるデバイスや画面サイズに対して適切にUIを表示するための重要な考え方です。

NSLayoutConstraintを活用することで、レスポンシブなUIデザインを効率よく実現することができます。

この例では、デバイスの向き（ポートレートまたはランドスケープ）に応じてラベルのフォントサイズを変更する方法を紹介しています。

まず、UILabelを配置し、そのフォントサイズを変更するための制約をコードで設定します。

let label = UILabel()
label.text = "レスポンシブデザインのテキスト"
label.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(label)

let portraitConstraint = label.font.withSize(20)
let landscapeConstraint = label.font.withSize(30)

NotificationCenter.default.addObserver(self, selector: #selector(adjustForOrientation), name: UIDevice.orientationDidChangeNotification, object: nil)

@objc func adjustForOrientation() {
    if UIDevice.current.orientation.isLandscape {
        label.font = landscapeConstraint
    } else {
        label.font = portraitConstraint
    }
}

上記のコードでは、デバイスの向きが変わるたびにadjustForOrientationメソッドが呼び出されます。

このメソッド内で、デバイスの向きを確認し、ラベルのフォントサイズを変更することで、レスポンシブなデザインを実現しています。

●注意点と対処法

AutoLayoutを使用する際には、しっかりとした制約の設計が求められます。

しかし、特定の制約の設定や組み合わせによっては、意図しないレイアウトやエラーが生じる場合があります。

ここでは、よくある注意点とその対処法について詳しく解説します。

○制約が競合する時の対処法

制約が競合する、つまり相反する制約が存在する場合、UIが正しくレンダリングされません。

例えば、同じビューに対して幅が100と幅が150の2つの異なる制約を設定した場合、どちらの制約を優先すればよいかが不明確となり、エラーが発生します。

このコードでは、競合する制約を持つビューのサンプルを紹介しています。

let conflictingView = UIView()
conflictingView.backgroundColor = .blue
conflictingView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(conflictingView)

NSLayoutConstraint.activate([
    conflictingView.widthAnchor.constraint(equalToConstant: 100),
    conflictingView.widthAnchor.constraint(equalToConstant: 150),
    conflictingView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    conflictingView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

この例では、conflictingViewに対して幅が100と150の2つの制約が設定されています。この状態で実行すると、エラーがログに出力されます。

対処法としては、競合する制約を特定し、不要な制約を削除するか、制約の優先度を変更して競合を解消します。

制約の競合は、実行時のデバッグエリアやXcodeのInterface Builderで確認することができます。

○制約が足りない時の確認方法

制約が足りないという状況も考えられます。

これは、ビューの位置やサイズが曖昧であり、システムが正確にビューを配置できない場合に発生します。

例えば、ビューの幅と高さの制約だけを設定し、位置に関する制約を設定していない場合、そのビューの配置場所が不明確となります。

このコードでは、位置の制約が足りないビューのサンプルを表しています。

let ambiguousView = UIView()
ambiguousView.backgroundColor = .red
ambiguousView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(ambiguousView)

NSLayoutConstraint.activate([
    ambiguousView.widthAnchor.constraint(equalToConstant: 100),
    ambiguousView.heightAnchor.constraint(equalToConstant: 100)
])

この状態で実行すると、ambiguousViewは画面上に表示されますが、具体的な位置は不確定です。

対処法としては、必要な制約を追加して、ビューの位置やサイズが一意に決まるようにします。

制約が足りない場合の警告は、XcodeのInterface Builderで確認することができ、黄色い三角形のアイコンをクリックすることで詳細を確認できます。

●カスタマイズ方法

NSLayoutConstraintは非常に強力なツールであり、それにより多くのカスタマイズが可能です。

デフォルトの制約だけでなく、カスタム制約の作成や外部ライブラリを利用した制約の追加も行うことができます。

ここでは、より高度なカスタマイズ方法について詳しく解説していきます。

○カスタム制約の作成

iOS開発者として、特定のビジネスロジックやUIデザインの要件に合わせて、独自のカスタム制約を作成することが求められることもあるでしょう。

このコードでは、特定の条件下でのビューの高さを動的に変更するカスタム制約を紹介しています。

この例では、customViewの高さをスクリーンの高さの半分に設定する制約を作成しています。

let customView = UIView()
customView.backgroundColor = .green
customView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(customView)

let customHeightConstraint = NSLayoutConstraint(item: customView, attribute: .height, relatedBy: .equal, toItem: view, attribute: .height, multiplier: 0.5, constant: 0)
NSLayoutConstraint.activate([
    customHeightConstraint,
    customView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.8),
    customView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    customView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

この制約を適用すると、customViewの高さはデバイスのスクリーンの高さの半分となり、中央に配置されるようになります。

○外部ライブラリを利用した制約の追加

Swiftのコミュニティは非常に活発で、多くの外部ライブラリが提供されています。

その中には、AutoLayoutをより便利に、また効率的に使用するためのライブラリも存在します。

一例として、SnapKitというライブラリを取り上げます。SnapKitはSwiftでのAutoLayoutを簡潔に記述するためのDSLを提供しており、コードの読みやすさや保守性を向上させることができます。

SnapKitを使用するためには、まずCocoaPodsやCarthage、Swift Package Managerなどを利用してプロジェクトに追加する必要があります。

SnapKitを利用した制約の設定は次のように行います。

import SnapKit

let snapKitView = UIView()
snapKitView.backgroundColor = .orange
view.addSubview(snapKitView)

snapKitView.snp.makeConstraints { make in
    make.center.equalToSuperview()
    make.width.height.equalTo(150)
}

このコードでは、SnapKitのDSLを使ってsnapKitViewをスーパービューの中央に150×150のサイズで配置しています。

SnapKitを使用することで、制約の設定が直感的に、そして簡潔に記述できるようになります。

まとめ

SwiftでのNSLayoutConstraintの使い方は、UIのデザインと配置における中心的な役割を果たします。

本記事を通じて、NSLayoutConstraintの基本から高度な応用、さらにはカスタマイズ方法まで、幅広い内容を学ぶことができました。

制約を正しく設定することで、さまざまなデバイスや画面サイズに適切に対応するUIを実現することができます。

特に、外部ライブラリを活用することで、より効率的かつ簡潔なコードでUIの制約を設定することが可能となります。

しかし、NSLayoutConstraintの設定には注意が必要です。

制約の競合や不足など、問題が発生した際の対処法を知っておくことで、迅速に問題を解決し、より良いユーザー体験を提供することができます。

SwiftとAutoLayoutは、iOSアプリ開発において欠かせない知識です。

今後も新しい情報や技術が出てくることでしょう。常に最新の情報をキャッチアップし、技術を磨いていくことが大切です。

この記事がSwiftとNSLayoutConstraintの学習の一助となれば幸いです。

今後のアプリ開発に活かしていただけると嬉しいです。