XCode: UIPageControl


¿Conocéis el típico interfaz de iOS con varios puntitos y que os permite hacer scroll sobre varias vistas? He aquí un tutorial rápido de como conseguirlo:

1. Añadís un UIViewController en vuestro Storyboard y cambiáis el nombre de la clase por PageViewController:


Añadís un UIScrollView, desactiváis las barras de scroll y habilitáis el paging:



Añadís un UIPageControl (y ajustáis el color de los puntos...). Hay que tener cuidado de no añadirlo dentro del UIScrollView, tienen que estar ambos al mismo nivel dentro del UIView:




Creáis un nuevo UIViewController al que llamáis PageViewController:


Añadís el siguiente código a PageViewController.h:


#import 

@interface PageViewController : UIViewController 

@property (strong, nonatomic) IBOutlet UIScrollView* scrollView;
@property (strong, nonatomic) IBOutlet UIPageControl* pageControl;

-(IBAction)pageControlValueChanged:(id)sender;

@end


Añadís el siguiente código a PageViewController.m:

#import "PageViewController.h"

@interface PageViewController ()

@end

@implementation PageViewController

- (void)viewDidLoad
{
  [super viewDidLoad];
}

- (void)viewDidAppear:(BOOL)animated {
  [super viewDidAppear:animated];
  
  int count = 0;
  float width = self.scrollView.frame.size.width;
  float height = self.scrollView.frame.size.height;
  
  NSArray* nibViews = [[NSBundle mainBundle] loadNibNamed:@"PageViews" owner:self options:nil];
  for (UIView *view in nibViews) {
    [view setFrame:CGRectMake(width*count++, 0, width, height)];
    [self.scrollView addSubview:view];
  }
  
  self.scrollView.contentSize = CGSizeMake(width*count, height);
  self.pageControl.currentPage = 0;
  self.pageControl.numberOfPages = count;
}

- (void)didReceiveMemoryWarning
{
  [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

-(IBAction)pageControlValueChanged:(id)sender {
  
    // First, determine which page is currently visible
  CGFloat pageWidth = self.scrollView.frame.size.width;
  
  self.scrollView.contentOffset = CGPointMake(self.pageControl.currentPage*pageWidth, 0);
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
  
    // First, determine which page is currently visible
  CGFloat pageWidth = self.scrollView.frame.size.width;
  NSInteger page = (NSInteger)floor((self.scrollView.contentOffset.x * 2.0f + pageWidth) / (pageWidth * 2.0f));
  
    // Update the page control
  self.pageControl.currentPage = page;
}

@end

Conectáis los IBOutlets, delegate del UIScrollView y el IBAction del UIPageControl en Interface Builder:




Y ahora vamos a añadir las vistas, pero de un modo bastante práctico. Vamos a crear un NIB con todas ellas y se van a cargar automáticamente. Creamos un NIB que llamaremos PageViews:



Y le añadimos todas las vistas que queramos de modo secuencial:


Aconsejo renombrar las vistas (tontería, siempre lo aconsejo, mientras más descriptivo el software mejor) porque en el orden en que aparezcan en la columna de la izquierda (en Objects) es como luego aparecerán.

Y el resultado:


Podéis moveros entre las diferentes vistas con sólo deslizar el dedo y los puntitos se actualizarán solos. Además los puntitos también responden y podéis ir de una a otra pantalla al tocarlos.

No hay comentarios:

Publicar un comentario