How to facebook style transition
Asked Answered
C

2

6

Want to implement a view controller transition similar to used in facebook and many other apps, snapshot is attached. Will it require playing with CoreAnimation framework or is it available in the toolkit?

enter image description here

Cumulonimbus answered 11/7, 2012 at 13:23 Comment(3)
It's not available in Cocoa Touch, you will have to have to views and view controllers on screen and handle dragging the top one to the side yourself.Nicolle
any getting started stuff/resource?Cumulonimbus
Sorry. I don't know of any good resourceNicolle
B
4

You have to use CoreAnimation unless you want to import a 3rd part framework that someone suggested, but it is very simple to use CoreAnimation and I suggest you learn it because it is very powerful. Here is the simplest approach possible to give you an idea. You could structure it a little better yourself once you get a hang of it, to fit your needs:

In your viewcontroller have 2 views:

@interface yourViewController : UIViewController {
    // The facebook view in the example, this will be the view that moves.
    // Init this view with x=0 and let it cover the whole screen.
    IBOutlet UIView *topView; 

    // The fb menu in the example
    // Init this view so that it stays behind the topView.
    IBOutlet UIView *bottomView; 

    BOOL menuVisible; // init to false in viewDidLoad!
}

Create them in interface builder, or by code or however you are used to. Make them overlap eachother so that you only see the topView, and let the buttomView stay behind it.

When the user presses the button to show the menu:

-(IBAction)menuButtonPressed:(id)sender {
    // Set up animation with duration 0.5 seconds
    [UIView beginAnimations:@"ToggleMenu" context:nil];
    [UIView setAnimationDuration:0.5];

    // Alter position of topView

    CGRect frame = topView.frame; 

    if (menuVisible) {
        frame.origin.x = 0;
        menuVisible = NO;
    } else {
        frame.origin.x = 300; //Play with this value
        menuVisible = YES;
    }

    topView.frame = frame;   

    // Run animation
    [UIView commitAnimations];
}

Of course, you should implement your own UIView subclasses for the "facebook view" and the "menu view" etc and use for topView and bottomView in the example above.

Busty answered 11/7, 2012 at 14:3 Comment(3)
Hi I'm also trying to implement the same functionality in my iphone application. I used two UIViews as you have suggested and used the toggleMenu animation to slide the topView. But since I've a UINavigationController it won't slide with the topView, it simply remains in the same position. what can I do about this? Appreciate your suggestions a lot.Sunn
Since this is a "do it yourself"-solution, it will be complicated it to combine it with UINavigationController. If you can't live with the NavigationController staying on top of your view, you could either stop using it and make your own navigation bar (I would recommend this) or you could just hide it while the menu is visible. I'm sure there is some way to push it aside aswell, but I don't see enough value in that to try to find out how...Busty
@user1280436 you try using navigationcontroller.view to animate then the navigation bar also animate. please try it I am not done this before.Aniela
L
1

Take a look at this, it might give you a starting point: https://github.com/Inferis/ViewDeck/

Locoweed answered 11/7, 2012 at 13:30 Comment(1)
Hi I'm also trying to implement the same functionality in my iphone application. I used two UIViews as suggested and used the toggleMenu animation to slide the topView. But since I've a UINavigationController it won't slide with the topView, it simply remains in the same position. what can I do about this? Appreciate your suggestions a lot. Thanks in advance.Sunn

© 2022 - 2024 — McMap. All rights reserved.