This post is a continuation to my previous post. In that post I showed how to create a view and add a slide out animation just like facebook.
What we did so far...
In the last post we created a view and added two subviews to it 1. A mapview 2. A tableview. We also added a menu button in the navigation bar. Upon press of the menu button we presented the tableview from the left side of the screen using a ease-in animation option of the UIView. The following method performs the actual animation of the subviews:
-(void)menuButtonAction:(id)sender{
[UIView animateWithDuration:.25
delay:0
options:UIViewAnimationOptionCurveEaseIn
animations:^{
if(!self.tableViewVisible){
CGRect tableFrame = self.tableView.frame;
CGRect mapViewFrame = self.mkMapView.frame;
//show the table view first
self.tableViewVisible = YES;
//change the initial location of the map view
mapViewFrame.origin.x = tableFrame.size.width;
[self.mkMapView setFrame:mapViewFrame];
}else{
CGRect mapViewFrame = self.mkMapView.frame;
mapViewFrame.origin.x = 0.0;
[self.mkMapView setFrame:mapViewFrame];
self.tableViewVisible = NO;
}
}
completion:^(BOOL finished) {
}];
}
Animating the view with navigation bar
If you have noticed in the previous sample the navigation bar does not animate. It stays wherever it was. But in the facebook app, it does slide out the navigation bar as well. So how do we do it? Well...put the navigation bar in the view. Let's do it:
In the sample I have created a MainViewController which has it's two views that it wants to animate. This is how my storyboard looks like:
The main idea behind animating the view still remains the same. It uses UIView's animateWithDuration method over a duration of 0.25 second to animate the two views. During the animation primaryView's frame is changed and it's moved to the right side exposing the secondaryView underneath it. Because we are not hiding/unhiding the secondaryView, the new origin.x of the frame of the primaryView is calculated by subtracting the width of the secondaryView. For this reason you must set the width of the secondary view to the same amount by which you want your primaryView to be displaced.
The video shows what the code does:
Download Sample Project: SlidingNavigationBar
In the sample I have created a MainViewController which has it's two views that it wants to animate. This is how my storyboard looks like:
MainViewController has a topView as its view, topView has two main sub views 1. Primary View 2. Secondary View. These are the two views that we are going to animate.
Primary view has a navigation bar and a map view as its subviews. Navigation bar has a bar item (I used the system bookmark item because I could not find the correct menu image for my bar item in a such asmall time) which will actually trigger the slide out navigation.
Secondary View has a search bar and a collection view as its sub views. Secondary view is below the primary view in the view hierarchy.
The MainViewController.h file has two IBOutlet properties and an IBAction for the menu button action:
@interface MainViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIView *primaryView;
@property (strong, nonatomic) IBOutlet UIView *secondaryView;
- (IBAction)menuItemAction:(id)sender;
@end
The menu button action in the MainViewController.m file looks like this:
- (IBAction)menuItemAction:(id)sender {
[UIView animateWithDuration:.25
delay:0
options:UIViewAnimationOptionCurveEaseIn
animations:^{
if(!self.secondViewVisible){
CGRect secondaryViewFrame = self.secondaryView.frame;
CGRect primaryViewFrame = self.primaryView.frame;
//show the table view first
self.secondViewVisible = YES;
primaryViewFrame.origin.x = secondaryViewFrame.size.width;
//change the initial location of the map view
[self.primaryView setFrame:primaryViewFrame];
}else{
CGRect primaryViewFrame = self.primaryView.frame;
primaryViewFrame.origin.x = 0.0;
[self.primaryView setFrame:primaryViewFrame];
self.secondViewVisible = NO;
}
}
completion:^(BOOL finished) {
}];
}
The main idea behind animating the view still remains the same. It uses UIView's animateWithDuration method over a duration of 0.25 second to animate the two views. During the animation primaryView's frame is changed and it's moved to the right side exposing the secondaryView underneath it. Because we are not hiding/unhiding the secondaryView, the new origin.x of the frame of the primaryView is calculated by subtracting the width of the secondaryView. For this reason you must set the width of the secondary view to the same amount by which you want your primaryView to be displaced.
The video shows what the code does:
Download Sample Project: SlidingNavigationBar
No comments:
Post a Comment