When adding labels to the stackView, instead of 5 labels, it will add 4. Swift

Question

I need labels to appear on the screen depending on the number of objects in the symbols array, there are 5 objects in the array, and 4 labels on the screen(as in the screenshot), what is the problem? The code is attached below

class ViewController: UIViewController {

    var symbols = ["1", "2","3", "4", "5"]
    
    let mySpacing: CGFloat = 5.0

    let widthLabelInFormula = 50

    let formulaStackView = UIStackView()

    var symbolLabels: [UILabel] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let widthFormula: CGFloat = CGFloat(50 * symbols.count - symbols.count * 50)
        formulaStackView.axis = .horizontal
        formulaStackView.alignment = .fill
        formulaStackView.distribution = .fillEqually
        formulaStackView.spacing = mySpacing
        formulaStackView.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
        
        view.addSubview(formulaStackView)
    
        // add constraints
        formulaStackView.translatesAutoresizingMaskIntoConstraints = false
        formulaStackView.heightAnchor.constraint(equalToConstant: 50).isActive = true
        formulaStackView.widthAnchor.constraint(equalToConstant: widthFormula).isActive = true
        formulaStackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 250).isActive = true
    
        
        addLabels(formulaStackView: formulaStackView)
    }

    func addLabels(formulaStackView: UIStackView) {
        for _ in 0 ..< symbols.count {
            addLabel(formulaStackView: formulaStackView)
        }
        print(symbolLabels.count) // 5
    }

    func addLabel(formulaStackView: UIStackView) {
        let symbolLabel = UILabel()
        symbolLabel.backgroundColor = #colorLiteral(red: 0.09019608051, green: 0, blue: 0.3019607961, alpha: 1)
        symbolLabel.textColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
        symbolLabel.textAlignment = .center
        symbolLabel.font = UIFont.systemFont(ofSize: 20)
        symbolLabel.text = "?"
        
        // add constraints
        symbolLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
        symbolLabel.widthAnchor.constraint(equalToConstant: 50).isActive = true
        symbolLabel.translatesAutoresizingMaskIntoConstraints = false
    
        
        symbolLabels.append(symbolLabel)
        formulaStackView.addArrangedSubview(symbolLabel)
    }
}

Answer 1

The problem here is that you are setting the stack view's width to zero in this line:

let widthFormula: CGFloat = CGFloat(50 * symbols.count - symbols.count * 50) // 0

You can actually delete the line above and also this line:

formulaStackView.widthAnchor.constraint(equalToConstant: widthFormula).isActive = true

Because UIKit can set it automatically.

Finished code

class ViewController: UIViewController {
    var symbols = ["1", "2","3", "4", "5"]

    let mySpacing: CGFloat = 5.0

    let widthLabelInFormula = 50

    let formulaStackView = UIStackView()

    var symbolLabels: [UILabel] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
//        let widthFormula: CGFloat = CGFloat(50 * symbols.count - symbols.count * 50)
        formulaStackView.axis = .horizontal
        formulaStackView.alignment = .fill
        formulaStackView.distribution = .fillEqually
        formulaStackView.spacing = mySpacing
        formulaStackView.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
        
        view.addSubview(formulaStackView)

        // add constraints
        formulaStackView.translatesAutoresizingMaskIntoConstraints = false
        formulaStackView.heightAnchor.constraint(equalToConstant: 50).isActive = true
//        formulaStackView.widthAnchor.constraint(equalToConstant: widthFormula).isActive = true
        formulaStackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 250).isActive = true

        
        addLabels(formulaStackView: formulaStackView)
    }

    func addLabels(formulaStackView: UIStackView) {
        for _ in 0 ..< symbols.count {
            addLabel(formulaStackView: formulaStackView)
        }
        print(symbolLabels.count) // 5
    }

    func addLabel(formulaStackView: UIStackView) {
        let symbolLabel = UILabel()
        symbolLabel.translatesAutoresizingMaskIntoConstraints = false
        symbolLabel.backgroundColor = #colorLiteral(red: 0.09019608051, green: 0, blue: 0.3019607961, alpha: 1)
        symbolLabel.textColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
        symbolLabel.textAlignment = .center
        symbolLabel.font = UIFont.systemFont(ofSize: 20)
        symbolLabel.text = "?"
        
        // add constraints
        symbolLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
        symbolLabel.widthAnchor.constraint(equalToConstant: 50).isActive = true

        
        symbolLabels.append(symbolLabel)
        formulaStackView.addArrangedSubview(symbolLabel)
    }
}