Search code examples
cocoa-touchuiviewcore-animation

UIView Animation animates position but not width


I'm trying to transform a UISearchBar, like in Mobile Safari: touch in the search field and it grows while the location field shrinks.

My current animation to alter the width and position of the search field only animates the position: just before it slides to the right place, it simply snaps out to the right width. Here's my code:

[UIView beginAnimations:@"searchGrowUp" context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationDuration:0.5f];
[UIView setAnimationDelegate:self];

CGFloat findFieldWidth = findField.frame.size.width;
CGFloat urlFieldWidth = urlField.frame.size.width;
CGRect findFieldFrame = findField.frame;
CGRect urlFieldFrame = urlField.frame;

findFieldFrame.origin.x = findFieldFrame.origin.x - 150.0f;
findFieldFrame.size.width = findFieldWidth + 150.0f;
urlFieldFrame.size.width = urlFieldWidth - 150.0f;

urlField.frame = urlFieldFrame;
findField.frame = findFieldFrame;

[UIView commitAnimations];

I've modified this code slightly for the sake of presenting it here, but I hope this gives the gist.

Any guesses as to why this is happening would be appreciated!

Cheers, Aaron.


Solution

  • I figured it out thanks to this post: Changing the size of the UISearchBar TextField?

    Turns out the contents of a UISearchBar don't resize properly along with the outer layer. So you have to call -layoutSubviews: within the animation block after the frame is set on the searchbar. So the block ends like:

    [findField setFrame:CGRectMake(findField.bounds.origin.y, findField.bounds.origin.y, findFieldWidth, findField.bounds.size.height)];
    [findField layoutSubviews];
    
    [UIView commitAnimations];
    

    Props to Nick Farina!