StackView 未以编程方式向左对齐

Question

我以编程方式制作的 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 做到这一点，但似乎没有取得多大成就。

Answer 1

设置：

    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)

Answer 2

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

使用它，您可以 show/hide 图像视图具有一致的左对齐。

这里是使用故事板的快速设置。如您所见，除了最后 UIView 个名称 "Blue Dynamic Width View" 之外，所有图像的宽度都设置为 60。

Answer 3

情侣选项...

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

2) 约束堆栈视图前导、尾随和底部；限制第一个子视图的宽度和高度；将其他子视图的宽度和高度限制为第一个子视图； give stack Distribution: 等间距;添加额外的清晰子视图以添加最多 4 个子视图。

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

StackView 未以编程方式向左对齐

StackView Not Aligning To The Left Programmatically

ios

stackview

swift

uistackview