Swift: Stack View not showing complete subviews

Question

I have a subview:

Here is the sub class of that view:

class MyView: UIView {
    public init(){
        super.init(frame: .zero)
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}

On my main view controller I have a stackView:

if I add a single view to the stack view:

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    generaRedView()
}

func generaRedView() {
    let newView = MyView()
    newView.backgroundColor = .red
    stackView.addArrangedSubview(newView)
}

it looks just fine:

But I add two views to the stack view:

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        generaRedView()
        generaBlueView()
    }
    
    func generaRedView() {
        let newView = MyView()
        newView.backgroundColor = .red
        stackView.addArrangedSubview(newView)
    }
    
    func generaBlueView() {
        let newView = MyView()
        newView.backgroundColor = .blue
        stackView.addArrangedSubview(newView)
    }

The subviews are been compress:

My question to you guys is how can make the stackView respect the size of the subviews and increase the high of the stack view so the subviews can look normal and not compress?

I'll really appreciate your help.

Did you configure the stackView properly ? Please share your whole code. — AGM Tazim, Jul 01 '20 at 04:35
You have to add height of the Subviews which you are adding to the StackView. Or give static height to the StackView if you don't want to define height of the subviews. — Nexus, Jul 01 '20 at 04:58

score 3 · Accepted Answer · answered Jul 01 '20 at 05:40

First of all create a single method to create the MyView instance. Secondly, before adding the newView to stackView, add a height constraint to it, i.e.

func generateView(with color: UIColor, height: CGFloat) {
    let newView = MyView()
    newView.backgroundColor = color
    newView.translatesAutoresizingMaskIntoConstraints = false
    newView.heightAnchor.constraint(equalToConstant: height).isActive = true //here....
    stackView.addArrangedSubview(newView)
}

You can call the above method like,

generateView(with: .red, height: 80.0)
generateView(with: .blue, height: 180.0)

Screenshot:

score 2 · Answer 2 · edited Aug 04 '20 at 23:27

There are two things that you need to consider:

what is the height and width of your red and blue views? the code you included in your question does not show that these views has any frame you set other than .zero so first you need to give them proper height to get consider by UIStackView
You need to set UIStackView distribution.. how your views distribute in stackView and set constraint of stack such that dont fix its height.. if you fix UIStackView height it will try to layout subviews with in that height

So what you need is to give your views height constraint and set distribution of your stackView with not fixed height constraint:

func generaRedView() {
        let newView = MyView()
        newView.backgroundColor = .red

        newView.translatesAutoresizingMaskIntoConstraints = false
        newView.widthAnchor.constraint(equalToConstant: 100).isActive = true
        newView.heightAnchor.constraint(equalToConstant: 100).isActive = true
        stackView.addArrangedSubview(newView)
    }

This is how you give constraints to your view .... and remove fix Height constraint of stackView

there is no rocket science sir ... can you give your views height constraint ? — Jawad Ali, Jul 01 '20 at 05:06

Swift: Stack View not showing complete subviews

2 Answers2