コードから制約をつけるとViewが表示されなくなってしまう

Question

以下の画像のような実装を行いたいと考えています。
緑のViewとオレンジのViewはIB上から設定を行い、赤枠のViewをコードで作成してコードで制約をつけたいと考えています。

コード

以下のようにコードを作成しました。
赤いViewの縦の大きさは可変にしたいのですが、UIViewをイニシャライズする際にCGRectを渡さないとクラッシュしてしまったので適当な値を渡しています。

override func viewDidLoad() {
        super.viewDidLoad()
        
        let centerview = UIView(frame: CGRect(x: 100, y: self.view.frame.height/2, width: 100, height: 100))
        centerview.backgroundColor = .red
        self.view.addSubview(centerview)
        centerview.translatesAutoresizingMaskIntoConstraints = false
        centerview.topAnchor.constraint(equalTo: topView.bottomAnchor, constant: 50).isActive = true
        centerview.leadingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: 30).isActive = true
        centerview.bottomAnchor.constraint(equalTo: bottomView.topAnchor, constant: 50).isActive = true
    }

ビルドしてクラッシュなどはしないのですが、制約が正しくついていないのか画面上に赤いViewが表示されません。制約を全てコメントアウトしてビルドすると画面の中央あたりに表示されます。
制約に沿った形で表示をおこないたいのですが、どうすれば良いのでしょうか？

Answer 1

幅の制約がないからじゃないでしょうか？
おそらくwidthが0になって表示されなくなっているのだと思います。

追記：
centerview.leadingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: 30).isActive = true と width の制約がないことにより self.view の右の外側に centerview が幅0で配置されている状態になっています。
修正後のコード

let centerview = UIView() //frameはautolayoutで設定するので不要ですもしくはUIView(frame: .zero)でも可 
centerview.backgroundColor = .red
self.view.addSubview(centerview)
centerview.translatesAutoresizingMaskIntoConstraints = false
centerview.topAnchor.constraint(equalTo: topView.bottomAnchor, constant: 50).isActive = true
centerview.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -30).isActive = true //trailingAnchor、-30に修正
centerview.bottomAnchor.constraint(equalTo: bottomView.topAnchor, constant: 50).isActive = true

Auto Layout で思い通り行かない場合は下記のように UIViewController の viewDidLayoutSubviews de frame を確認するといいと思います。

override func viewDidLayoutSubviews() {
   print(view.frame)
}

コードでのAuto Layoutの設定は Anchor だけでなく addConstraints などあるので色々調べてみるといいと思います。

Comments

[hodoru3sei]

centerview.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.5).isActive = true
この制約を付け足してみたのですが、表示されませんでした。widthの制約って別のものがあるんでしょうか？

[usagi001]

幅の制約はそれであっています。
もうひとつleadingAnchorが原因ですね。
equalTo: self.view.trailingAnchorとしているので画面外にviewが出ているのだと思います。

[hodoru3sei]

leadingAnchorにしたところ画面に表示することはできました！
self.view.trailingAnchorで制約を付けたい場合は、自分のViewのframeなどを計算する必要があるのでしょうか？

[usagi001]

今回の場合はself.viewの右端から30離れた位置にcenterviewを配置したいのだと思われるので簡単にやるなら
centerview.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -30).isActive = true
とすればいいのではないでしょうか？
コードでautolayoutの設定は色々方法があるので他にも色々検索してみるといいと思います。

[usagi001]

Auto Layout で思い通り行かない場合はViewControllerの
override func viewDidLayoutSubviews()
でprint(centerview.frame)としてログ出力するかbreakpointを置いて確認するといいと思います。

[usagi001]

回答に記載した方が良さそうだったので回答に追記しました。

[hodoru3sei]

ありがとうございます！