Вложенные элементы стека: представление дочернего стека не находится в представлении его родительского стека при его программном программировании

Question

Я пытаюсь реализовать вложенные представления стека, в которых одно представление стека находится в другом представлении стека. Я основал свой код here. Мой текущий код приведен ниже.

@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) 

Когда я попытался запустить, он выглядит так.

Как вы можете видеть, вид stackView стек к югу находится ниже точки зрения родительского стека (verticalStackView) в иерархии. Но позиционирование отключено.

Я совершенно новый с Swift, AutoLayout и StackViews. Любой, кто может помочь указать, что мне здесь не хватает?

Спасибо!

Answer 1

Так я понял, решение после некоторого чтения ..

@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) 

Я просто должен был использовать addArrangedSubview вместо addSubview и пусть Автокомпоновка делать все остальное. Чтобы исправить расположение и размер изображений, я также изменил alignment вертикальногоStackView от fill до leading.

Answer 2

greenImageView.heightAnchor.constraint (equalToConstant: 34) .isActive = истинной greenImageView.widthAnchor.constraint (equalToConstant: 34) .isActive = истинная

и она будет решена