How can I animate the height constraint of a UIPickerView?

Question

I've learned that the way to animate constraints in Cocoa Touch is to just set them and then put [self.view layoutIfNeeded] in an animation block, like so:

self.someViewsHeightConstraint = 25.0;
[UIView animateWithDuration:0.5 animations:^{
    [self.view layoutIfNeeded];
}];

This is working fine, for example with a simple UIView. However, it does not work with a UIPickerView. It just snaps into the new position without animating.

Any ideas why this might be the case? What ways are there to work around this?

The effect I'm going for is that the Picker View should shrink to just show the chosen item, as the user goes on to input other things. One idea I had is to make a snapshotted view and animate that instead, but I couldn't quite get that working either.

@martynmlostekk I did not, but I have not fully explored the answers below. — skagedal, Nov 13 '16 at 12:31

score 0 · Answer 1 · answered Feb 11 '16 at 19:58

I found trying to animate the height or the placement constraint of a UIPickerView to be problematic. However, doing transforms seems to work well -- even if you have Auto Layout Constraints everywhere, including in the view to be transformed.

Here's an example of what works for me. In this case, I've placed the picker view inside a blurring effects view -- but you don't even need to put your picker view inside another view to animate it.

In the code below, when I call show, it animates up vertically. When I call the hide method, it animates downwards.

- (void)showPickerViewAnimated:(BOOL)animated;
{
    __weak MyViewController *weakSelf = self;

    [UIView animateWithDuration:(animated ? kPickerView_AppearanceAnimationDuration : 0.0)
                      delay:(animated ? kPickerView_AppearanceAnimationDelay : 0.0)
                    options:(UIViewAnimationOptionCurveEaseInOut)
                 animations:^{
                     weakSelf.pickerViewContainerView.transform = CGAffineTransformMakeTranslation(0,0);
                 }
                 completion:^(BOOL finished) {
                     [weakSelf.view layoutIfNeeded];
                 }];
}


- (void)hidePickerViewAnimated:(BOOL)animated;
{
    __weak MyViewController *weakSelf = self;

    [UIView animateWithDuration:(animated ? kPickerView_DisappearanceAnimationDuration : 0.0)
                      delay:(animated ? kPickerView_DisappearanceAnimationDelay : 0.0)
                    options:(UIViewAnimationOptionCurveEaseInOut)
                 animations:^{
                     weakSelf.pickerViewContainerView.transform = CGAffineTransformMakeTranslation(0, kPickerView_Height);
                 }
                 completion:^(BOOL finished) {
                     [weakSelf.view layoutIfNeeded];
                 }];

}

Note: This technique is working for me just fine using iOS 9.2.1. — idStar, Feb 11 '16 at 19:59

score 0 · Answer 2 · answered Oct 13 '16 at 13:03

picker view, If you have added constraint To TopLayout for yPosition remove it and add constraint to bottom layout instead. That will solve the problem. here is my code and its working:

self.timePickerHeightConstraint.constant = pickerIsClosed ? 216 : 0;
[UIView animateWithDuration:0.5 animations:^{
      [self.view layoutSubviews];
}  completion:^(BOOL finished){  
}];

How can I animate the height constraint of a UIPickerView?

2 Answers2