Question

How can I develop a toolbar like this one, with a button that when it’s pressed reveals another toolbar (sliding on top of the current one)? This is a screenshot from the iPhoto application from Apple.

https://i.stack.imgur.com/dKYZq.png

Answer 1

I got this to work using the following (Disclaimer: THIS MAY VIOLATE THE HIG!):

1. I added a new, basic UIViewController.
2. I added a UIToolbar to the view of the UIViewController. I connected this UIToolbar to a property in my UIViewController named “BaseToolbar”.
3. To “BaseToolbar”, I added a button. I connected this button to an IBAction called “AddPressed:” in my UIViewController.
4. I added a UIToolbar to the UIViewController’s xib, BUT NOT ON THE UIViewController’s view. I just added it onto the design surface. I connected this UIToolbar to a property in my UIViewController named “SecondToolbar”.
5. To “SecondToolbar”, I added a button. I connected this button to an IBAction called “TrashPressed:” in my UIViewController.

I used the following code:

- (IBAction)AddPressed:(id)sender {
    CGRect secondCurrRect = [[self SecondToolbar] frame];
    [[self SecondToolbar] setFrame:CGRectMake(0, -1 * secondCurrRect.size.height, secondCurrRect.size.width, secondCurrRect.size.height)];
    [[self view] addSubview:[self SecondToolbar]];
    [[self view] bringSubviewToFront:[self SecondToolbar]];
    [UIView animateWithDuration:1.0
                     animations:^(void){
                         [[self SecondToolbar] setFrame:CGRectMake(0, 0, secondCurrRect.size.width, secondCurrRect.size.height)];
                     }];
}
- (IBAction)TrashPressed:(id)sender {
    CGRect secondCurrRect = [[self SecondToolbar] frame];
    [UIView animateWithDuration:1.0
                     animations:^(void){
                         [[self SecondToolbar] setFrame:CGRectMake(0, -1 * secondCurrRect.size.height, secondCurrRect.size.width, secondCurrRect.size.height)];
                     }
                     completion:^(BOOL finished) {
                         [[self SecondToolbar] removeFromSuperview];
                     }];
}

Using that code, the new UIToolbar slides on/off ON TOP OF the “base” UIToolbar.

---

Edit/Update

Let’s try a different tactic.
(This assumes you’re adding the UIToolbar objects to your xib at design time)

1. Add Toolbar #1 (the one that is always on-screen) to the top of the view and position it like you want.
2. Add Toolbar #2 (the one that slides on/of) underneath Toolbar #1 and build it out with the buttons you want.
3. Put the following line of code into your -(void)viewDidLoad method (this will move the second toolbar off-screen):

---

[[self Toolbar2] setFrame:
    CGRectMake(0,                                    // origin.x
               -[[self Toolbar2] frame].size.height, // origin.y
               [[self Toolbar2] frame].size.width,   // size.width (remains the same)
               [[self Toolbar2] frame].size.height)  // size.height (remains the same)
];

Then, use the code from above, but skip the calls to addSubview: and removeFromSuperview.

Does that make sense now?