具有不同对齐子视图的 UIStackview答案

【问题标题】：UIStackview with differently aligned subviews具有不同对齐子视图的 UIStackview
【发布时间】：2016-03-21 14:16:51
【问题描述】：

我想将蓝色和紫色视图对齐到屏幕中心，我想将绿色视图对齐到屏幕左侧：

这是我的代码：

view.backgroundColor = UIColor.orangeColor()

//Stackview: 
let stackView   = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(stackView)

stackView.topAnchor.constraintEqualToAnchor(self.view.topAnchor).active = true
stackView.leftAnchor.constraintEqualToAnchor(self.view.leftAnchor).active = true
stackView.rightAnchor.constraintEqualToAnchor(self.view.rightAnchor).active = true

stackView.axis  = UILayoutConstraintAxis.Vertical
stackView.alignment = .Center

//Blue view: 
let blueBox = UIView()
stackView.addArrangedSubview(blueBox)
blueBox.backgroundColor = UIColor.blueColor()
blueBox.heightAnchor.constraintEqualToConstant(140).active = true
blueBox.widthAnchor.constraintEqualToConstant(140).active = true

//Inner stackview that contains the green view: 
let greenBoxContainer = UIStackView()
let greenBox = UIView()
stackView.addArrangedSubview(greenBoxContainer)
greenBoxContainer.addArrangedSubview(greenBox)
greenBoxContainer.alignment = .Leading

//Green view:
greenBox.backgroundColor = UIColor.greenColor()
greenBox.widthAnchor.constraintEqualToConstant(120).active = true
greenBox.heightAnchor.constraintEqualToConstant(120).active = true

//Purple view: 
let purpleView = UIView()
stackView.addArrangedSubview(purpleView)
purpleView.backgroundColor = UIColor.purpleColor()
purpleView.heightAnchor.constraintEqualToConstant(50.0).active = true
purpleView.widthAnchor.constraintEqualToConstant(50.0).active = true

重复一遍，我怎样才能将绿色视图的左边缘与屏幕的左边缘对齐？

我试过这个：

greenBoxContainer.widthAnchor.constraintEqualToAnchor(stackView.widthAnchor).active = true

但它只会将绿色视图拉伸到屏幕的长度。

【问题讨论】：

标签： ios autolayout uikit uistackview

【解决方案1】：

一种方法是添加间隔视图：

let greenBox = UIView()
stackView.addArrangedSubview(greenBoxContainer)
greenBoxContainer.addArrangedSubview(greenBox)

let spacer = UIView()
greenBoxContainer.addArrangedSubview(spacer)
spacer.rightAnchor.constraintEqualToAnchor(greenBoxContainer.rightAnchor).active = true

greenBoxContainer.widthAnchor.constraintEqualToAnchor(stackView.widthAnchor).active = true
greenBox.backgroundColor = UIColor.greenColor()
greenBox.widthAnchor.constraintEqualToConstant(120).active = true
greenBox.heightAnchor.constraintEqualToConstant(120).active = true

请注意，我不再设置greenBoxContainer 的对齐方式，因此它默认为.Fill。因此spacer 的右边缘被刷新到内部stackview 的右边缘，它占据了所有的宽度，给greenBox 留下了足够的空间来满足它的宽度约束。

但这是一种解决方法，我希望能够指定对齐方式而不必创建间隔视图..

【讨论】：