How to animate UIBarButtonItem to slide on the UIToolbar from the left? - ios

Question

In my iOS app I have a media player with UIToolbar for the controls. I want to make UIBarButtonItem slide from the left onto the UIToolbar as I touch on the player screen.
This is what I've tried, and it does add the UIBarButtonItem from the left, but there is no animation part.
// create new button
UIBarButtonItem* b = [[UIBarButtonItem alloc] initWithTitle:#"b"
style:UIBarButtonItemStyleBordered
target:self
action:nil];
NSMutableArray* temp = [toolbar.items mutableCopy]; // store the items from UIToolbar
NSMutableArray* newItems = [NSMutableArray arrayWithObject:b]; // add button to be on the left
[newItems addObjectsFromArray:temp]; // add the "old" items
[toolbar setItems:newItems animated:YES];
Any kind of help is highly appreciated!

Answer 1

I had a similar issue where the designer wanted that kind of animation in a navbar.
Assuming that your app does not need the other buttons to move, then you can do it like this:
// create a UIButton instead of a toolbar button
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setTitle:#"b" forState:UIControlStateNormal];
// Save the items *before* adding to them
NSArray *items = toolbar.items;
// Create a placeholder view to put into the toolbar while animating
UIView *placeholderView = [[UIView alloc] initWithFrame:button.bounds];
placeholderView.backgroundColor = [UIColor clearColor];
[toolbar setItems:[items arrayByAddingObject:[[UIBarButtonItem alloc] initWithCustomView:placeholderView]]
animated:NO];
// get the position that is calculated for the placeholderView which has been added to the toolbar
CGRect finalFrame = [toolbar convertRect:placeholderView.bounds fromView:placeholderView];
button.frame = CGRectMake(-1*button.bounds.size.width, finalFrame.origin.y, button.bounds.size.width, button.bounds.size.height);
[toolbar addSubview:button];
[UIView animateWithDuration:duration
animations:^{ button.frame = finalFrame; }
completion:^(BOOL finished) {
// swap the placeholderView with the button
[toolbar setItems:[items arrayByAddingObject:[[UIBarButtonItem alloc] initWithCustomView:button]]
animated:NO];
}];
If your app does need to move the other buttons, then it's a bit trickier b/c you have to use only customView bar button items and get the initial position of all of them, pull them into the toolbar (and out of the list of items), animate them, and then put everything back. (Easy, right?) Good luck!