Crear un slider en iOS

En este tutorial vamos a crear un slider que nos permita conocer la posición de un scroll como el desarrollado en uno de nuestros productos, la mejor aplicación de iPad en el mercado para presentaciones Iris Player. Este slider nos va a permitir arrastrar para cambiar la página del scroll y conocer la página a la que navegaremos según su posición.

En primer lugar necesitaremos crear un nuevo proyecto. En este caso, nos bastará con emplear el tipo Single View Application.

imagen12 Crear un slider en iOS

Además, bloqueamos la orientación de forma que sólo podamos utilizarla en horizontal o landscape.

imagen21 Crear un slider en iOS
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationLandscapeLeft || interfaceOrientation == UIInterfaceOrientationLandscapeRight);
}

Ahora vamos a preparar la interfaz. Para ello necesitamos crear los botones y la barra inferior.

imagen43 Crear un slider en iOS

A la hora de programar esta funcionalidad utilizaremos un IBOutlet para el botón y un gesture recognizer de tipo UIPanGestureRecognizer.

El código que emplearemos para este gesto 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;
    }
}

Ahora vamos a añadir un UIScrollView con la propiedad Paging Enabled activada, y ocultamos los scrollers horizontal y vertical.

imagen53 Crear un slider en iOS

Vamos a añadir unos cuantos elementos a dicho scroll. Podemos 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)];
        // Texto de color negro, centrado y color de fondo trasparente
        label.textColor = [UIColor blackColor];
        label.textAlignment = NSTextAlignmentCenter;
        label.backgroundColor = [UIColor clearColor];
        label.font = [UIFont fontWithName:@"Helvetica" size:34];
        // Añadimos el texto al label
        label.text = [NSString stringWithFormat:@"%d", i+1];
        // Añadimos el label al scroll
        [scrollView addSubview:label];
    }
    // Ajustamos el tamaño del contenido del scroll de forma que sea su ancho por cada página que hemos creado
    scrollView.contentSize = CGSizeMake(PAGES*scrollView.frame.size.width, scrollView.contentSize.height);

Una vez tenemos el scroll y el slider no queda más que enlazarlos. Primero vamos a hacer que el slider se mueva al desplazar el scroll. Para ello necesitaremos indicar que nuestro UIViewController es el delegate del scroll. Podemos realizar esto tanto por código como por el storyboard.

imagen61 Crear un slider en iOS

Una vez asignado el delegate empleamos 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((aScrollView.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 únicamente queda realizar el efecto contrario, mover el slider y desplazar el scroll a su posición correspondiente. Para conseguir este efecto, tendremos que modificar el método panHandler: para añadir el código siguiente en el case correspondiente al fin del gesto, UIGestureRecognizerStateEnded.

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

Por último, 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, añadimos un objeto UILabel a nuestra interfaz, centramos su texto y lo ocultamos mediante la propiedad alpha.

imagen7 Crear un slider en iOS

A continuación sólo queda mostrar el UILabel al iniciar el UIPanGestureRecognizer, cambiar el nombre conforme se desplace y volver a ocultarlo 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;
    }
}
imagen8 Crear un slider en iOS

Con estos pasos ya tendríamos preparado el slider para nuestra aplicación, solo quedaría añadir el contenido que se desee para finalizar y completar nuestro scroll con slider. Se podrían realizar modificaciones para añadir botones que permitan pasar de una página a otra del scroll, o modificar la situación del UILabel que nos indica a qué página iremos para adaptarlo a las distintas necesidades de la aplicación que deseemos desarrollar.

¿Conoces nuestro curso Online de iOS 7?