LinkedIn menu iPhone app - iphone

Question

I would like to develop an app with a menu which looks like the ios Linkedin app one. Like this (the left picture)
There is 4 glimpses (miniatures) which are associated to the four principal views.
And the miniature always shows the updated state of the view.
I would like to know we can do a menu like this one ?
Thanks in advance for your help !
Sébastien ;)
So why do you put the 4 UIView in an other UIView and not directly on the UIViewController ?
And you talked about buttons but there are only UIView in your example ? I wonder if the 4 buttons are on the 4 views and are transparent in order to apply the transformation.
Do you have a code example for the transformation ?
Thanks a lot for your help !

Answer 1

- (void)viewDidLoad {
[super viewDidLoad];
[self.navigationItem setTitle:#"About us"];
presentationViewController = [[PresentationViewController alloc] initWithNibName:#"PresentationViewController" bundle:nil];
secteursViewController = [[SecteursViewController alloc] initWithNibName:#"SecteursViewController" bundle:nil];
engagementsViewController = [[EngagementsViewController alloc] initWithNibName:#"EngagementsViewController" bundle:nil];
interviewsViewController = [[InterviewsViewController alloc] initWithNibName:#"InterviewsViewController" bundle:nil];
presentationApercu = presentationViewController.view;
secteursApercu = secteursViewController.view;
videosApercu = interviewsViewController.view;
engagementsApercu = engagementsViewController.view;
presentationApercu.transform = CGAffineTransformMakeScale(1/(320./107), 1/(367./122.));
presentationApercu.frame = CGRectMake(27., 18., presentationApercu.frame.size.width, presentationApercu.frame.size.height);
secteursApercu.transform = CGAffineTransformMakeScale(1/(320./107), 1/(367./122.));
secteursApercu.frame = CGRectMake(185., 18., secteursApercu.frame.size.width, secteursApercu.frame.size.height);
videosApercu.transform = CGAffineTransformMakeScale(1/(320./107), 1/(367./122.));
videosApercu.frame = CGRectMake(27., 196., videosApercu.frame.size.width, videosApercu.frame.size.height);;
engagementsApercu.transform = CGAffineTransformMakeScale(1/(320./107), 1/(367./122.));
engagementsApercu.frame = CGRectMake(185., 196., engagementsApercu.frame.size.width, engagementsApercu.frame.size.height);
presentationApercu.tag = 1;
secteursApercu.tag = 2;
videosApercu.tag = 3;
engagementsApercu.tag = 4;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[presentationApercu addGestureRecognizer:tap];
[tap release];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[secteursApercu addGestureRecognizer:tap];
[tap release];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[videosApercu addGestureRecognizer:tap];
[tap release];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[engagementsApercu addGestureRecognizer:tap];
[tap release];
[self.view addSubview:presentationApercu];
[self.view addSubview:secteursApercu];
[self.view addSubview:videosApercu];
[self.view addSubview:engagementsApercu];
}
#pragma mark - IBActions
- (void)zoomReverse {
[self.navigationItem setLeftBarButtonItem:nil];
UITapGestureRecognizer *tap = nil;
switch (tagEnCours) {
case 1:
[self.view bringSubviewToFront:presentationApercu];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[presentationApercu addGestureRecognizer:tap];
[tap release];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
presentationApercu.transform = CGAffineTransformMakeScale(1/(320./107), 1/(367./122.));
presentationApercu.frame = CGRectMake(27., 18., presentationApercu.frame.size.width, presentationApercu.frame.size.height);
[UIView commitAnimations];
break;
case 2:
[self.view bringSubviewToFront:secteursApercu];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[secteursApercu addGestureRecognizer:tap];
[tap release];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
secteursApercu.transform = CGAffineTransformMakeScale(1/(320./107), 1/(367./122.));
secteursApercu.frame = CGRectMake(185., 18., secteursApercu.frame.size.width, secteursApercu.frame.size.height);
[UIView commitAnimations];
break;
case 3:
[self.view bringSubviewToFront:videosApercu];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[videosApercu addGestureRecognizer:tap];
[tap release];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
videosApercu.transform = CGAffineTransformMakeScale(1/(320./107), 1/(367./122.));
videosApercu.frame = CGRectMake(27., 196., videosApercu.frame.size.width, videosApercu.frame.size.height);
[UIView commitAnimations];
break;
case 4:
[self.view bringSubviewToFront:engagementsApercu];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[engagementsApercu addGestureRecognizer:tap];
[tap release];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
engagementsApercu.transform = CGAffineTransformMakeScale(1/(320./107), 1/(367./122.));
engagementsApercu.frame = CGRectMake(185., 196., engagementsApercu.frame.size.width, engagementsApercu.frame.size.height);
[UIView commitAnimations];
break;
default:
break;
}
}
- (void)zoomAction:(UITapGestureRecognizer *)sender {
[self.navigationItem setLeftBarButtonItem:[[[UIBarButtonItem alloc] initWithTitle:#"About us" style:UIBarButtonItemStyleDone target:self action:#selector(zoomReverse)] autorelease]];
tagEnCours = sender.view.tag;
switch (sender.view.tag) {
case 1:
[self.view bringSubviewToFront:presentationApercu];
[presentationApercu removeGestureRecognizer:[presentationApercu.gestureRecognizers objectAtIndex:0]];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
presentationApercu.transform = CGAffineTransformIdentity;
presentationApercu.frame = CGRectMake(0., 0., presentationApercu.frame.size.width, presentationApercu.frame.size.height);
[UIView commitAnimations];
break;
case 2:
[self.view bringSubviewToFront:secteursApercu];
[secteursApercu removeGestureRecognizer:[secteursApercu.gestureRecognizers objectAtIndex:0]];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
secteursApercu.transform = CGAffineTransformIdentity;
secteursApercu.frame = CGRectMake(0., 0., secteursApercu.frame.size.width, secteursApercu.frame.size.height);
[UIView commitAnimations];
break;
case 3:
[self.view bringSubviewToFront:videosApercu];
[videosApercu removeGestureRecognizer:[videosApercu.gestureRecognizers objectAtIndex:0]];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
videosApercu.transform = CGAffineTransformIdentity;
videosApercu.frame = CGRectMake(0., 0., videosApercu.frame.size.width, videosApercu.frame.size.height);
[UIView commitAnimations];
break;
case 4:
[self.view bringSubviewToFront:engagementsApercu];
[engagementsApercu removeGestureRecognizer:[engagementsApercu.gestureRecognizers objectAtIndex:0]];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
engagementsApercu.transform = CGAffineTransformIdentity;
engagementsApercu.frame = CGRectMake(0., 0., engagementsApercu.frame.size.width, engagementsApercu.frame.size.height);
[UIView commitAnimations];
break;
default:
break;
}
}

Answer 2

I think that this application is structured as follows:
UIViewController
| UIView
| UIView
| UIView
| UIView
| UIView
The first contains the main view controller (the one containing the 4 buttons), these are reduced by (I assume) a transform and then the View is superimposed by a view of the secondary, the second requirement.
This is what I think, because if you try to scroll the table and immediately go back, even in the thumbnail view scrolling.
Hope that was of some help.

Answer 3

Consider this as a draft from which to take inspiration:
//.h
#import <UIKit/UIKit.h>
#interface ViewController : UIViewController
#end
//.m
#import "ViewController.h"
#interface ViewController ()
#property (nonatomic, strong) UIView *v1;
#property (nonatomic, strong) UIView *v2;
#property (nonatomic, strong) UIView *v3;
#property (nonatomic, strong) UIView *v4;
#end
#implementation ViewController
#synthesize v1 = _v1;
#synthesize v2 = _v2;
#synthesize v3 = _v3;
#synthesize v4 = _v4;
- (void)viewDidLoad {
[super viewDidLoad];
_v1 = [[UIView alloc] initWithFrame:self.view.bounds];
_v2 = [[UIView alloc] initWithFrame:self.view.bounds];
_v3 = [[UIView alloc] initWithFrame:self.view.bounds];
_v4 = [[UIView alloc] initWithFrame:self.view.bounds];
[_v1 setBackgroundColor:[UIColor redColor]];
[_v2 setBackgroundColor:[UIColor yellowColor]];
[_v3 setBackgroundColor:[UIColor blueColor]];
[_v4 setBackgroundColor:[UIColor greenColor]];
_v1.transform = CGAffineTransformMakeScale(1/(320./140.), 1/(460./210.));
_v1.frame = CGRectMake(10., 10., _v1.frame.size.width, _v1.frame.size.height);
_v2.transform = CGAffineTransformMakeScale(1/(320./140.), 1/(460./210.));
_v2.frame = CGRectMake(170., 10., _v2.frame.size.width, _v2.frame.size.height);
_v3.transform = CGAffineTransformMakeScale(1/(320./140.), 1/(460./210.));
_v3.frame = CGRectMake(10., 240., _v3.frame.size.width, _v3.frame.size.height);
_v4.transform = CGAffineTransformMakeScale(1/(320./140.), 1/(460./210.));
_v4.frame = CGRectMake(170., 240., _v4.frame.size.width, _v4.frame.size.height);
_v1.tag = 1;
_v2.tag = 2;
_v3.tag = 3;
_v4.tag = 4;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[_v1 addGestureRecognizer:tap];
[tap release];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[_v2 addGestureRecognizer:tap];
[tap release];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[_v3 addGestureRecognizer:tap];
[tap release];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[_v4 addGestureRecognizer:tap];
[tap release];
[self.view addSubview:_v1];
[self.view addSubview:_v2];
[self.view addSubview:_v3];
[self.view addSubview:_v4];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn setFrame:CGRectMake(10, 10, 100, 30)];
[btn setTitle:#"Close" forState:UIControlStateNormal];
btn.tag = 1;
[btn addTarget:self action:#selector(zoomReverse:) forControlEvents:UIControlEventTouchUpInside];
[_v1 addSubview:btn];
btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn setFrame:CGRectMake(10, 10, 100, 30)];
[btn setTitle:#"Close" forState:UIControlStateNormal];
btn.tag = 2;
[btn addTarget:self action:#selector(zoomReverse:) forControlEvents:UIControlEventTouchUpInside];
[_v2 addSubview:btn];
btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn setFrame:CGRectMake(10, 10, 100, 30)];
[btn setTitle:#"Close" forState:UIControlStateNormal];
btn.tag = 3;
[btn addTarget:self action:#selector(zoomReverse:) forControlEvents:UIControlEventTouchUpInside];
[_v3 addSubview:btn];
btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn setFrame:CGRectMake(10, 10, 100, 30)];
[btn setTitle:#"Close" forState:UIControlStateNormal];
btn.tag = 4;
[btn addTarget:self action:#selector(zoomReverse:) forControlEvents:UIControlEventTouchUpInside];
[_v4 addSubview:btn];
}
- (void)zoomReverse:(UIButton *)sender {
UITapGestureRecognizer *tap = nil;
switch (sender.tag) {
case 1:
[self.view bringSubviewToFront:_v1];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[_v1 addGestureRecognizer:tap];
[tap release];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
_v1.transform = CGAffineTransformMakeScale(1/(320./140.), 1/(460./210.));
_v1.frame = CGRectMake(10., 10., _v1.frame.size.width, _v1.frame.size.height);
[UIView commitAnimations];
break;
case 2:
[self.view bringSubviewToFront:_v2];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[_v2 addGestureRecognizer:tap];
[tap release];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
_v2.transform = CGAffineTransformMakeScale(1/(320./140.), 1/(460./210.));
_v2.frame = CGRectMake(170., 10., _v2.frame.size.width, _v2.frame.size.height);
[UIView commitAnimations];
break;
case 3:
[self.view bringSubviewToFront:_v3];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[_v3 addGestureRecognizer:tap];
[tap release];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
_v3.transform = CGAffineTransformMakeScale(1/(320./140.), 1/(460./210.));
_v3.frame = CGRectMake(10., 240., _v3.frame.size.width, _v3.frame.size.height);
[UIView commitAnimations];
break;
case 4:
[self.view bringSubviewToFront:_v4];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(zoomAction:)];
[tap setNumberOfTapsRequired:1];
[_v4 addGestureRecognizer:tap];
[tap release];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
_v4.transform = CGAffineTransformMakeScale(1/(320./140.), 1/(460./210.));
_v4.frame = CGRectMake(170., 240., _v4.frame.size.width, _v4.frame.size.height);
[UIView commitAnimations];
break;
default:
break;
}
}
- (void)zoomAction:(UITapGestureRecognizer *)sender {
switch (sender.view.tag) {
case 1:
[self.view bringSubviewToFront:_v1];
[_v1 removeGestureRecognizer:[_v1.gestureRecognizers objectAtIndex:0]];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
_v1.transform = CGAffineTransformIdentity;
_v1.frame = CGRectMake(0., 0., _v1.frame.size.width, _v1.frame.size.height);
[UIView commitAnimations];
break;
case 2:
[self.view bringSubviewToFront:_v2];
[_v2 removeGestureRecognizer:[_v2.gestureRecognizers objectAtIndex:0]];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
_v2.transform = CGAffineTransformIdentity;
_v2.frame = CGRectMake(0., 0., _v2.frame.size.width, _v2.frame.size.height);
[UIView commitAnimations];
break;
case 3:
[self.view bringSubviewToFront:_v3];
[_v3 removeGestureRecognizer:[_v3.gestureRecognizers objectAtIndex:0]];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
_v3.transform = CGAffineTransformIdentity;
_v3.frame = CGRectMake(0., 0., _v3.frame.size.width, _v3.frame.size.height);
[UIView commitAnimations];
break;
case 4:
[self.view bringSubviewToFront:_v4];
[_v4 removeGestureRecognizer:[_v4.gestureRecognizers objectAtIndex:0]];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
_v4.transform = CGAffineTransformIdentity;
_v4.frame = CGRectMake(0., 0., _v4.frame.size.width, _v4.frame.size.height);
[UIView commitAnimations];
break;
default:
break;
}
}
- (void)viewDidUnload {
[super viewDidUnload];
[self setV1:nil];
[self setV2:nil];
[self setV3:nil];
[self setV4:nil];
}
#end
I hope it can help.