3

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!

Community
  • 1
  • 1
jhnferraris
  • 1,361
  • 1
  • 12
  • 34

2 Answers2

1

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.

jhnferraris
  • 1,361
  • 1
  • 12
  • 34
0

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

and it will be solved

simply_me
  • 384
  • 1
  • 11