Using NSLayoutConstraints to position a view outside the bounds of its superview - ios

Question

So I have a super view called self.content and I'm adding 2 subviews to it, namely self.bg1 and self.bg2 respectively. Initially I want self.bg2 to be sitting right outside the right bound of self.content. Users should be able to call in self.bg2 using a button. When the button is tapped self.bg1 moves to a position such that its right edge is touching the left edge of self.content. Here's the code that I've written, but it seems to only work when the user switches from self.bg1 to self.bg2(doesn't work backwards)
//BG1
self.bg1 = [[UIView alloc]init];
[self.bg1 setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.content addSubview:self.bg1];
//BG2
self.bg2 = [[UIView alloc]init];
[self.bg2 setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.content addSubview:self.bg2];
self.viewsDictionary = #{#"bg1":self.bg1,
#"bg2":self.bg2};
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:#"H:[bg1(%f)]",self.view.frame.size.width] options:0 metrics:nil views:self.viewsDictionary]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[bg1]|" options:0 metrics:nil views:self.viewsDictionary]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:#"H:[bg2(%f)]",self.view.frame.size.width] options:0 metrics:nil views:self.viewsDictionary]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[bg2]|" options:0 metrics:nil views:self.viewsDictionary]];
//self.bGConstraint is an NSArray
self.bGConstraint = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[bg1]-[bg2]" options:0 metrics:nil views:self.viewsDictionary];
[self.view addConstraints: self.bGConstraint];
And in the switchToBG1 method I have:
[self.view removeConstraint:[self.bGConstraint objectAtIndex:0]];
self.bGConstraint = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[bg1]-[bg2]" options:0 metrics:nil views:self.viewsDictionary];
[self.view addConstraints: self.bGConstraint];
Similarly in switchToBG2:
[self.view removeConstraint:[self.bGConstraint objectAtIndex:0]];
self.bGConstraint = [NSLayoutConstraint constraintsWithVisualFormat:#"H:[bg1]-[bg2]|" options:0 metrics:nil views:self.viewsDictionary];
[self.view addConstraints: self.bGConstraint];
Finally layoutIfNeeded in a UIView AnimationWithDuration...
*EDIT:
The animation when switching from BG1 to BG2 (i.e. left to right) is carried out successfully without any error, but when I try to go from right to left (BG2 back to BG1) the system throws me an Unable to simultaneously satisfy constraints. error message.
What am I doing wrong here? Thanks in advance!

Answer 1

What you are doing looks like the right idea, so there is probably just something wrong with your constraint-swapping logic, which causes something in your second constraint to conflict with something in your first set of constraints which are already there. To prevent that easily, structure it this way:
Up front, store all the constraints that position bg1 and bg2 for one position in one property, and all the constraints that position them for the other position in another property. Now when the time comes to swap, swap out all the old ones and swap in all the new ones. That way you will not confuse yourself so much, and you are guaranteed of consistency.
In other words, your code, which switches just one constraint, is trying to be too clever. It is better to keep it simple and stupid (and to have it work correctly)!