Imagina

Añadir dos imágenes como splash en iOS – Guía

iOS
Intermedio
15'

El siguiente tutorial nos mostrará como podemos personalizar nuestras pantallas de splash.

Vamos a crear un proyecto de tipo Single View Application. En este tutorial no influye si usamos storyboards o ARC, por lo que queda a vuestra elección marcar o no estas opciones. En nuestro caso, usaremos ARC pero no storyboards.

Necesitamos dos imágenes por lo que las añadimos al proyecto. Nosotros usaremos las siguientes imágenes como splash.

A la hora de implementar el código necesario utilizaremos dos objetos UIImageView, animaciones y, por último, emplearemos la clase NSTimer para programar el tiempo que deben de mostrarse las imágenes.

En primer lugar declaramos las variables en el fichero .h.

UIImageView *firstSplash;
UIImageView *secondSplash;

A continuación, creamos las imágenes y las preparamos.

// Creamos las imágenes, las ocultamos mediante la propiedad alpha y las añadimos a la vista
firstSplash = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash1.png"]];
secondSplash = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash2.png"]];
firstSplash.alpha = 0.0;
secondSplash.alpha = 0.0;
[self.view addSubview:firstSplash];
[self.view addSubview:secondSplash];

Ya solo quedaría realizar la animación y programar el NSTimer para poder mostrar y ocultar la primera imagen.

// Realizamos la primera animación para mostrar la primera imagen
// Además, en completion indicamos que se programe un NSTimer
// Este NSTimer llamará al método adecuado al pasar el tiempo indicado
[UIView animateWithDuration:0.5 animations:^{
firstSplash.alpha = 1.0;
} completion:^(BOOL finished) {
[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(showSecondSplash:) userInfo:nil repeats:NO];
}];

Todo esto lo podemos realizar en el método viewDidLoad del primero controlador que se muestre. De forma que quedaría de la siguiente manera:

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

// Creamos las imágenes, las ocultamos mediante la propiedad alpha y las añadimos a la vista
firstSplash = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash1.png"]];
secondSplash = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash2.png"]];
firstSplash.alpha = 0.0;
secondSplash.alpha = 0.0;
[self.view addSubview:firstSplash];
[self.view addSubview:secondSplash];

// Realizamos la primera animación para mostrar la primera imagen
// Además, en completion indicamos que se programe un NSTimer
// Este NSTimer llamará al método adecuado al pasar el tiempo indicado
[UIView animateWithDuration:0.5 animations:^{
firstSplash.alpha = 1.0;
} completion:^(BOOL finished) {
[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(showSecondSplash:) userInfo:nil repeats:NO];
}];
}

Tenemos que implementar ahora el método showSecondSplash: de lo contrario nuestra aplicación fallará.

En este método, ocultaremos la primera imagen, mostraremos la segunda y programaremos otro NSTimer para que oculte la segunda imagen y podamos empezar a usar la aplicación.

- (void)showSecondSplash:(NSTimer *)timer {
// Ocultamos la primera imagen
// Mostramos la segunda
// Programamos un NSTimer para ocultar la segunda imagen
[UIView animateWithDuration:0.5 animations:^{
firstSplash.alpha = 0.0;
secondSplash.alpha = 1.0;
} completion:^(BOOL finished) {
[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(finishSplash:) userInfo:nil repeats:NO];
}];
}

Sólo queda crear el método finishSplash:.

- (void)finishSplash:(NSTimer *)timer {
// Ocultamos la segunda imagen
// Eliminamos ambas imágenes de la vista
[UIView animateWithDuration:0.5 animations:^{
secondSplash.alpha = 0.0;
} completion:^(BOOL finished) {
[firstSplash removeFromSuperview];
[secondSplash removeFromSuperview];
}];
}

Si ejecutamos la aplicación comprobaremos que se muestra la primera imagen, al segundo desaparece y se muestra la segunda imagen. Al pasar otro segundo, esta segunda imagen desaparece y nos deja ver el controlador que teníamos.

A partir de este tutorial podemos realizar mejoras para incorporar nuevas cosas a nuestras pantallas de carga. Por ejemplo, en el proyecto adjunto, se ha ocultado la barra de estado y se muestra al terminar de realizar las animaciones entre imágenes. Es posible también sustituir una imagen con un vídeo tal y como se realizó en Hungry Monster. Incluso es posible modificar las transiciones para utilizar otros efectos en lugar de un fade para mostrar y ocultar las distintas imágenes.

¿Quieres un plan de formación personalizado?

*requerido

  • Responsable de los datos: IMAGINA WEB & MOBILE TECHNOLOGIES S.L.
  • Finalidad de los datos: Responder a la información solicitada, envío de boletines de noticias y ofertas.
  • Destinatarios: IMAGINA WEB & MOBILE TECHNOLOGIES S.L. No se cederán los datos a terceros.
  • Derechos: En cualquier momento puedes acceder, recuperar y borrar tu información.

¿Quieres un curso personalizado?

*requerido

  • Responsable de los datos: IMAGINA WEB & MOBILE TECHNOLOGIES S.L.
  • Finalidad de los datos: Responder a la información solicitada, envío de boletines de noticias y ofertas.
  • Destinatarios: IMAGINA WEB & MOBILE TECHNOLOGIES S.L. No se cederán los datos a terceros.
  • Derechos: En cualquier momento puedes acceder, recuperar y borrar tu información.