IOS Swift 中进度条和标签的约束

Question

我需要根据某些条件在水平方向上相邻显示进度条和标签，而根据不同的条件，我需要在垂直方向下显示标签和进度条。第三个条件是我隐藏标签，只显示进度条。对于第三种情况，我希望进度条占据屏幕的整个宽度——在它的两端都有一些 space。最初，我开始通过设置约束来并排显示它们并且它起作用了。但是，对于其他两种情况，当我尝试在运行时间内修改现有约束时，它搞砸了并且没有按预期工作。关于这些场景的约束应该是什么样子的任何指示。附件是进度条和标签并排的图片

Answer 1

I need to show a progress bar and a label adjacent to each other horizontally based on some condition and based on a different condition

为了这个目的

进度条限制条件

标签约束

I need show label and progress bar one below the other vertically

为了这个目的

进度条限制条件

标签约束

Third condition is I hide the label and show only the progress bar. For the third condition, I want the progress bar to occupy full width of the screen - some space on either ends of it

这个有点棘手，但难度不大，根据我们的第一个问题设置约束，并添加一个额外的约束和其他约束，尾随 Space 到 superview，Stroyboard 会显示错误，不要担心。现在在您的 Swift/objc 文件中和运行时，为 Progressbar 尾随 space 两个约束创建一个出口，并根据您的逻辑激活一个约束并停用另一个约束。连同 showing/hiding 您的标签。像这样

    NSLayoutConstraint.isActive = false; // or true. Here NSLayoutConstraint is your reference to constraint outlet.

Answer 2

添加一个水平的 UIStackview 并添加一个 UIProgressView 和一个 UILabel。将标签文本对齐设置为居中。

向堆栈视图添加顶部、底部、前导和尾随约束。不要向堆栈视图添加高度约束。为标签添加高度限制。

将堆栈视图配置更改为

并通过更改 stackview 的轴和 hiding/showing 标签来更改样式，如下所示

@IBAction func style1(_ sender: Any) {
    stackView.axis = .horizontal
    stackView.alignment = .center
    label.isHidden = false
}
@IBAction func style2(_ sender: Any) {
    stackView.axis = .vertical
    stackView.alignment = .fill
    label.isHidden = false
}
@IBAction func style3(_ sender: Any) {
    stackView.axis = .horizontal
    stackView.alignment = .center
    label.isHidden = true
}

IOS Swift 中进度条和标签的约束

Constraints for progress bar and label together in IOS Swift

ios

swift

uislider

uiprogressview

uiprogressbar