Question

I would like to implement a menu as shown above. I’m a total iOS newbie. I’ve been searching for that kind of control since couple of days.

Can someone guide me step by step, from scratch?

Answer 1

You can implement the above in following steps :-

1>Left Menu view is a UIView added as a subview with various cutom UIButtons over it added as subview.

2>Initially you have to set the frame so that only a particular part of the view is shown(Panel Part).

3> On the click of indicator button , expand the frame to its full to show the buttons.

4>On next click i.e(odd clicks) collase the frame.

Above animation can be achieved using simple UIView Animation.

Sample code(Original frame width=300,Height 300) :-

yourMenuView.frame=CGRectMake(0,10,100,300);

[yourViewController addSubview:yourMenuView];

-(IBAction)expandMenu:(id)sender
{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
CGRect frame=yourMenuView.frame;
frame.size.width+=200;
yourMenuView.frame=frame;
[myview removeFromSuperview];
[UIView commitAnimations];
}

-(IBAction)collapseMenu:(id)sender
{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
CGRect frame=yourMenuView.frame;
frame.size.width-=200;
yourMenuView.frame=frame;
[myview removeFromSuperview];
[UIView commitAnimations];

}