Animating constraints is breaking other constraints - ios

Question

I have the following tableview at the bottom of my view
It has a height constraint (priority 250) and a constraint to the bottom of the view (priority 1000). The height constraint points to a `IBOutlet in my view controller.
I want to change the height of the table view from 44.0f to 7*44.0f, so what I am doing is this;
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
if (self.categoriesShown) {
[self hideCategories];
} else {
[self showCategories];
}
self.categoriesShown = !self.categoriesShown;
}
- (void)showCategories
{
self.categoriesHeightConstraint.constant = self.categories.count * 44.0f;
}
- (void)hideCategories
{
self.categoriesHeightConstraint.constant = 44.0f;
}
It works fine. But when I'm trying to animating all this with the following code:
- (void)showCategories
{
[self.categoryTableView layoutIfNeeded];
[UIView transitionWithView:self.categoryTableView duration:0.3f options:UIViewAnimationOptionCurveEaseOut animations:^{
self.categoriesHeightConstraint.constant = self.categories.count * 44.0f;
[self.categoryTableView layoutIfNeeded];
} completion:nil];
}
- (void)hideCategories
{
[self.categoryTableView layoutIfNeeded];
[UIView transitionWithView:self.categoryTableView duration:0.3f options:UIViewAnimationOptionCurveEaseOut animations:^{
self.categoriesHeightConstraint.constant = 44.0f;
[self.categoryTableView layoutIfNeeded];
} completion:nil];
}
Then the constraints between the tableview and the bottom of the view is somehow broken and this is what I get when I show and then hide the tableview
Does anyone know why, the constraint is broken but only when I try to animate the changes?
Update: UIButton Constraints
Both buttons have width and height constraints as well a a constraint to the bottom of the view. The button on the left has a leading constraint to the view. The one of the right has a trailing constraint to the view. The also both have a horizontal spacing constraint to the table view as mentioned above.

Answer 1

I think your problem is in this method call:
[UIView transitionWithView:self.categoryTableView duration:0.3f options:UIViewAnimationOptionCurveEaseOut animations:^{
self.categoriesHeightConstraint.constant = 44.0f;
[self.categoryTableView layoutIfNeeded];
} completion:nil];
This should do what you're looking for:
self.categoriesHeightConstraint.constant = 44.0f;
[UIView animateWithDuration:0.3f animations:^{
[self.view layoutIfNeeded];
//This is assuming the method is called from a view controller.
//You need to call layoutIfNeeded on the superview of what you're animating
}];
Also, Apple documentation says it's good form to make an extra [self.view layoutIfNeeded] call before you change the constraint so that any incomplete constraint changes and be updated. I'll leave that up to you though.

Answer 2

So I think I got the functionality you're looking for:
I gave the table view a height constraint that matched the top of the buttons, but it could be anything.
Then I get the calculated height the table should be and set it:
tableArray = [[NSMutableArray alloc]init];
[tableArray addObject:#"Row 1"];
[tableArray addObject:#"Row 2"];
etc.......
double newHeight = ([tableArray count] * 44);
CGRect newFrame = CGRectMake(basicTable.frame.origin.x, basicTable.frame.origin.y, basicTable.frame.size.width, newHeight);
[basicTable setFrame:newFrame];
And then for your animation I used [UIView animateWithDuration] as shown:
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
tableHgtConst.constant = newHeight;
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
}];
I just left the bottom constraint alone, then changing the height constraint to match the height forces the table up instead of down.
Screens:
Simulator: http://i.stack.imgur.com/T7MBr.png
Code File: http://i.stack.imgur.com/GGOkq.png