Cómo añadir 2 Imágenes como Splash en iOS

Personalización de las pantallas de splash en iOS

En este tutorial, aprenderemos cómo personalizar nuestras pantallas de splash en una aplicación de iOS. El splash screen es la pantalla de presentación que aparece al iniciar una aplicación y es una excelente oportunidad para mostrar una imagen o animación que represente nuestra marca o tema.

Para aprender más sobre desarrollo te recomendamos consultar la página de nuestro curso de iOS con la versión más reciente.

Paso 1: Configuración del proyecto

Crea un nuevo proyecto de tipo Single View Application en Xcode.
En este tutorial, no influye si usamos storyboards o ARC (Automatic Reference Counting), por lo que puedes seleccionar las opciones según tu preferencia.
Para mantener la simplicidad, en este caso no utilizaremos storyboards y configuraremos el proyecto con ARC.

Paso 2: Añadir imágenes de splash

Necesitaremos dos imágenes para nuestro splash screen. Asegúrate de tener las imágenes preparadas y añádelas al proyecto.
En este ejemplo, usaremos las siguientes imágenes: "Splash1.png" y "Splash2.png". Puedes utilizar tus propias imágenes o descargarlas de recursos gratuitos en línea.

Paso 3: Implementar el código necesario

En el archivo de encabezado (.h) del controlador de vista principal, declaramos las variables necesarias para los objetos UIImageView:

1UIImageView *firstSplash;
2UIImageView *secondSplash;

A continuación, creamos las instancias de las imágenes y las preparamos para su visualización. Agregamos las imágenes como subvistas a la vista principal y las ocultamos estableciendo su propiedad
1alpha
en 0.0:

1firstSplash = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash1.png"]];
2secondSplash = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash2.png"]];
3firstSplash.alpha = 0.0;
4secondSplash.alpha = 0.0;
5[self.view addSubview:firstSplash];
6[self.view addSubview:secondSplash];

Ahora, realizaremos la animación para mostrar la primera imagen y programaremos un
1NSTimer
que llamará al método adecuado después de un tiempo específico para mostrar y ocultar la segunda imagen:

1[UIView animateWithDuration:0.5 animations:^{
2    firstSplash.alpha = 1.0;
3} completion:^(BOOL finished) {
4    [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(showSecondSplash:) userInfo:nil repeats:NO];
5}];

Implementaremos el método
1showSecondSplash:
para ocultar la primera imagen, mostrar la segunda imagen y programar otro
1NSTimer
para ocultar la segunda imagen y permitir el uso de la aplicación:

1(void)showSecondSplash:(NSTimer *)timer {
2    [UIView animateWithDuration:0.5 animations:^{
3        firstSplash.alpha = 0.0;
4        secondSplash.alpha = 1.0;
5    } completion:^(BOOL finished) {
6        [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(finishSplash:) userInfo:nil repeats:NO];
7    }];
8}

Por último, implementaremos el método
1finishSplash:
para ocultar la segunda imagen y eliminar ambas imágenes de la vista:

1(void)finishSplash:(NSTimer *)timer {
2    [UIView animateWithDuration:0.5 animations:^{
3        secondSplash.alpha = 0.0;
4    } completion:^(BOOL finished) {
5        [firstSplash removeFromSuperview];
6        [secondSplash removeFromSuperview];
7    }];
8}

Paso 4: Integrar el código en el control

ador de vista principal

Abre el archivo del controlador de vista principal (por lo general,
1ViewController.m
) y encuentra el método
1viewDidLoad
.
Dentro de
1viewDidLoad
, añade el código que hemos creado en los pasos anteriores. El método
1viewDidLoad
se ejecuta cuando la vista del controlador se ha cargado en la memoria y es un buen lugar para inicializar y configurar elementos.

Aquí tienes el código completo que puedes añadir en

viewDidLoad

1(void)viewDidLoad {
2    [super viewDidLoad];
3    // Do any additional setup after loading the view, typically from a nib.
4    
5    // Creamos las imágenes, las ocultamos mediante la propiedad alpha y las añadimos a la vista
6    firstSplash = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash1.png"]];
7    secondSplash = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash2.png"]];
8    firstSplash.alpha = 0.0;
9    secondSplash.alpha = 0.0;
10    [self.view addSubview:firstSplash];
11    [self.view addSubview:secondSplash];
12    
13    // Realizamos la primera animación para mostrar la primera imagen
14    // Además, en completion indicamos que se programe un NSTimer
15    // Este NSTimer llamará al método adecuado al pasar el tiempo indicado
16    [UIView animateWithDuration:0.5 animations:^{
17        firstSplash.alpha = 1.0;
18    } completion:^(BOOL finished) {
19        [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(showSecondSplash:) userInfo:nil repeats:NO];
20    }];
21}

¡Eso es todo! Ahora, cuando ejecutes la aplicación, verás la primera imagen del splash screen que se desvanecerá y mostrará la segunda imagen. Después de otro segundo, la segunda imagen desaparecerá y se mostrará el controlador principal de la aplicación.

Personalización adicional y mejoras

A partir de este tutorial básico, puedes realizar varias mejoras y personalizaciones para incorporar nuevas características a tus pantallas de carga. Aquí hay algunas ideas adicionales:

Ocultar la barra de estado

Si deseas ocultar la barra de estado durante la presentación de splash, puedes utilizar el siguiente código dentro del método

showSecondSplash:

antes de la animación:

1[[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationFade];

Y dentro del método

finishSplash:

después de la animación:

1[[UIApplication sharedApplication] setStatusBarHidden:NO withAnimation:UIStatusBarAnimationFade];

Utilizar una animación de transición diferente

En lugar de simplemente desvanecer las imágenes, puedes explorar otras opciones de animación de transición disponibles en iOS. Puedes utilizar métodos como

transitionWithView:duration:options:animations:completion:

de UIView para aplicar diferentes efectos de transición entre las imágenes.

Incorporar un video en lugar de una imagen

Si deseas agregar una experiencia más dinámica, puedes reemplazar una de las imágenes con un video. Para lograr esto, puedes utilizar la clase

AVPlayer

AVPlayerLayer

para reproducir un video en una capa de la vista.

Añadir sonido o música de fondo

Si quieres darle un toque más inmersivo a tu pantalla de splash, puedes añadir sonido o música de fondo utilizando la API de reproducción de audio de iOS, como AVAudioPlayer.

Recuerda que estas son solo algunas ideas para mejorar tus pantallas de carga.

¡Explora y experimenta con diferentes opciones para encontrar la personalización que mejor se adapte a tu aplicación!

Curso de Desarrollo Móvil en iOS

¡Espero que este tutorial te haya sido útil para personalizar tus pantallas de splash en iOS!

Recuerda seguir formándote para convertirte en un experto.Sigue aprendiendo sobre desarrollo móvil y consulta la página de nuestro curso de iOS con la versión más reciente o el curso de iOS avanzado.

Personalización de las pantallas de splash en iOS

Para aprender más sobre desarrollo te recomendamos consultar la página de nuestro curso de iOS con la versión más reciente.

Paso 1: Configuración del proyecto

Crea un nuevo proyecto de tipo Single View Application en Xcode.
En este tutorial, no influye si usamos storyboards o ARC (Automatic Reference Counting), por lo que puedes seleccionar las opciones según tu preferencia.
Para mantener la simplicidad, en este caso no utilizaremos storyboards y configuraremos el proyecto con ARC.

Paso 2: Añadir imágenes de splash

Necesitaremos dos imágenes para nuestro splash screen. Asegúrate de tener las imágenes preparadas y añádelas al proyecto.
En este ejemplo, usaremos las siguientes imágenes: "Splash1.png" y "Splash2.png". Puedes utilizar tus propias imágenes o descargarlas de recursos gratuitos en línea.

Paso 3: Implementar el código necesario

En el archivo de encabezado (.h) del controlador de vista principal, declaramos las variables necesarias para los objetos UIImageView:

1UIImageView *firstSplash;
2UIImageView *secondSplash;

A continuación, creamos las instancias de las imágenes y las preparamos para su visualización. Agregamos las imágenes como subvistas a la vista principal y las ocultamos estableciendo su propiedad
1alpha
en 0.0:

1firstSplash = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash1.png"]];
2secondSplash = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash2.png"]];
3firstSplash.alpha = 0.0;
4secondSplash.alpha = 0.0;
5[self.view addSubview:firstSplash];
6[self.view addSubview:secondSplash];

Ahora, realizaremos la animación para mostrar la primera imagen y programaremos un
1NSTimer
que llamará al método adecuado después de un tiempo específico para mostrar y ocultar la segunda imagen:

1[UIView animateWithDuration:0.5 animations:^{
2    firstSplash.alpha = 1.0;
3} completion:^(BOOL finished) {
4    [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(showSecondSplash:) userInfo:nil repeats:NO];
5}];

Implementaremos el método
1showSecondSplash:
para ocultar la primera imagen, mostrar la segunda imagen y programar otro
1NSTimer
para ocultar la segunda imagen y permitir el uso de la aplicación:

1(void)showSecondSplash:(NSTimer *)timer {
2    [UIView animateWithDuration:0.5 animations:^{
3        firstSplash.alpha = 0.0;
4        secondSplash.alpha = 1.0;
5    } completion:^(BOOL finished) {
6        [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(finishSplash:) userInfo:nil repeats:NO];
7    }];
8}

Por último, implementaremos el método
1finishSplash:
para ocultar la segunda imagen y eliminar ambas imágenes de la vista:

1(void)finishSplash:(NSTimer *)timer {
2    [UIView animateWithDuration:0.5 animations:^{
3        secondSplash.alpha = 0.0;
4    } completion:^(BOOL finished) {
5        [firstSplash removeFromSuperview];
6        [secondSplash removeFromSuperview];
7    }];
8}

Paso 4: Integrar el código en el control

ador de vista principal

Abre el archivo del controlador de vista principal (por lo general,
1ViewController.m
) y encuentra el método
1viewDidLoad
.
Dentro de
1viewDidLoad
, añade el código que hemos creado en los pasos anteriores. El método
1viewDidLoad
se ejecuta cuando la vista del controlador se ha cargado en la memoria y es un buen lugar para inicializar y configurar elementos.

Aquí tienes el código completo que puedes añadir en

viewDidLoad

1(void)viewDidLoad {
2    [super viewDidLoad];
3    // Do any additional setup after loading the view, typically from a nib.
4    
5    // Creamos las imágenes, las ocultamos mediante la propiedad alpha y las añadimos a la vista
6    firstSplash = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash1.png"]];
7    secondSplash = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash2.png"]];
8    firstSplash.alpha = 0.0;
9    secondSplash.alpha = 0.0;
10    [self.view addSubview:firstSplash];
11    [self.view addSubview:secondSplash];
12    
13    // Realizamos la primera animación para mostrar la primera imagen
14    // Además, en completion indicamos que se programe un NSTimer
15    // Este NSTimer llamará al método adecuado al pasar el tiempo indicado
16    [UIView animateWithDuration:0.5 animations:^{
17        firstSplash.alpha = 1.0;
18    } completion:^(BOOL finished) {
19        [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(showSecondSplash:) userInfo:nil repeats:NO];
20    }];
21}

Personalización adicional y mejoras

A partir de este tutorial básico, puedes realizar varias mejoras y personalizaciones para incorporar nuevas características a tus pantallas de carga. Aquí hay algunas ideas adicionales:

Ocultar la barra de estado

Si deseas ocultar la barra de estado durante la presentación de splash, puedes utilizar el siguiente código dentro del método

showSecondSplash:

antes de la animación:

1[[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationFade];

Y dentro del método

finishSplash:

después de la animación:

1[[UIApplication sharedApplication] setStatusBarHidden:NO withAnimation:UIStatusBarAnimationFade];

Utilizar una animación de transición diferente

En lugar de simplemente desvanecer las imágenes, puedes explorar otras opciones de animación de transición disponibles en iOS. Puedes utilizar métodos como

transitionWithView:duration:options:animations:completion:

de UIView para aplicar diferentes efectos de transición entre las imágenes.

Incorporar un video en lugar de una imagen

Si deseas agregar una experiencia más dinámica, puedes reemplazar una de las imágenes con un video. Para lograr esto, puedes utilizar la clase

AVPlayer

AVPlayerLayer

para reproducir un video en una capa de la vista.

Añadir sonido o música de fondo

Si quieres darle un toque más inmersivo a tu pantalla de splash, puedes añadir sonido o música de fondo utilizando la API de reproducción de audio de iOS, como AVAudioPlayer.

Recuerda que estas son solo algunas ideas para mejorar tus pantallas de carga.

¡Explora y experimenta con diferentes opciones para encontrar la personalización que mejor se adapte a tu aplicación!

Curso de Desarrollo Móvil en iOS

¡Espero que este tutorial te haya sido útil para personalizar tus pantallas de splash en iOS!

Cómo añadir 2 Imágenes como Splash en iOS

Personalización de las pantallas de splash en iOS

Paso 1: Configuración del proyecto

Paso 2: Añadir imágenes de splash

Paso 3: Implementar el código necesario

Descubre la formación a tu medida

Paso 4: Integrar el código en el control

Personalización adicional y mejoras

Ocultar la barra de estado

Utilizar una animación de transición diferente

Incorporar un video en lugar de una imagen

Añadir sonido o música de fondo

Curso de Desarrollo Móvil en iOS

Descubre la formación a tu medida

Descubre la formación a tu medida

¡Empieza hoy y conviértete en un experto en iOS 16!

Tutoriales relacionados

¿Qué es el Patrón de Arquitectura (MVVM)?

Cómo Crear una Progressive Web App (PWA) con Ionic

Cómo Instalar QR Scanner en Aplicación Ionic

Cómo añadir 2 Imágenes como Splash en iOS

Personalización de las pantallas de splash en iOS

Paso 1: Configuración del proyecto

Paso 2: Añadir imágenes de splash

Paso 3: Implementar el código necesario

Descubre la formación a tu medida

Paso 4: Integrar el código en el control

Personalización adicional y mejoras

Ocultar la barra de estado

Utilizar una animación de transición diferente

Incorporar un video en lugar de una imagen

Añadir sonido o música de fondo

Curso de Desarrollo Móvil en iOS

Descubre la formación a tu medida

Descubre la formación a tu medida

¡Empieza hoy y conviértete en un experto en iOS 16!

Tutoriales relacionados

¿Qué es el Patrón de Arquitectura (MVVM)?

Cómo Crear una Progressive Web App (PWA) con Ionic

Cómo Instalar QR Scanner en Aplicación Ionic