Constraints for progress bar and label together in IOS Swift

Question

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 to 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 the full width of the screen - some space on either end of it. Initially, I started by putting constraints to show them side by side and it worked. However, for the other two conditions when I try to modify existing constraints during run time, it is messing up and not working as expected. Any pointers on how the constraints should look like for these scenarios. Attached is an image of a progress bar and label side by side

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

For this purpose

Progress bar constraints

Label Constraints

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

For this purpose

Progress bar constraints

Label Constraints

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

This one is bit tricky but not much difficult, Set constraints according to our first problem, and add one extra constraint along with others, Trailing Space to superview, Stroyboard will show you error, don't worry. Create an outlet for Progressbar trailing space both constraints now in your Swift/objc file and on runtime activate one constraint and deactivate other according to your logic. Along with showing/hiding your label. Like this

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

Answer 2

Add a horizontal UIStackview and add a UIProgressView and a UILabel. Set label text alignment to center.

Add top, bottom, leading, trailing constraints to the stackview. Don't add height constraint to the stackview. Add height constraint to the label.

Change stackview configuration as

And change the styles by changing stackview's axis and hiding/showing the label as follows

@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
}