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.
(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.
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;
}
}
Añade un UIScrollView con la propiedad "Paging Enabled" activada y oculta los scrollbars horizontal y vertical.
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);
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];
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;
}
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 de desarrollo en iOS.
