Cómo crear un Slider en iOS: Tutorial paso a paso

Introducción

En este tutorial, aprenderás cómo crear un slider en iOS. El slider te permitirá arrastrar para cambiar la página del scroll y conocer la página a la que navegaremos según su posición.

Si quieres seguir aprendiendo a desarrollar en iOS, te recomendamos que consultes la página de nuestro curso especializado.

Paso 1: Crear un nuevo proyecto

En primer lugar, crea un nuevo proyecto en Xcode. Para este tutorial, selecciona el tipo de proyecto "Single View Application".

Además, vamos a bloquear la orientación del dispositivo para que solo se pueda utilizar en modo horizontal o landscape.

(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
  return (interfaceOrientation = = UIInterfaceOrientationLandscapeLeft || interfaceOrientation = = UIInterfaceOrientationLandscapeRight);
}  

Paso 2: Preparar la interfaz

Ahora vamos a preparar la interfaz agregando los botones y la barra inferior.

Código para el gesto de deslizamiento

El código que utilizaremos para el gesto de deslizamiento será el siguiente:

(void)panHandler:(UIPanGestureRecognizer *)sender {
  switch (sender.state) {
      case UIGestureRecognizerStateBegan: {
          // Obtenemos el frame inicial
          initialFrame = sender.view.frame;

          // Obtenemos el movimiento del slider
          CGPoint translation = [sender translationInView:sender.view.superview];

          // Ajustamos el frame y lo asignamos al slider
          CGRect newFrame = initialFrame;
          newFrame.origin.x += translation.x;
          sender.view.frame = newFrame;
          break;
      }
      case UIGestureRecognizerStateChanged: {
          // Obtenemos el movimiento del slider
          CGPoint translation = [sender translationInView:sender.view.superview];

          // Ajustamos la posición
          CGRect newFrame = initialFrame;
          newFrame.origin.x += translation.x;

          // Comprobamos que no desplazamos el slider fuera de los límites
          if (newFrame.origin.x < 40) {
              newFrame.origin.x = 40;
          }

          if (newFrame.origin.x + newFrame.size.width > 440) {
              newFrame.origin.x = 440 - newFrame.size.width;
          }

          // Asignamos el nuevo frame
          sender.view.frame = newFrame;
          break;
      }
      case UIGestureRecognizerStateEnded: {
          break;
      }
      default:
          break;
  }
}  

Paso 3: Añadir un UIScrollView

Añade un UIScrollView con la propiedad "Paging Enabled" activada y oculta los scrollbars horizontal y vertical.

Agregar elementos al UIScrollView

Agrega algunos elementos al UIScrollView. Puedes usar el siguiente código en el método viewDidLoad:

// Creamos labels para añadir contenido a nuestro scroll
for (int i = 0; i < PAGES; i++) {
  // Cada label tendrá el ancho y la altura del scroll para ocupar todo el espacio
  UILabel label = [[UILabel alloc] initWithFrame:CGRectMake(i  scrollView.frame.size.width, 0, scrollView.frame.size.width, scrollView.frame.size.height)];

  // Configuración del label
  label.textColor = [UIColor blackColor];
  label.textAlignment = NSTextAlignmentCenter;
  label.backgroundColor = [UIColor clearColor];
  label.font = [UIFont fontWithName:@"Helvetica" size:34];
  label.text = [NSString stringWithFormat:@"%d", i + 1];



  // Añadimos el label al scroll
  [scrollView addSubview:label];
}

// Ajustamos el tamaño del contenido del scroll
scrollView.contentSize = CGSizeMake(PAGES * scrollView.frame.size.width, scrollView.contentSize.height);  

Paso 4: Enlazar el slider con el scroll

Vamos a hacer que el slider se mueva al desplazar el scroll. Para ello, necesitaremos indicar que nuestro UIViewController es el delegate del scroll. Puedes hacerlo tanto por código como por el storyboard.

Una vez asignado el delegate, utiliza el método scrollViewDidEndDecelerating: para ajustar el slider:

// Calculamos el ancho de una página del scroll
CGFloat pageWidth = scrollView.frame.size.width;

// Calculamos la página en la que nos encontramos
float page = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;

// Ajustamos el frame para el slider
CGRect newFrame = self.btnSlider.frame;
newFrame.origin.x = 40 + (page) * 400 / (PAGES + 1);

// Realizamos la animación para el desplazamiento del slider
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction animations:^{
  self.btnSlider.frame = newFrame;
} completion:nil];  

Paso 5: Mover el slider y desplazar el scroll

Ahora vamos a modificar el método panHandler: para añadir el código correspondiente al final del gesto (UIGestureRecognizerStateEnded). Este código permitirá mover el slider y desplazar el scroll a la posición correspondiente.

case UIGestureRecognizerStateEnded: {
  // Obtenemos la página del scroll y lo desplazamos acorde al movimiento del slider
  float page = sender.view.frame.origin.x / (400 / PAGES) - 1;

  // Si la página es inferior a 1, debemos ir a la primera, es decir, la página 0
  if (page < 1)
      page = 0;

  page = roundf(page);

  // Desplazamos el scroll a la posición correspondiente
  [scrollView setContentOffset:CGPointMake(page * scrollView.frame.size.width, scrollView.contentOffset.y) animated:YES];
  break;
}  

Paso 6: Añadir un elemento extra

Vamos a añadir un elemento extra que nos permitirá saber a qué elemento iremos si soltamos el slider en una posición determinada. Para ello, agrega un objeto UILabel a la interfaz, centra su texto y ocúltalo utilizando la propiedad alpha.

A continuación, muestra el UILabel al iniciar el UIPanGestureRecognizer, cambia su nombre conforme se desplaza el slider y ocúltalo nuevamente al soltar el slider:

(void)panHandler:(UIPanGestureRecognizer *)sender {
  switch (sender.state) {
      case UIGestureRecognizerStateBegan: {
          // Obtenemos el frame inicial
          initialFrame = sender.view.frame;

          // Obtenemos el movimiento del slider
          CGPoint translation = [sender translationInView:sender.view.superview];

          // Ajustamos el frame y lo asignamos al slider
          CGRect newFrame = initialFrame;
          newFrame.origin.x += translation.x;
          sender.view.frame = newFrame;

          // Mostramos el label con el título de las páginas
          [UIView animateWithDuration:0.3 delay:0.0 options

:UIViewAnimationCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction animations:^{
              self.pageTitle.alpha = 1.0;
          } completion:nil];

          break;
      }
      case UIGestureRecognizerStateChanged: {
          // Obtenemos el movimiento del slider
          CGPoint translation = [sender translationInView:sender.view.superview];

          // Ajustamos la posición
          CGRect newFrame = initialFrame;
          newFrame.origin.x += translation.x;

          // Comprobamos que no desplazamos el slider fuera de los límites
          if (newFrame.origin.x < 40) {
              newFrame.origin.x = 40;
          }

          if (newFrame.origin.x + newFrame.size.width > 440) {
              newFrame.origin.x = 440 - newFrame.size.width;
          }

          // Asignamos el nuevo frame
          sender.view.frame = newFrame;

          // Calculamos la página a la que iríamos en caso de soltar el slider
          float page = sender.view.frame.origin.x / (400 / PAGES) - 1;

          // Si la página es inferior a 1, debemos ir a la primera, es decir, la página 0
          if (page < 1)
              page = 0;

          page = roundf(page);

          // Asignamos el texto correspondiente al label
          self.pageTitle.text = [NSString stringWithFormat:@"%d", (int)page + 1];

          break;
      }
      case UIGestureRecognizerStateEnded: {
          // Obtenemos la página del scroll y lo desplazamos acorde al movimiento del slider
          float page = sender.view.frame.origin.x / (400 / PAGES) - 1;

          // Si la página es inferior a 1, debemos ir a la primera, es decir, la página 0
          if (page < 1)
              page = 0;

          page = roundf(page);

          // Desplazamos el scroll a la posición correspondiente
          [scrollView setContentOffset:CGPointMake(page * scrollView.frame.size.width, scrollView.contentOffset.y) animated:YES];

          // Al soltar, ocultamos de nuevo el label
          [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction animations:^{
              self.pageTitle.alpha = 0.0;
          } completion:nil];

          break;
      }
      default:
          break;
  }
}  

Con estos pasos, ya tendríamos preparado el slider para nuestra aplicación. Solo queda añadir el contenido deseado para finalizar y completar nuestro scroll con slider. Se pueden realizar modificaciones adicionales, como añadir botones que permitan pasar de una página a otra del scroll o modificar la posición del UILabel que indica a qué página iremos, para adaptarlo a las distintas necesidades de la aplicación que deseemos desarrollar.

Sigue desarrollando en iOS

Si quieres convertirte en un desarrollador experto en el ecosistema iOS, te recomendamos consultar la página de nuestro curso especializado.