UIViewController half screen "drawer slide" animation

Question

I am trying to have a UIViewController that appears with a "slide" animation from the right. Not like a Push segue, not like the Facebook app. I want the new ViewController to slide ON TOP of the current one (not push it away), but only cover PART of the screen, leaving the other part showing the first ViewController.

What I have tried: The closest that I have gotten is by creating a custom segue with the following:

- (void)perform
{
    __block UIViewController *src = (UIViewController *) self.sourceViewController;
    __block UIViewController *dst = (UIViewController *) self.destinationViewController;

    CATransition* transition = [CATransition animation];
    transition.duration = .50;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    transition.type = kCATransitionMoveIn;
    transition.subtype = kCATransitionFromRight;

    [src.navigationController.view.layer addAnimation:transition forKey:@"SwitchToView1"];
    [src.navigationController pushViewController:dst animated:NO];
}

This achieves the animation that I am going for, but it covers the entire first ViewController. How would I make it stop at a certain point and not cover the entire thing?

I am using Storyboards, and I this is my first time trying any sort of new animation.

Hello i also need to implement same thing, can you please give me some initial idea on which class i place this code? — sandeep tomar, Jun 14 '16 at 06:36

score 12 · Accepted Answer · edited Sep 20 '14 at 18:31

12

You can try doing it in your source view controller, and changing the frame for your destnation (the x axis) something like:

- (void) perform {    
    UIViewController *dst = (UIViewController *) self.destinationViewController;

    [dst.view setFrame:CGRectMake(160, 0, YOUR_DST_WIDTH, YOUR_DST_HEIGHT)];

    //your animation stuff...

    [self addChildViewController:dst]; 
    [self.view addSubview:dst.view]; 
    [dst didMoveToParentViewController:self]; 
}

And that should do it!

Let me know if it didn't...

UPDATE!:

@CaptJak Hey, sorry that didn't work out for you.. I wrote the following code, and it works without any problems here.. I linked it to a button click.. try it and let me know! (PS: I added animations too!).

ViewController *tlc = [self.storyboard instantiateViewControllerWithIdentifier:@"MainViewController"];
[tlc.view setFrame:CGRectMake(-320, 0, self.view.frame.size.width, self.view.frame.size.height)];

[self addChildViewController:tlc];
[self.view addSubview:tlc.view];
[tlc didMoveToParentViewController:self];

[UIView animateWithDuration:0.3 animations:^{
    [tlc.view setFrame:CGRectMake(-160, 0, self.view.frame.size.width, self.view.frame.size.height)];
}];

edited Sep 20 '14 at 18:31

klefevre

8,595
7
42
71

answered Jul 21 '13 at 17:48

Albara

1,306
8
14

Nope, doesn't work. I am not creating the dst VC programmatically and `self.destinationViewController` doesn't work if I put in my source VC. My code above was from a `UIStoryBoardSegue` subclass (hence the source and destinationViewcontroller). Doing the above also won't give me animation... – CaptJak Jul 21 '13 at 18:30
do you have any more suggestions? – CaptJak Jul 21 '13 at 21:11
Hope, you don't mind me asking, but is there a way to turn this animation and presentation into a segue? I want to use it again, but in a different scenario and I would like to pass the data via the `prepareForSegue` method. – CaptJak Jul 22 '13 at 15:53
@CaptJak No not at all! .. Umm I don't think there's an easy way to do it.. That I know. But If were to do it, I'd go with something like https://github.com/John-Lluch/SWRevealViewController and play around with it a bit. It is same as the one in Facebook, but I believe you can modify it. Hope you get it to work! All the best! – Albara Jul 22 '13 at 16:30
I figured it out, pretty simple actually. I'll post it as another answer – CaptJak Jul 22 '13 at 16:31
@Mr_bem can you help me to remove this child so that i can see my parent view controller. I already tried `[tlc willMoveToParentViewController:nil]; [tlc.view removeFromSuperview]; [tlc removeFromParentViewController];` – Anish Apr 29 '14 at 11:50
Can we cover up navigation bar with the new view? – Chanchal Raj Jul 02 '15 at 12:34
After adding, how to remove that view from main view using toggle button? – Ram S Mar 31 '16 at 11:11

CaptJak · Answer 2 · 2016-01-31T13:57:14.377

Using the answer given by Albara, I was able to also create a segue with the same animation. The custom segue is as follows:

- (void)perform
{
    UIViewController *src = (UIViewController *)self.sourceViewController;
    UIViewController *dst = (UIViewController *)self.destinationViewController;

    [dst.view setFrame:CGRectMake(380, 0, dst.view.frame.size.width, dst.view.frame.size.height)];

    [src addChildViewController:dst];
    [src.view addSubview:dst.view];
    [dst didMoveToParentViewController:src];

    [UIView animateWithDuration:0.5 animations:^{
        [dst.view setFrame:CGRectMake(300, 0, src.view.frame.size.width, src.view.frame.size.height)];
    }];

}

Just a matter of renaming, really.

sir how will i remove this view using uigesturerecongniton? – sandeep tomar Jun 14 '16 at 06:52 — sandeep tomar, Jun 14 '16 at 06:52

score 2 · Answer 3 · answered May 26 '14 at 14:40

I just created NDOverlayViewController to do something like this. Actually it can overlay/slide one view controller over another from any edge with variable offset, extent and animation options. I created it as an experiment but maybe it will be helpful to somebody?

UIViewController half screen "drawer slide" animation

3 Answers3

Linked