(+34) 673 566 782 - (+34) 960 653 052 formacion@imaginagroup.com

Añadir dos imágenes como splash en iOS

iOS
Principiante
10 minutos

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.

Infórmate sin compromiso

Nombre (requerido)

Correo electrónico (requerido)

Teléfono (requerido)

Modalidad (requerido)

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

Uso de cookies: Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies