StackView 未以编程方式向左对齐答案

【问题标题】：StackView Not Aligning To The Left ProgrammaticallyStackView 未以编程方式向左对齐
【发布时间】：2018-11-21 11:10:06
【问题描述】：

我以编程方式制作的 StackView 如下所示：

两个子视图：

三个子视图：

四个子视图：

这是我的代码：

    cameraButton.setImage(UIImage(named: "blueCamera"), for: .normal)
    cameraButton.addTarget(self, action: #selector(cameraTapped), for: .touchUpInside)
    cameraButton.widthAnchor.constraint(equalToConstant: 70.0).isActive = true
    calenderButton.setImage(UIImage(named: "calender"), for: .normal)
    calenderButton.addTarget(self, action: #selector(calanderTapped), for: .touchUpInside)
    calenderButton.widthAnchor.constraint(equalToConstant: 70.0).isActive = true

    stackView.frame = CGRect(x: 0, y: 0, width: scrollView.frame.size.width, height: scrollViewHeight)
    stackView.axis = .horizontal
    stackView.spacing = 5
    stackView.semanticContentAttribute = .forceLeftToRight
    stackView.alignment = .fill // .leading .firstBaseline .center .trailing .lastBaseline
    stackView.distribution = .equalSpacing // .fillEqually .fillProportionally .equalSpacing .equalCentering
    stackView.addArrangedSubview(calenderButton)
    stackView.addArrangedSubview(cameraButton)
    stackView.backgroundColor = UIColor(red: 0.161, green: 0.165, blue: 0.188, alpha: 1.00)
    scrollView.addSubview(stackView)

有什么问题： StackView 没有将子视图向左对齐。

我想要达到的目标：

我希望所有的子视图都向左对齐，我尝试使用stackView.semanticContentAttribute = .forceLeftToRight 来做到这一点，但这似乎并没有多大效果。

【问题讨论】：

试试 stackView.alignment = .leading
@Alexander Nope.
带走semanticContentAttribute？
您需要将 4 个视图放入具有清晰颜色的堆栈视图中，然后在这些视图中添加按钮

标签： ios swift uistackview stackview

【解决方案1】：

您可以通过使用具有动态宽度的透明UIView 来实现此目的。所以除了这个UIView之外，每个图像视图都会有宽度限制。还将stackView.alignment 和stackView..distribution 属性设置为.fill。

使用它，您可以显示/隐藏具有一致左对齐的图像视图。

这里是使用情节提要的快速设置。如您所见，所有图像的宽度都设置为 60，除了最后一个 UIView 名称“蓝色动态宽度视图”。

【讨论】：

【解决方案2】：

设置：

    stackView.alignment = .leading

然后删除这个：

    stackView.distribution = .equalSpacing

您的代码将如下所示：

    cameraButton.setImage(UIImage(named: "blueCamera"), for: .normal)
    cameraButton.addTarget(self, action: #selector(cameraTapped), for: .touchUpInside)
    cameraButton.widthAnchor.constraint(equalToConstant: 70.0).isActive = true
    calenderButton.setImage(UIImage(named: "calender"), for: .normal)
    calenderButton.addTarget(self, action: #selector(calanderTapped), for: .touchUpInside)
    calenderButton.widthAnchor.constraint(equalToConstant: 70.0).isActive = true

    stackView.frame = CGRect(x: 0, y: 0, width: scrollView.frame.size.width, height: scrollViewHeight)
    stackView.axis = .horizontal
    stackView.spacing = 5
    stackView.alignment = .leading    
    stackView.addArrangedSubview(calenderButton)
    stackView.addArrangedSubview(cameraButton)
    stackView.backgroundColor = UIColor(red: 0.161, green: 0.165, blue: 0.188, alpha: 1.00)
    scrollView.addSubview(stackView)

【讨论】：

【解决方案3】：

几个选项...

1) 约束堆栈视图Leading 和Bottom，但不限制Trailing；约束第一个子视图的宽度和高度；将其他子视图的宽度和高度限制为第一个子视图；给堆栈视图所需的间距。

2) 约束堆栈视图Leading、Trailing 和Bottom；约束第一个子视图的宽度和高度；将其他子视图的宽度和高度限制为第一个子视图；给栈分布：等间距；添加额外的清晰子视图以添加最多 4 个子视图。

3) 与 2 相同的约束，但添加 4 个清晰的子视图，然后添加按钮作为这些子视图的子视图。

【讨论】：