显示从顶部向下滑动的半屏视图

时间:2014-01-15 06:18:21

标签: ios objective-c animation uiview

我有一个mapView,其大小为(320,182)。按下UIBarButtonItem后,我想显示此mapView从屏幕顶部向下滑动。为此,我编写了这样的代码。

    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];
    }

这将显示从屏幕顶部向下滑动的地图视图。但是,如何在第二次按下UIBarButtonItem时关闭mapView?此外,我还想在mapView之外点击mapView。

2 个答案:

答案 0 :(得分:2)

这是您要求的基本实现。但它会成功。

#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

答案 1 :(得分:0)

只需反转动画(您应该在更现代的块方法中执行):

rect.origin.y = -182; 
[UIView animateWithDuration:1.0 animations^{
    self.mapView.frame = rect;
}