button stackView spacing not working -Swift - Programmatically

Question

I'm adding a stackView in my viewcontroller in this way:

addSubview(stackView)
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.anchor(top: nameLabel.bottomAnchor, leading: leadingAnchor, bottom: bottomAnchor, trailing: trailingAnchor)
    
    
    let emotionsButton = EmotionButton()
    emotionsButton.translatesAutoresizingMaskIntoConstraints = false
    let contentButton = ContentsButton()
    contentButton.translatesAutoresizingMaskIntoConstraints = false
    
    
    
    stackView.axis = .horizontal
    stackView.alignment = .center
    stackView.distribution = .equalCentering
    stackView.spacing = 8
    
    stackView.addArrangedSubview(emotionsButton)
    stackView.addArrangedSubview(contentButton)
    
    emotionsButton.widthAnchor.constraint(equalToConstant: 91).isActive = true
    contentButton.widthAnchor.constraint(equalToConstant: 91).isActive = true
    
    emotionsButton.heightAnchor.constraint(equalToConstant: 83).isActive = true
    contentButton.heightAnchor.constraint(equalToConstant: 83).isActive = true

but the result I get is not the desired one; this is what I want:

This is what I get:

Using a stackview may work, but i suggest you can just create a UIVIew, and put two of your views inside it. And then central horizontally on the "UIView"(the parent view) — Edison Lo, Sep 15 '20 at 08:28

score 2 · Accepted Answer · answered Sep 15 '20 at 08:36

UIStackView tries to fill the entire width with its contents. So you have some options here

Center

Since the stackView's content size is based on its content, you should consider getting rid of the leading and trailing anchors and use a horizontal center instead. (You can keep one of them alongside with the center one to prevent it from overlapping the edges)

Dummy views

Another option is to add. dummy views at both sides of the stack view (inside), make them have clear color and let them be the last to hug. So. they. can. fill extra space.

Other options

There are other options (like not using the stack view at all) that you can implement to make it happen.

score 1 · Answer 2 · answered Sep 15 '20 at 08:36

If you want to do it on a stackview, you shouldnt need to configure the heightAnchor or widthAnchor of your subviews(emotionsButton, contentButton) accordingly.. All you need to configure is the height and width anchor for the stackView, and let it resize your subviews accordingly.

stackView.axis = .horizontal
stackView.alignment = .center
stackView.distribution = .equalCentering
stackView.spacing = 8

stackView.widthAnchor.constraint(equalToConstant: 91 * 2).isActive = true
stackView.heightAnchor.constraint(equalToConstant: 83).isActive = true

stackView.addArrangedSubview(emotionsButton)
stackView.addArrangedSubview(contentButton)

score 1 · Answer 3 · answered Sep 15 '20 at 08:38

1

Changing content hugging priority to .required might work.

stackView.setContentHuggingPriority(.required, for: .horizontal)

answered Sep 15 '20 at 08:38

Won

1,107
9
16

score 0 · Answer 4 · answered Sep 17 '21 at 04:26

0

If you are adding your arrangedSubViews after your stackview has been added. try setting your spacing after adding the new arrangedSubviews.

answered Sep 17 '21 at 04:26

Waylan Sands

321
3
11

button stackView spacing not working -Swift - Programmatically

4 Answers4

Center

Dummy views

Other options