iOS Slide up menu

Question

I am attempting to create a menu system similar to the target app for iPhone. Here is what the menu looks like:

_{(source: iclarified.com)}

I have been searching the internet and have not found a lot of information. To the best of my knowledge, I will have to create a UIView that is the menu, offset the view and detect when it is touched to slide up. These buttons in the menu view will have to load other views just like a tab bar controller would while keeping the menu tab to slide up at the bottom. Slide menu up, tap button for where you want to go, load that view while sliding the button back down.

The animations seem straight forward, its making it function like the tab bar controller and always stay in view and also how to detect the sliding of the menu (maybe something with UIScrollView)?

Any help would be great, no idea where to start.

Answer 1

Don't think complex, logic is very simple. set its height and width in such a way that it is off the screen. try this approaches and then give your feedback. check http://blogsbits.com this method will help. hit and try method can be use to check these variables.

Answer 2

Steps up to 5 contain the creation of the subview itself, but if you are only interested on the dragging events read from step five, which is about the panGestureRecognizer.

1. Create a custom UIView, I have also created a delegate protocol to inform the viewController when an action occurs on the subview. Depending on how much complicated your subview will be, you may want to create a xib file with the same name for that. Let's call it filterView from now on.

2. Create two methods like "hide" and "show" on the filterView. If you do not want to have a button (namely the small button with the arrow, I ll call it dropdownButton) to close and open the filterView, you may skip this step, but I strongly recommend to implement them. What you have to do is to animate filterView.frame.origin.y to

   • [[UIScreen mainScreen] bounds].size.height - dropDownButton.frame.height to hide the filterView

   • [[UIScreen mainScreen] bounds].size.height - filterView.frame.size.height to show it.

If requested I can also send code for that animations.

3. Open the xib file for the UIViewController and add a UIView, so that only its dropdown button will be visible. Click the view and change its class to filterView using the rightmost pane in the interface builder. At this step you should be able to see your filtersView's tip on the bottom of the page if you did everything correctly. If not, the filterView.xib file is probably not correctly connected to filterView source code files.

4 . Import the FilterView in the ViewController and connect as IBOutlet & synthetize it. Implement the delegate protocol if you have written one. If you have buttons on the filterView, you will need it later on. The delegate protocol should include optional messages like

-(void) featuresButtonTappedOnFilterView: (FilterView *) filterView;

and in the implementation you should do what you have to do in the viewController, like opening another viewController.

5 . On the viewControllers xib file create a panGestureRecognizer and add it to your filterView. PanGestureRecognizer is a gestureRecognizer which will handle the dragging events. At first the whole filterView will be able to dragged around by clicking any point on it, we will get to that later. Connect the gestureRecognizer as IBOutlet and create an IBAction (preferably with a better name) like:

-(IBAction)_panRecogPanned:(id)sender;

In the viewDidLoad method of the ViewController dont forget to set the delegate as:

[_panRecog setDelegate:self];

6 . Implement other states for more power. but stateChanged will be sufficient at first.

- (IBAction)_panRecogPanned:(id)sender {

    switch ([(UIPanGestureRecognizer*)sender state]) {


    case UIGestureRecognizerStateBegan: { } break;
    case UIGestureRecognizerStateChanged: {

       if ( [((UIPanGestureRecognizer *)sender) locationInView:_filterView].y > dropDownButton.frame.height ) 
            return; // Only drag if the user's finger is on the button

        CGPoint translation = [_panRecog translationInView:filterView];

      //Note that we are omitting translation.x, otherwise the filterView will be able to move horizontally as well. Also note that that MIN and MAX were written for a subview which slides down from the top, they wont work on your subview.
        CGRect newFrame = _panRecog.view.frame;
        //newFrame.origin.y = MIN (_panRecog.view.frame.origin.y + translation.y, FILTER_OPEN_ORIGIN_Y);
        //newFrame.origin.y = MAX (newFrame.origin.y, FILTER_INITIAL_ORIGIN_Y);
        newFrame.origin.y = _panRecog.view.frame.origin.y + translation.y;
        _panRecog.view.frame = newFrame;

        [_panRecog setTranslation:CGPointMake(0, 0) inView:self.view];


    } break;

    //Remember the optional step number 2? We will use hide/ show methods now:
    case UIGestureRecognizerStateEnded:
    case UIGestureRecognizerStateCancelled: {

    //CGPoint velocity = [_panRecog velocityInView:_panRecog.view];
    //Bonus points for using velocity when deciding what to do when if the user lifts his finger

        BOOL open;

        /*
        if (velocity.y < -600.0) {
            open = NO;
        }

        else if (velocity.y >= 600.0) {
            open = YES;
        } else
        */

        if ( _panRecog.view.frame.origin.y > (FILTER_OPEN_ORIGIN_Y + FILTER_INITIAL_ORIGIN_Y) / 2 ) {
            open = YES;
        }

        else {
            open = NO;
        }


        if (open == YES) { 

            [_filterView show];
        }

        else {      
            [_filterView hide];

        }

    } break;

    default:
        break;
}

}

Note: My filter view was on the top of the page instead of the bottom, as it is the subview will move out of the page borders. Comment out the MAX and MIN statements to fix that, I am to lazy to write them by myself. The code is modified after copy&paste, it may (and probably will) contain typos.

Answer 3

I think you're trying to make it too complicated - just make a view and position in such a way that it is mostly off the screen, with just a tip showing up. When you touch the tip, move the view to be fully visible, and put that movement within an animation block.

The menu items could be just UIButtons with custom graphics on that view.