swiftでviewに表示したボタンの位置がずれる

Question

前提・実現したいこと

追加したviewのセンターに青のボタンを配置したい

発生している問題・エラーメッセージ

ボタンの位置が真ん中より左上に若干ずれて表示されてしまう

![

該当のソースコード

import UIKit

class ViewController: UIViewController {


    @IBOutlet weak var myView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //青のボタンを作るコード
        let myBtn = UIButton(type:UIButtonType.custom)
        myBtn.backgroundColor = UIColor.blue
        
        // ボタンを真ん中に表示するコード
        let x:CGFloat = myView.frame.width/2
        let y:CGFloat = myView.frame.height/2
        myBtn.frame = CGRect(x:x, y:y, width:20, height: 20)
        myView.addSubview(myBtn)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

試したこと

(1)Viewを配置→ctrl+ドラッグで接続してmyViewという名前でoutletを作成
(2)viewをオートレイアウトでセンターに配置、制約を追加

(3)バックグラウンドの色を変更
(4)ViewController.swift内にてviewのセンターにボタンを作成、表示するコードを実装

補足

print()で座標を出力した所、数値的にはあってたので座標の位置が問題ということではなさそうなのですが‥　なぜセンターに表示されないんでしょう..？

Answer 1

まず、中心に表示させるためにはx,yは左上の座標なのでそいつ自身の半分を引いてください。
（これをしないと中心から右下にズレてしまいます。）
myBtn.frame = CGRect(x:x-10, y:y-10, width:20, height: 20)

次になぜ左上にずれてしまうのかについてですが
viewDidLoad時にはまだAutolayoutが反映されていないことが原因となります。

UIViewControllerのライフサイクル

storyboard（またはxib）では画面上にベースとして表示するサイズを
選べるようになっており、View:as:IPhone 8の部分を押すとiPhoneとiPadのアイコンがでてきて
各アイコンを押すとどの画面サイズを見ながらレイアウト配置するかを選べます。

例えばIPhone8のビューで作ってIPhone8 Plusで実行するような場合には
viewDidLoadの段階ではautoLayoutが反映されないのでIPhone8で配置したビューサイズのまま値を取ってきてきてしまい、実際にはiPhone8 Plus用にビューが大きくなってしまうため左上にずれてしまいます。

なので、解決方法としてはレイアウトが決定した後に呼び出すと中心に配置することができます。

override func viewDidLayoutSubviews(){
     // ここで呼ぶ
}

autoLayout前後でサイズが変わってしまうものを基準に配置する際には
viewDidLayoutSubviews以後に呼び出すようにしましょう。

Comments

[ijuya_yika]

無事センターに配置することができましたm(_ _)m　これを機にUIViewControllerのライフサイクルについても勉強してみようと思います。ありがとうございました。