Implementing half screen animation

Question

I am planning to implement something similar to Facebook with a triple horizontal bar button on the left side tap on which slides the view more than half way right to show another view underneath it to select between various options like "Friends", "Messages", "News Feed" etc.

How should we implement that animation thingy. Any reference to some sample code will be good.

I am attaching the icon I am taking about.

enter image description here

Have a look at [Inferis ViewDeck](https://github.com/Inferis/ViewDeck). — Till, Sep 20 '12 at 21:54
I like this one much better, more Facebook like: http://www.cocoacontrols.com/platforms/ios/controls/ghsidebarnav — brynbodayle, Sep 20 '12 at 22:08

score 0 · Answer 1 · answered Jun 24 '13 at 05:44

Assuming you want your behavior to be exactly the same as Facebook's, I would implement it the following way. -First begin by adding the your views on the view controller in the proper order (the views on the bottom should be added first). For example, the tableview underneath would be added first, and then the content that "slides" on top would be added second to the view controller's view

-Then add a UIPanGestureRecognizer to the view on top that slides. The handler for this gesture should take the x component of the gesture and update the view on top accordingly. Add end cases so that you limit view's movement within a certain range.

-Lastly, fire a routine when the pan gesture ends to either fully "open" the view on top or fully "close" the view on top. This will simply be in another animation block. Here's a sample implementation of the handler for the pan:

- (void)pan:(UIPanGestureRecognizer *)gesture
{
float translation = [gesture translationInView:self.view].x;

//don't allow for moving topview further left than screen
if (self.sliderOpen == NO && translation < 0) {
    translation = 0;
} else if (self.sliderOpen == YES && translation < -OPEN_POS) {
    translation = -OPEN_POS;
}

[self.topView setFrame:CGRectMake(self.sliderOpen == YES ? OPEN_POS + translation : translation, self.topView.frame.origin.y, self.topView.frame.size.width, self.topView.frame.size.height)];

if (gesture.state == UIGestureRecognizerStateEnded) {
    //get position, then set slide to open or closed
    float endPosition = self.topView.frame.origin.x;

    //set transition sensitivity based on open/closed state
    if (self.sliderOpen == NO) {
        //here sensitivity causes more likely open state
        if (endPosition > OPEN_POS/3) {
            [self openSlider];
        } else {
            if (endPosition != 0) {
                [self closeSlider];
            }
        }

    } else {
        //here sensitivity causes more likely closed state
        if (endPosition > 2*OPEN_POS/3) {
            if (endPosition > OPEN_POS) {
                [self reOpenSlider];
            } else {
                [self openSlider];
            }
        } else {
            [self closeSlider];
        }
    }
}
}

The "topview" here is the view that slides on top. The openSlider and closeSlider methods are simply animation blocks that position the topview fully open or fully closed.

Implementing half screen animation

1 Answers1