Swift(iOS)でViewを真ん中に配置する方法！(回転あり)

SwiftでViewを真ん中に配置する方法です。
この記事ではUIViewを使用して、常に真ん中に配置する方法について書いています。

結論としては、Viewのcenterを指定してあげると良いです。
回転させた時にも、再度計算して設定してあげると中央になります。

UIKitのUIViewとSwiftのバージョン5を使って、解説しています。

SwiftでViewを真ん中に配置するには？

Viewを真ん中に配置するには、UIViewのcenterプロパティに対して、真ん中を設定します。
UIViewのcenterプロパティについては公式のこちらのドキュメントに記載があります。

import UIKit

class ViewController: UIViewController {

    var centerView = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()

        centerView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
        centerView.backgroundColor = UIColor.cyan

        let screenHeight = UIScreen.main.bounds.height
        let screenWidth = UIScreen.main.bounds.width
        centerView.center = CGPoint(x: screenWidth / 2, y: screenHeight / 2)

        self.view.addSubview(centerView)
    }
}

まず、UIViewとして、centerViewを作成しています。
このcenterViewを画面の中央に設定します。

CGRectを使って、centerView.frameに対して、とりあえずの座標と大きさを指定しています。
次に背景色をbackgroundColorプロパティに対して「UIColor.cyan」に設定しました。

そして、UIScreen.main.bounds.heightで画面の縦幅を取得しています。
UIScreen.main.bounds.widthで画面の横幅を取得しています。

それぞれを2で割って、中央の場所をCGPointで作って、centerViewのcenterプロパティに設定しました。
これで中央に配置されます。

最後にaddSubviewして、現在のviewに追加しています。

エミュレータで確認する

確認すると、このように中央に配置されました。

Swiftでデバイス回転時も真ん中に配置する

デバイス回転時に真ん中に配置したい時には、デバイスの回転を検知したときに、取得した値を再度計算して設定してあげると良いです。

import UIKit

class ViewController: UIViewController {

    var centerView = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()

        centerView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
        centerView.backgroundColor = UIColor.cyan

        let screenHeight = UIScreen.main.bounds.height
        let screenWidth = UIScreen.main.bounds.width
        centerView.center = CGPoint(x: screenWidth / 2, y: screenHeight / 2)

        self.view.addSubview(centerView)
    }

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)

        let screenHeight = UIScreen.main.bounds.height
        let screenWidth = UIScreen.main.bounds.width
        centerView.center = CGPoint(x: screenWidth / 2, y: screenHeight / 2)
    }
}

viewWillTransitionメソッドを追加しました。

このメソッドで、デバイスの回転を検知することができます。
デバイスを回転して、画面が横になったり、縦になったりすると呼ばれます。

UIScreen.main.boundsのheightとwidthは画面の向きが変わると、画面に合わせて値が変わります。
そのため同じように計算して、UIViewのcenterプロパティを更新しています。

エミュレータで確認する

確認してみると、このように中央に表示されていることが確認できました。

SwiftでViewを中央に配置する方法まとめ

今回はSwiftでViewを中央に配置する方法について書きました。
記事の要点をまとめると、下記になります。