0

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

1 Answers1

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?

mbm29414
  • 11,558
  • 6
  • 56
  • 87
  • So, typically in Interface Builder, you have a main view and you add all of your subViews to that. It doesn't have to be that way, however. You can add whatever you want ***outside*** of the main view. It shows up in the "Objects" hierarchy on the same level as the other views, and they are, in essence, unrelated. However, you can still create IBOutlet/IBAction connections. This way, the 2nd `UIToolbar` is unrelated to your main view until you programmatically call 'addSubview`. – mbm29414 May 02 '12 at 18:16
  • Alternatively, you could add the 2nd `UIToolbar` to your main view and position it so that it's off the screen. Then, you could simply manage/animate its frame to make it appear/disappear. I like to truly have it not on the screen, though, which is why I call `addSubview:` and `removeFromSuperview`. – mbm29414 May 02 '12 at 18:21
  • either way i can't put the second toolbar above the first one – Miguel Almeida May 03 '12 at 13:07
  • i have my first toolbar in a UITableViewController. I think that is the problem – Miguel Almeida May 07 '12 at 17:57
  • with a uitableviewcontroller i can do this? or i need to change to a uiviewcontroller? – Miguel Almeida May 15 '12 at 10:08
  • You probably want a `UIView` container that holds both the `UIToolbar` and the `UITableView`. – mbm29414 May 15 '12 at 12:06
  • No problem. If it **was** helpful, can I get an up vote and an accepted answer? ;-) Thanks! – mbm29414 May 17 '12 at 16:54