may 23

Muchos programas suelen tener el típico botón de información que al pulsarlo abre la pantalla de información del programa con una animación de rotación.
En este artículo vamos a ver como se puede hacer eso si tenemos un navigation bar y queremos que rote toda la vista.
Al final del artículo están disponibles para la descarga los ficheros del proyecto de ejemplo.

En el siguiente vídeo podéis ver el efecto que queremos conseguir:

Vamos a suponer que tenemos una app donde la primera vista es un tableview que se encuentra envuelto en un navigation bar.

Y queremos poner el botón de información en el navigation bar. Para eso escribiremos este código en el viewDidLoad del nuestro view controller principal:

- (void)viewDidLoad {
    [super viewDidLoad];
 
    self.title = @"Menu Inicial";
 
    UIButton* infoButton = [UIButton buttonWithType:UIButtonTypeInfoLight];
    [infoButton addTarget:self action:@selector(showAbout:) forControlEvents:UIControlEventTouchUpInside];
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:infoButton];
}

Y al pulsar el botón de información se ejecutará el siguiente método:

-(void)showAbout:(id)sender{
	AboutController *a = [[AboutController alloc] init];
 
	UINavigationController *n = [[UINavigationController alloc] initWithRootViewController:a] ;
	a.rc = self;
	[a release];
 
	UIView *s = self.navigationController.view.superview;
	[UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:0.75];
        [UIView setAnimationDelegate:self];
	[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:s cache:YES];
	    [self.navigationController.view removeFromSuperview];
	    [s addSubview:n.view];
	[UIView commitAnimations];
}

Lo importante del código de arriba es ver que creamos el AboutController que se encarga de la vista de “Acerca de” y lo ponemos en un navigation bar.
También es interesante ver el bloque de animación. Las animaciones empiezan con beginAnimation y terminan con commitAnimations. Son como las llaves de un método. Todo lo que queda entre esas dos llamados tiene que ver con la animación. Arriba de todo configuramos la animación (la duración, el tipo de la animación, respecto a que vista se hace la animación, etc.) y después indicamos que se hace durante la animación. En este caso decimos que se quite la vista actual y se ponga la vista de nuestro “About”.
Otra cosa que puede parecer raro es la sentencia: a.rc = self;. Con esto pasamos la referencia del controller actual al controller de about para que about tenga una referencia hacia el controller actual y pueda volver ese controller.
En el .h de nuestro about controller tenemos lo siguiente (fijaros en la referencia rc):

#import
#import "RootViewController.h"
 
@interface AboutController : UIViewController {
	RootViewController *rc;
}
 
@property (nonatomic, assign)RootViewController *rc;
-(void)close:(id)sender;
 
@end

Y en el .m de About controller añadimos el botón “Ok” y hacemos que al pulsarlo se vuelva a nuestro controller principal.

- (void)viewDidLoad {
    [super viewDidLoad];
	UIBarButtonItem *btn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemDone target:self action:@selector(close:)];
	self.navigationItem.rightBarButtonItem = btn;
	[btn release];
}
 
-(void)close:(id)sender{
 
	UIView *s = self.navigationController.view.superview;
	[UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:0.75];
        [UIView setAnimationDelegate:self];
        [UIView setAnimationDidStopSelector:@selector(transitionDidStop:finished:context:)];
	[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:s cache:YES];
 
	[self.navigationController.view removeFromSuperview];
	[s addSubview:rc.navigationController.view];
 
	[UIView commitAnimations];	
 
	[self.navigationController release];
}

Y con esto cerramos el artículo. Si tenéis preguntas no dudeis en formularlos usando el sistema de comentarios.
Descargar código de ejemplo de animacion

VN:F [1.9.8_1114]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.8_1114]
Rating: +1 (from 1 vote)
Mostrar la vista "About" o "Acerca de" con la típica animación, 5.0 out of 5 based on 1 rating

Leave a Reply

*
preload preload preload