无法将UILabel居中于自定义视图的中心

Question

I'm creating a tap war game and I added to custom views to my app, a redView and blueView. Both views take up half of the screen. I'm trying to position a label over each of the two views to keep track of scores (labels are called "topviewLabel" and "bottomViewLabel"), specifically in the center, but the labels appear in the top left corners of their respective views and won't center properly. I create the views and set their constraints programmatically and then add labels to the redView or blueView, I'm doing this all programmatically. I'll leave the code below, let me know what I'm doing wrong.

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()

    let redView = UIView()
    redView.backgroundColor = UIColor(red: 206/255, green: 0/255, blue: 0/255, alpha: 1)
    redView.isMultipleTouchEnabled = true
    redView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(redView)

    let redviewConstraints: [NSLayoutConstraint] = [
        NSLayoutConstraint(item: redView, attribute: .left, relatedBy: .equal, toItem: self.view, attribute: .left, multiplier: 1, constant: 0),
        NSLayoutConstraint(item: redView, attribute: .right, relatedBy: .equal, toItem: self.view, attribute: .right, multiplier: 1, constant: 0),
        NSLayoutConstraint(item: redView, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1, constant: 0),
        NSLayoutConstraint(item: redView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: view.frame.height / 2)
    ]

    view.addConstraints(redviewConstraints)

    let blueView = UIView()
    blueView.backgroundColor = UIColor(red: 0/255, green: 0/255, blue: 99/255, alpha: 1)
    blueView.isMultipleTouchEnabled = true
    blueView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(blueView)

    let blueViewConstraints: [NSLayoutConstraint] = [
        NSLayoutConstraint(item: blueView, attribute: .left, relatedBy: .equal, toItem: self.view, attribute: .left, multiplier: 1, constant: 0),
        NSLayoutConstraint(item: blueView, attribute: .right, relatedBy: .equal, toItem: self.view, attribute: .right, multiplier: 1, constant: 0),
        NSLayoutConstraint(item: blueView, attribute: .bottom, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1, constant: 0),
        NSLayoutConstraint(item: blueView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: view.frame.height / 2)
    ]

    view.addConstraints(blueViewConstraints)


    let topViewLabel = UILabel()
    topViewLabel.frame = CGRect(x: redView.frame.size.width / 2, y: redView.frame.size.height / 2, width: 80, height: 80)
    topViewLabel.text = "30"
    topViewLabel.textAlignment = .center
    topViewLabel.font.withSize(30)
    topViewLabel.textColor = .white
    topViewLabel.backgroundColor = UIColor.blue
    topViewLabel.center = redView.center
    redView.addSubview(topViewLabel)
    redView.bringSubview(toFront: topViewLabel)

    let bottomViewLabel = UILabel()
    bottomViewLabel.frame = CGRect(x: blueView.frame.width / 2, y: blueView.frame.height / 2, width: 80, height: 80)
    bottomViewLabel.center = blueView.center
    bottomViewLabel.text = "20"
    bottomViewLabel.backgroundColor = UIColor.red
    blueView.addSubview(bottomViewLabel)
    blueView.bringSubview(toFront: bottomViewLabel)

}

Answer 1

A UIView doesn't have its correct frame size right after adding constraints, you need to add:

blueView.setNeedsLayout()
blueView.layoutIfNeeded()

Now blueView 's frame is set.

Answer 2

As paulvs said, in viewDidLoad your subviews do not have their frames set yet. So when, for example, you try to set your label frame

topViewLabel.frame = CGRect(x: redView.frame.size.width / 2, y: redView.frame.size.height / 2, width: 80, height: 80)

redview.frame has width and height 0.

These parameters will be calculated properly only in layoutSubviews.

So you can either set you labels frames in viewDidLayoutSubviews() method or (which I would do) use constraints for it. Something like

let topViewLabelConstraints: [NSLayoutConstraint] = [
    NSLayoutConstraint(item: topViewLabel, attribute: .centerX, relatedBy: .equal, toItem: redView, attribute: .centerX, multiplier: 1, constant: 0),
    NSLayoutConstraint(item: topViewLabel, attribute: .centerY, relatedBy: .equal, toItem: redView, attribute: .centerY, multiplier: 1, constant: 0)
]
redView.addConstraints(topViewLabelConstraints)

should do the trick.