こんにちは!株式会社メモリアインクのふくしまです!
この記事では、オートレイアウトの設定をプログラムで直接操作する方法について、初心者から中級者までわかりやすく解説します。
この記事を読んで分かること…
・オートレイアウトとは?
・さまざまな種類の制約の設定方法
オートレイアウトとは
オートレイアウト(Auto Layout)は、Appleが提供するUIコンポーネントを画面上で適切に配置するためのシステムです。オートレイアウトを使用すると、異なるデバイスサイズや画面の向きに自動で適応するレイアウトを実現できます。このシステムは「制約(Constraints)」を使用してUIコンポーネントのサイズや位置を定義します。
位置制約の設定
位置制約はビューの位置を決定するために使用されます。上端、下端、先頭、末尾、中心X、中心Yなどがあります。ここでは、ビューを親ビューの中央に配置するサンプルコードを紹介します。
サンプルコード: ビューを中央に配置
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let subView = UIView()
subView.backgroundColor = .red
subView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(subView)
// 中央に配置する制約
NSLayoutConstraint.activate([
subView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
subView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
subView.widthAnchor.constraint(equalToConstant: 100),
subView.heightAnchor.constraint(equalToConstant: 100)
])
}
}
サンプルコードの説明
◾️行7: UIViewのインスタンスを作成し、subView
変数に代入します。
◾️行8: subView
の背景色を赤に設定します。
◾️行9: subView
のtranslatesAutoresizingMaskIntoConstraints
プロパティをfalse
に設定します。これにより、Auto Layoutの制約をプログラムで指定することを示します。
◾️行10:subView
を現在のビューコントローラのルートビューのサブビューとして追加します。
◾️行13-18: NSLayoutConstraint.activate
メソッドを使用して、subView
を親ビューの中央に配置し、幅と高さをそれぞれ100ポイントに設定する制約をアクティブにします。
・行14: subView
の中心X座標を親ビューの中心X座標に等しくします。
・行15: subView
の中心Y座標を親ビューの中心Y座標に等しくします。
・行16: subView
の幅を100ポイントに固定します。
・行17: subView
の高さを100ポイントに固定します。
表示確認
それではビルドして、表示確認してみましょう!
その他の位置制約
・上端(Top):他のビューの上端、Safe Area、またはSuperviewの上端に対する制約を設定するには、以下のように記述します
childView.topAnchor.constraint(equalTo: parentView.topAnchor, constant: padding).isActive = true
・下端(Bottom):他のビューの下端、Safe Area、またはSuperviewの下端に対する制約を設定するには、以下のように記述します
childView.bottomAnchor.constraint(equalTo: parentView.bottomAnchor, constant: -padding).isActive = true
・先頭(Leading):他のビューの先頭やSuperviewの先頭に対する制約を設定するには、以下のように記述します
childView.leadingAnchor.constraint(equalTo: parentView.leadingAnchor, constant: padding).isActive = true
・末尾(Trailing):他のビューの末尾やSuperviewの末尾に対する制約を設定するには、以下のように記述します
childView.trailingAnchor.constraint(equalTo: parentView.trailingAnchor, constant: -padding).isActive = true
サイズ制約の設定
サイズ制約を使用して、ビューの幅と高さを指定します。これにより、ビューが表示される際のサイズが決まります。ビューの幅を親ビューの半分に設定する例を見てみましょう。
サンプルコード: ビューの幅を親ビューの半分に設定
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let subView = UIView()
subView.backgroundColor = .green
subView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(subView)
// 幅を親ビューの半分に設定
NSLayoutConstraint.activate([
subView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5),
subView.heightAnchor.constraint(equalToConstant: 100),
subView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
subView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])
}
}
サンプルコードの説明
◾️行7: UIViewのインスタンスを作成し、subView
変数に代入します。
◾️行8: subView
の背景色を緑色に設定します。
◾️行9: subView
のtranslatesAutoresizingMaskIntoConstraints
プロパティをfalse
に設定します。これは、Auto Layoutを使用してビューのレイアウトを定義する場合に必要です。
◾️行10: subView
をビューコントローラのルートビューのサブビューとして追加します。
◾️行13-18: NSLayoutConstraint.activate
メソッドを使って、subView
に対する一連の制約をアクティブにします。
・行14: subView
の幅を親ビューの幅の半分に等しくする制約を設定します。
・行15: subView
の高さを100ポイントに固定する制約を設定します。
・行16: subView
の中心X座標を親ビューの中心X座標に等しくする制約を設定します。
・行17: subView
の中心Y座標を親ビューの中心Y座標に等しくする制約を設定します。
表示確認
それではビルドして、表示確認してみましょう!
その他のサイズ制約
・幅(Width)と高さ(Height):ビュー自身の幅と高さに直接制約を設定することができます。これにより、特定のサイズを持つビューを作成することが可能です。
// 幅を200ポイントに設定
let widthConstraint = myView.widthAnchor.constraint(equalToConstant: 200)
widthConstraint.isActive = true
// 高さを100ポイントに設定
let heightConstraint = myView.heightAnchor.constraint(equalToConstant: 100)
heightConstraint.isActive = true
・アスペクト比(Aspect Ratio):ビューの幅と高さの比率を設定することもできます。これは、ビューが拡大・縮小しても、その比率を保持する場合に便利です。
// 幅を親ビューの50%に設定
let widthConstraint = myView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5)
widthConstraint.isActive = true
// 幅に基づいてアスペクト比を16:9に設定
let aspectRatioConstraint = myView.widthAnchor.constraint(equalTo: myView.heightAnchor, multiplier: 16.0/9.0)
aspectRatioConstraint.isActive = true
まとめ
いかがでしたか?
この記事を通して、オートレイアウトの基本的な設定方法を学ぶことができました。オートレイアウトをマスターすることで、どんなデバイスにも対応するレスポンシブなアプリを開発できるようになります。
この記事が皆様の開発ライフの一助になれれば幸いです!それではまた次の記事でお会いしましょう〜
この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント