iosswiftlabelstackview

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


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)
    }
}

img


Solution

  • 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)
        }
    }