iOS: Fundir imagen de carga con primera vista de la aplicación

Como muchos de vosotros sabéis, a la hora de hacer una aplicación iPhone/iPad es necesario incorporar al proyecto una imagen de precarga (Default.png), que es la que se visualiza nada más comienza a cargar nuestra aplicación. Una vez se ha cargado la imagen desaparece bruscamente y se visualiza la primera vista de nuestra app.

Para realizar una transición más fluida de esta imagen, vamos a colocar la imagen en lo más alto de la jerarquía de subvistas de nuestra vista inicial y vamos a realizar un fundido alpha de la imagen, con lo cual, cuando desaparece la imagen de precarga, se ve la misma imagen, que es la que hay también en la misma posición en la primera vista. Para hacer el ejemplo se ha usado iOS5 y Automatic Reference Counting (ARC).

Crear proyecto y agregar materiales

Creamos un nuevo proyecto en Xcode a partir de la plantilla Single View Aplication y las opciones por defecto.

Preparamos nuestras imágenes Default.png (320x480px) y Default@2x.png (640x960px) y las añadimos al proyecto de la manera habitual. En cuanto las añadimos ya nos salen en las propiedades del Target en el apartado Launch Images. Podeis descargar las imagenes aquí:

Añadimos Outlets y código

Ahora vamos a ViewController.h y añadimos un IBOutlet que va a ser la imagen que se funde. También vamos a añadir la función (void)fadeOut… que vamos a usar para realizar el fundido y que admite 2 parámetros: La vista a disolver y la duración del efecto, por lo que es bastante reusable.

#import <uikit /UIKit.h>

@interface ViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIImageView *entradaView;
-(void)fadeOut:(UIView*)viewToDissolve withDuration:(NSTimeInterval)duration ;

@end

En ViewController.m sintetizamos entradaView y añadimos el cuerpo de la función (void)fadeOut…

#import "ViewController.h"

@implementation ViewController
@synthesize entradaView;

-(void)fadeOut:(UIView*)viewToDissolve withDuration:(NSTimeInterval)duration
{
    [UIView beginAnimations: @"entradaView" context:nil];
    [UIView setAnimationDelegate:self];
	// wait for time before begin
	//[UIView setAnimationDelay:wait];

	// druation of animation
    [UIView setAnimationDuration:duration];
    viewToDissolve.alpha = 0.0;
    [UIView commitAnimations];
}

Seguimos en ViewController.m e invocamos al método (void)fadeout.. desde viewDidLoad con entradaView como vista a disolver y 1 segundo de duración. Aprovechamos también y seteamos a nil entradaView en el cuerpo del método viewDidUnload.

- (void)viewDidLoad
{
    entradaView.alpha = 1;
    [self fadeOut : entradaView withDuration: 1  ];
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

- (void)viewDidUnload
{
    [self setEntradaView:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

En el Storyboard

Seguidamente vamos al MainStoryboard, seleccionamos de la Escena el View Controller y añadimos dentro de la vista View una subvista Label para darnos cuenta del efecto y le ponemos algo de texto. Después añadimos una Image View en la que cargamos la imagen Default.png con coordenadas y tamaño x=0, y=-20, width=320, height=480. Esta imagen la vamos a mapear con entradaView en Referencing Outlets.

Y bueno ya podeis compilar y ver el efecto. Hay muchas maneras de hacer esto pero yo he elegido esta por su simplicidad, espero os sea de utilidad…

A continuación puedes descargar el proyecto Xcode: