6

I would like to develop an app with a menu which looks like the ios Linkedin app one. Like this (the left picture)

enter image description here

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 !

4

3 回答 3

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;
}
}
于 2012-04-13T12:43:04.247 回答
0

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.

于 2012-04-08T19:16:48.303 回答
0

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.

于 2012-04-11T12:47:27.963 回答