iosios5toolbariphotouitoolbaritem

Button in iPhoto that reveal another sliding toolbar


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.sstatic.net/dKYZq.png


Solution

  • 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?