Cómo añadir dos Imágenes como Splash en iOS - Guía completa

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

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

Paso 2: Añadir imágenes de splash

1. Necesitaremos dos imágenes para nuestro splash screen. Asegúrate de tener las imágenes preparadas y añádelas al proyecto.
2. 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

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

UIImageView *firstSplash;
UIImageView *secondSplash;  

2. 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 alpha en 0.0:

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];  

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

[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];
}];  

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

(void)showSecondSplash:(NSTimer *)timer {
  [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];
  }];
}  

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

(void)finishSplash:(NSTimer *)timer {
  [UIView animateWithDuration:0.5 animations:^{
      secondSplash.alpha = 0.0;
  } completion:^(BOOL finished) {
      [firstSplash removeFromSuperview];
      [secondSplash removeFromSuperview];
  }];
}
 

Paso 4: Integrar el código en el control

ador de vista principal

1. Abre el archivo del controlador de vista principal (por lo general, ViewController.m) y encuentra el método viewDidLoad.
2. Dentro de viewDidLoad, añade el código que hemos creado en los pasos anteriores. El método viewDidLoad 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:

(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];
  }];
}  

¡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:

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

Y dentro del método finishSplash: después de la animación:

[[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 y 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.