• 2022/10/12
• 3分

【Swift UIKit】ビューを画面の真ん中に配置する方法！AutoLayout

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

ビューを画面の真ん中に配置する方法

ビューを画面の真ん中(中心)に配置するにはAutoLayout(※)を使用することでデバイスに影響されることのない配置を実装することができます。また画面の向きが縦から横に変わってもビューの位置を中心に保つことができるようになります。

※AutoLayoutは制約によってビューの配置を指定する機能です。

実装方法と流れ

1. UI部品のインスタンス化
2. translatesAutoresizingMaskIntoConstraintsプロパティにfalseを格納
3. UI部分をサブビューに追加
4. AutoLayout を使って中心に配置

 override func viewDidLoad() {
    super.viewDidLoad()

    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(label)
    NSLayoutConstraint.activate([
        label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        label.centerXAnchor.constraint(equalTo: view.centerXAnchor)
    ])
}

translatesAutoresizingMaskIntoConstraintsプロパティ

translatesAutoresizingMaskIntoConstraintsはビューの配置に対してAutoresizingMaskかAutoLayoutのどちらを使用するか指定するプロパティです。falseを指定すると場合は、AutoLayoutになります。

NSLayoutConstraint.activate

NSLayoutConstraintクラスを使って制約を記述していきます。AutoLayoutを使う前に対象ビューにtranslatesAutoresizingMaskIntoConstraintsの設定とaddSubviewでビューが追加されている必要があります。

ここでは詳細な解説は割愛しますが、以下のコードで制約を定義しビューを中心に指定しています。

NSLayoutConstraint.activate([
    label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    label.centerXAnchor.constraint(equalTo: view.centerXAnchor)
])

デバイスサイズを取得して中心に指定する

AutoLayoutがよく分からないよって人のために簡単に中心(近くに...)設置する方法を載せておきます。

let screenWidth = UIScreen.main.bounds.width
let screenHeight = UIScreen.main.bounds.height
let label = UILabel(frame: CGRect(x:screenWidth/3, y:screenHeight/2,width:screenWidth/2, height:60))

これはデバイスのサイズを取得してそのサイズを割ることで相対的に配置位置を算出しています。

ど真ん中とはいきませんが、それっぽい位置に簡単に配置ができるので使ってみてください。

おすすめ記事：【Swift UI】画面(スクリーン)の横幅を取得する方法！デバイスサイズ

UIView.centerプロパティを使用して中心に配置する

追記：2022年12月21日

ビューの中心に綺麗に配置する方法がありましたので追記しておきます。方法はUIViewクラスのcenterプロパティを利用します。

公式リファレンス：UIView.centerプロパティ

var center: CGPoint { get set }

UIView.centerプロパティはビューの中心座標を保持するプロパティです。このプロパティに値を格納すると自動でframeプロパティの値を調整してくれます。

let label = UILabel(frame: CGRect(x: 0, y:0, width: UIScreen.main.bounds.width / 2 , height: 100))
label.center = self.view.center

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。