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;
}
}