0

I have a view with three components. In the interface builder, I set all three with equal width.

In the code, I want to hide the middle component under certain conditions and then expend the rest two to take the extra space. I tried to expose the width constrain of the middle component to the code and then set the "constant" property of constrain to 0 which is not working.

Can anyone please advise if there is an easy way to achieve my goal?

Thanks

Please see the attached screen mockup for the idea

Joe
  • 59
  • 8
  • You've set a outlet to the width autolayout contraint'? Can you read the value in the debugger to make sure your outlet is attached properly? Also, make sure you call 'layoutIfNeeded()` after making your change: https://stackoverflow.com/a/42669920/3708242 – wottle Apr 20 '18 at 18:00
  • I have done this. Seems this only work when we set the width with a fixed value. the multiplier is not working in this way. – Joe Apr 20 '18 at 19:12

1 Answers1

2

Have you looked at embedding all three components in a UIStackview? You could set the distribution to fillEqually and then just use removeArrangedSubView to do what you're talking about. No worrying about constraints. Here's a really trivial example (just throw a stack view and button on a storyboard):

class ViewController: UIViewController {

    @IBOutlet weak var stackView: UIStackView!

    let view1 = UIView()
    let view2 = UIView()
    let view3 = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        stackView.distribution = .fillEqually

        view1.backgroundColor = .red
        stackView.addArrangedSubview(view1)

        view2.backgroundColor = .green
        stackView.addArrangedSubview(view2)

        view3.backgroundColor = .blue
        stackView.addArrangedSubview(view3)
    }

    @IBAction func remove(_ sender: Any) {
        stackView.removeArrangedSubview(view2)
    }
}
Mark Thormann
  • 2,522
  • 1
  • 21
  • 23
  • Solved my problem. Thanks. Never thought to use the UIStackView before. – Joe Apr 20 '18 at 19:11
  • 1
    @Joe Stack view is a perfect solution for something quick and lean. However, if you want to control the entire animation--the speed and timing of the middle view's disappearance and the speed and timing of the outer views' expansion--make the width constraints of the outer views instance properties, animate the middle view's alpha to 0, and in the completion handler, update the constraints and animate `containerView.layoutIfNeeded()`. But I'm a control freak. – trndjc Apr 20 '18 at 19:22
  • i have a solution with minimal change to your existing implementation. You don't need to change the code where you are changing middle view width constraint to 0. You just remove equal width relations from middle view. Only let the left and right view take equal width. Now in this case to your middle view either set it 0 or total width/3 when you need it. quick solution. – Mahesh Agrawal Apr 24 '18 at 06:32