Show half sreen view that slides down from the top - ios

Question

I have a mapView which has a size of (320, 182). Once the UIBarButtonItem is pressed, I would like to show this mapView sliding down from top of the screen. To achieve this, I have written a code like this.
UIBarButtonItem *mapButton = [[UIBarButtonItem alloc]
initWithImage:[UIImage imageNamed:#"map_1.png"]
style:UIBarButtonItemStylePlain
target:self
action:#selector(showMap:)
];
self.navigationItem.rightBarButtonItem = mapButton;
-(void)showMap:(id)sender{
self._mapView = [[MKMapView alloc] initWithFrame:CGRectMake(0,-182,320,182)];
[self.scrollView addSubview:self._mapView];
//show view
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:1.0];
CGRect rect = [self._mapView frame];
rect.origin.y = 0;
[self._mapView setFrame:rect];
[UIView commitAnimations];
}
This will show the map view which slides down from top of the screen. However, how do I make the mapView dismiss when the UIBarButtonItem been pressed on the second time? Moreover, I also would like to dismiss the mapView when tapped outside the mapView.

Answer 1

This is a vary basic implementation of what you are asking for. But it will do the trick.
#import "ViewController.h"
#import "MKMapView.h"
#interface ViewController () {
MKMapView *mapView;
BOOL showingMap;
}
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//
UIBarButtonItem *mapButton = [[UIBarButtonItem alloc]
initWithTitle:#"Map"
style:UIBarButtonItemStylePlain
target:self
action:#selector(toggleMap:)
];
self.navigationItem.rightBarButtonItem = mapButton;
UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(dismissView:)];
[self.view addGestureRecognizer:tapRecognizer];
}
-(void)toggleMap:(id)sender{
if (!mapView) {
mapView = [[MKMapView alloc] initWithFrame:CGRectMake(0,-182,320,182)];
mapView.backgroundColor = [UIColor redColor]; // red background for testing
[self.view addSubview:mapView];
}
CGRect rect = mapView.frame;
rect.origin.y = showingMap ? -rect.size.height : 0;
showingMap = !showingMap;
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
mapView.frame = rect;
} completion:^(BOOL finished) {
}];
}
- (void)dismissView:(UITapGestureRecognizer*)recognizer {
// bail out since map isn't showing
if (!showingMap) return;
CGPoint pt = [recognizer locationInView:self.view];
UIView *v = [self.view hitTest:pt withEvent:nil];
if (![v isKindOfClass:[MKMapView class]]) {
NSLog(#"dismiss");
[self toggleMap:nil];
return;
}
}
#end

Answer 2

Just reverse the animation (which you should do in the more modern block methods):
rect.origin.y = -182;
[UIView animateWithDuration:1.0 animations^{
self.mapView.frame = rect;
}