Swift: Stack View not showing complete subviews - ios

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.

Answer 1

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:

Answer 2

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