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

En el desarrollo de aplicaciones para iOS, uno de los componentes más utilizados para mejorar la interacción del usuario es el Slider. Este elemento permite ajustar valores dentro de un rango predefinido, ofreciendo una experiencia visual y táctil intuitiva. A lo largo de este tutorial, aprenderemos a implementar un Slider en una aplicación de iOS, desde su creación básica hasta su personalización avanzada.

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

¿Qué es un Slider en iOS?

El Slider en iOS es un control gráfico que permite a los usuarios seleccionar un valor continuo o discreto dentro de un rango. Su diseño consiste en una barra horizontal con un thumb (un botón circular) que el usuario puede arrastrar para cambiar el valor. Este componente es esencial cuando necesitamos que el usuario elija entre diferentes niveles de una variable, como el volumen de un dispositivo, el brillo de la pantalla, o la selección de una temperatura.

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.

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

Paso 2: Preparar la interfaz

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

Gesto de deslizamiento

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

1(void)panHandler:(UIPanGestureRecognizer *)sender {
2    switch (sender.state) {
3        case UIGestureRecognizerStateBegan: {
4            // Obtenemos el frame inicial
5            initialFrame = sender.view.frame;
6            
7            // Obtenemos el movimiento del slider
8            CGPoint translation = [sender translationInView:sender.view.superview];
9            
10            // Ajustamos el frame y lo asignamos al slider
11            CGRect newFrame = initialFrame;
12            newFrame.origin.x += translation.x;
13            sender.view.frame = newFrame;
14            break;
15        }
16        case UIGestureRecognizerStateChanged: {
17            // Obtenemos el movimiento del slider
18            CGPoint translation = [sender translationInView:sender.view.superview];
19            
20            // Ajustamos la posición
21            CGRect newFrame = initialFrame;
22            newFrame.origin.x += translation.x;
23            
24            // Comprobamos que no desplazamos el slider fuera de los límites
25            if (newFrame.origin.x < 40) {
26                newFrame.origin.x = 40;
27            }
28            
29            if (newFrame.origin.x + newFrame.size.width > 440) {
30                newFrame.origin.x = 440 - newFrame.size.width;
31            }
32            
33            // Asignamos el nuevo frame
34            sender.view.frame = newFrame;
35            break;
36        }
37        case UIGestureRecognizerStateEnded: {
38            break;
39        }
40        default:
41            break;
42    }
43}

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:

1 // Creamos labels para añadir contenido a nuestro scroll
2for (int i = 0; i < PAGES; i++) {
3    // Cada label tendrá el ancho y la altura del scroll para ocupar todo el espacio
4    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(i * scrollView.frame.size.width, 0, scrollView.frame.size.width, scrollView.frame.size.height)];
5    
6    // Configuración del label
7    label.textColor = [UIColor blackColor];
8    label.textAlignment = NSTextAlignmentCenter;
9    label.backgroundColor = [UIColor clearColor];
10    label.font = [UIFont fontWithName:@"Helvetica" size:34];
11    label.text = [NSString stringWithFormat:@"%d", i + 1];
12
13
14    
15    // Añadimos el label al scroll
16    [scrollView addSubview:label];
17}
18
19// Ajustamos el tamaño del contenido del scroll
20scrollView.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:

1// Calculamos el ancho de una página del scroll
2CGFloat pageWidth = scrollView.frame.size.width;
3
4// Calculamos la página en la que nos encontramos
5float page = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
6
7// Ajustamos el frame para el slider
8CGRect newFrame = self.btnSlider.frame;
9newFrame.origin.x = 40 + (page) * 400 / (PAGES + 1);
10
11// Realizamos la animación para el desplazamiento del slider
12[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction animations:^{
13    self.btnSlider.frame = newFrame;
14} 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.

1case UIGestureRecognizerStateEnded: {
2    // Obtenemos la página del scroll y lo desplazamos acorde al movimiento del slider
3    float page = sender.view.frame.origin.x / (400 / PAGES) - 1;
4    
5    // Si la página es inferior a 1, debemos ir a la primera, es decir, la página 0
6    if (page < 1)
7        page = 0;
8    
9    page = roundf(page);
10    
11    // Desplazamos el scroll a la posición correspondiente
12    [scrollView setContentOffset:CGPointMake(page * scrollView.frame.size.width, scrollView.contentOffset.y) animated:YES];
13    break;
14}

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:

1(void)panHandler:(UIPanGestureRecognizer *)sender {
2    switch (sender.state) {
3        case UIGestureRecognizerStateBegan: {
4            // Obtenemos el frame inicial
5            initialFrame = sender.view.frame;
6            
7            // Obtenemos el movimiento del slider
8            CGPoint translation = [sender translationInView:sender.view.superview];
9            
10            // Ajustamos el frame y lo asignamos al slider
11            CGRect newFrame = initialFrame;
12            newFrame.origin.x += translation.x;
13            sender.view.frame = newFrame;
14            
15            // Mostramos el label con el título de las páginas
16            [UIView animateWithDuration:0.3 delay:0.0 options
17
18:UIViewAnimationCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction animations:^{
19                self.pageTitle.alpha = 1.0;
20            } completion:nil];
21            
22            break;
23        }
24        case UIGestureRecognizerStateChanged: {
25            // Obtenemos el movimiento del slider
26            CGPoint translation = [sender translationInView:sender.view.superview];
27            
28            // Ajustamos la posición
29            CGRect newFrame = initialFrame;
30            newFrame.origin.x += translation.x;
31            
32            // Comprobamos que no desplazamos el slider fuera de los límites
33            if (newFrame.origin.x < 40) {
34                newFrame.origin.x = 40;
35            }
36            
37            if (newFrame.origin.x + newFrame.size.width > 440) {
38                newFrame.origin.x = 440 - newFrame.size.width;
39            }
40            
41            // Asignamos el nuevo frame
42            sender.view.frame = newFrame;
43            
44            // Calculamos la página a la que iríamos en caso de soltar el slider
45            float page = sender.view.frame.origin.x / (400 / PAGES) - 1;
46            
47            // Si la página es inferior a 1, debemos ir a la primera, es decir, la página 0
48            if (page < 1)
49                page = 0;
50            
51            page = roundf(page);
52            
53            // Asignamos el texto correspondiente al label
54            self.pageTitle.text = [NSString stringWithFormat:@"%d", (int)page + 1];
55            
56            break;
57        }
58        case UIGestureRecognizerStateEnded: {
59            // Obtenemos la página del scroll y lo desplazamos acorde al movimiento del slider
60            float page = sender.view.frame.origin.x / (400 / PAGES) - 1;
61            
62            // Si la página es inferior a 1, debemos ir a la primera, es decir, la página 0
63            if (page < 1)
64                page = 0;
65            
66            page = roundf(page);
67            
68            // Desplazamos el scroll a la posición correspondiente
69            [scrollView setContentOffset:CGPointMake(page * scrollView.frame.size.width, scrollView.contentOffset.y) animated:YES];
70            
71            // Al soltar, ocultamos de nuevo el label
72            [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction animations:^{
73                self.pageTitle.alpha = 0.0;
74            } completion:nil];
75            
76            break;
77        }
78        default:
79            break;
80    }
81}

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 de desarrollo en iOS.