CODEWITHSUNDEEP
swiftautolayoutuistackview
jhnferraris
jhnferraris

Reputation: 1401

Nested Stack Views: Child Stack View is not inside its parent stack view when attaching it programmatically

I'm trying to implement nested stack views in which one stack view is inside another stack view. I've based my code here. My current code is here below.

@IBOutlet weak var verticalStackView: UIStackView!
let blueImageView = UIImageView()
blueImageView.backgroundColor = UIColor.blueColor()
blueImageView.image = UIImage(named: "just some image")
blueImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

let greenImageView = UIImageView()
greenImageView.backgroundColor = UIColor.greenColor()
greenImageView.image = UIImage(named: "just some image")
// This is just from SnapKit
greenImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

let stackView = UIStackView()
stackView.axis = UILayoutConstraintAxis.Horizontal
stackView.distribution = UIStackViewDistribution.EqualSpacing
stackView.alignment = UIStackViewAlignment.Center
stackView.spacing = 16.0
stackView.addArrangedSubview(blueImageView)
stackView.addArrangedSubview(greenImageView)
stackView.translatesAutoresizingMaskIntoConstraints = false;
// This is just from SnapKit
verticalStackView.snp_makeConstraints { (make) in
  make.height.equalTo(70)
}
verticalStackView.addSubview(stackView)

When I tried running it looks this way.

Just the image

As you can see, the sub stack view stackView is below the parent stack view (verticalStackView) in the hierarchy. But the positioning is off.

I'm quite new with Swift, AutoLayout and StackViews. Anyone that can help point out what I'm missing here?

Thanks!

Upvotes: 3

Views: 2928

Answers (2)

simply_me
simply_me

Reputation: 384

greenImageView.heightAnchor.constraint(equalToConstant: 34).isActive = true greenImageView.widthAnchor.constraint(equalToConstant: 34).isActive = true

and it will be solved

Upvotes: 0

jhnferraris
jhnferraris

Reputation: 1401

So I've figured out the solution after some reading..

@IBOutlet weak var verticalStackView: UIStackView!
let blueImageView = UIImageView()
blueImageView.backgroundColor = UIColor.blueColor()
blueImageView.image = UIImage(named: "buttonFollowCheckGreen")
blueImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

let greenImageView = UIImageView()
greenImageView.backgroundColor = UIColor.greenColor()
greenImageView.image = UIImage(named: "buttonFollowCheckGreen")
greenImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

let firstLineStackView = UIStackView()
firstLineStackView.axis = UILayoutConstraintAxis.Horizontal
firstLineStackView.distribution = UIStackViewDistribution.Fill
firstLineStackView.alignment = UIStackViewAlignment.Center
firstLineStackView.spacing = 8.0

firstLineStackView.addArrangedSubview(blueImageView)
firstLineStackView.addArrangedSubview(greenImageView)
firstLineStackView.translatesAutoresizingMaskIntoConstraints = false;

let redImageView = UIImageView()
redImageView.backgroundColor = UIColor.redColor()
redImageView.image = UIImage(named: "buttonFollowCheckGreen")
redImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

verticalStackView.addArrangedSubview(firstLineStackView)

I just had to use addArrangedSubview instead of addSubview and let Auto layout do the rest. Just to fix the positioning and size of the image views, I've also modified the alignment of the verticalStackView from fill to leading.

Upvotes: 1

Related Questions