Button in iPhoto that reveal another sliding toolbar
-
02-06-2021 - |
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.
Solution
I got this to work using the following (Disclaimer: THIS MAY VIOLATE THE HIG!):
- I added a new, basic UIViewController.
- I added a UIToolbar to the view of the UIViewController. I connected this UIToolbar to a property in my UIViewController named "BaseToolbar".
- To "BaseToolbar", I added a button. I connected this button to an IBAction called "AddPressed:" in my UIViewController.
- 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".
- 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)
- Add Toolbar #1 (the one that is always on-screen) to the top of the view and position it like you want.
- Add Toolbar #2 (the one that slides on/of) underneath Toolbar #1 and build it out with the buttons you want.
- 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?
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow