When I add uibuttons to stack view they appear on top of each other

Question

I'm developing a quiz app and I want to display a question with corresponding choices but only one right answer. The amount of corresponding for each question varies on the question (some have 2,3,4, etc.). The choices are displayed through UIButton's and each button is added to a UIStackView. The amount of buttons depends on how many possible choices the question has. For example, if the question has 2 choices then 2 buttons are allocated to the stackview.

However when I add a button to the stack view, each button is placed directly on top of each other but I want them to be spaced out vertically and evenly. Here is my current code:

        func viewConfiguration() {
    questionView.topAnchor.constraint(equalTo: headerView.bottomAnchor).isActive = true
    questionView.widthAnchor.constraint(equalTo: headerView.widthAnchor).isActive = true
    questionView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.385).isActive = true

    choicesView.topAnchor.constraint(equalTo: questionView.bottomAnchor).isActive = true
    choicesView.widthAnchor.constraint(equalTo: questionView.widthAnchor).isActive = true
    choicesView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

    // Adds question title label to questionVIew hierarchy
    let questionLabel = UILabel()
    questionLabel.translatesAutoresizingMaskIntoConstraints = false

    questionView.addSubview(questionLabel)

    questionLabel.backgroundColor = UIColor.yellow
    questionLabel.centerXAnchor.constraint(equalTo: questionView.centerXAnchor).isActive = true
    questionLabel.centerYAnchor.constraint(equalTo: questionView.centerYAnchor).isActive = true



    // Adds question choices to choicesView hierarchy
    var questionChoices = [UIButton]()
    var buttonStack: UIStackView = {
        var stack = UIStackView()
        stack.translatesAutoresizingMaskIntoConstraints = false
        stack.axis = .vertical
        stack.distribution = .fillEqually


        return stack
    }()

    let questionData = QuestionData()

    questionData.presentQuestion(label: questionLabel, buttons: &questionChoices)

    print("NUMBER OF BUTTONS IS --> \(questionChoices.count)")

    choicesView.addSubview(buttonStack)

    for button in questionChoices {
        buttonStack.addArrangedSubview(button)

    }


    buttonStack.heightAnchor.constraint(equalTo: choicesView.heightAnchor, multiplier: 0.875).isActive = true
    buttonStack.widthAnchor.constraint(equalTo: choicesView.widthAnchor, multiplier: 0.9).isActive = true
    buttonStack.topAnchor.constraint(equalTo: choicesView.topAnchor, constant: 15).isActive = true
    buttonStack.centerXAnchor.constraint(equalTo: choicesView.centerXAnchor).isActive = true



}

The blue section is a view that contains the stack view of buttons. The possible choices for the displayed question are "Here", "Anywhere", "Everywhere", "There", yet only the last choice is displayed. How can I make it so the choices are all viewable inside the stackview and aren't stacked on top of each other?

Screenshot of current functionality:enter image description here

Try adding a heightAnchor to the button before calling addArrangedSubview. — Don, Jul 02 '19 at 03:06
Could you give an code snippet example? I don't know the amount of buttons I will have until I run the function. — Lala Jansen, Jul 02 '19 at 17:19
@LalaJansen - tough to say from only the code you've shown. What does `presentQuestion()` do? See [mcve] — DonMag, Jul 02 '19 at 19:38
That's where the issue was, it was in the presentQuestion function. Thanks. — Lala Jansen, Jul 02 '19 at 22:44

When I add uibuttons to stack view they appear on top of each other

0 Answers0