ios - 使用自动布局将多个标签居中

Question

是否可以使用自动布局将这些倒计时标签居中？

我有一个带有四个标签的居中 View (如深蓝色所示):minuteValue、minuteUnit、secondValue 和 secondUnit。

当倒计时低于 60 秒时，分钟标签将被隐藏。是否可以将计时器居中，无论它处于什么状态？即我是否有 2 个或 4 个标签？

如果没有人知道自动布局解决方案，我很乐意编写代码，但我更喜欢尽可能使用自动布局来实现这一点。

Answer 1

如果我没理解错的话，您希望它们始终居中，无论是两个还是四个标签。在这种情况下，我会为他们添加一个 contentView。所以，你会收到这样的东西:

YourBlueView -> ContainerView -> FourLabels

接下来，将您的 containerView 置于 YourBlueView 的中心:

yourBlueView.addConstraint(NSLayoutConstraint(item: yourBlueView, attribute: .centerY, relatedBy: .equal, toItem: containerView, attribute: .centerY, multiplier: 1, constant: 0))
yourBlueView.addConstraint(NSLayoutConstraint(item: yourBlueView, attribute: .centerX, relatedBy: .equal, toItem: containerView, attribute: .centerX, multiplier: 1, constant: 0))

最后一步，在 containerView 中为您的标签添加约束，例如

containerView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[firstLabel]|", metrics: nil, views: ["firstLabel": firstLabel]))
containerView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[firstLabel][secondLabel][thirdLabel][fourthLabel]|",options: [.alignAllCenterY], metrics: nil, views: ["firstLabel": firstLabel,"secondLabel": secondLabel,"thirdLabel": thirdLabel,"fourthLabel": fourthLabel]))

现在，当您将标签宽度设置为 0 时，它们将保持在中心。

另一种解决方案，更清晰，但需要 UIStackView。将所有标签放入其中，因为您正在使用 Storyboard，可以使用按钮嵌入堆栈，在您的 Storyboard窗口下方，并将此堆栈 View 置于蓝色 View 的中心。任务完成