Vamos a ver como utilizar un
UIScrollView con un
UIPageControl, lo que nos va a permitir crear una aplicación con varias páginas.
La clase
UIPageControl son los puntos que aparecen en la parte inferior la ventana de muchas aplicaciones y que indican la ventana en la que estáis cuando hay varias.
Lo primero que haremos será añadir un
UIPageControl al
UIVIewController en el
StoryBoard:
Lo voy a hacer solo con 2 páginas, así que pongo la propiedad Pages a 2. Seleccionando el UIPagecontrol con el botón derecho, lo "cableo" hacía el código del UIViewController para crear la propiedad:
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
Vamos con el UIScrollView. En esta ocasión lo voy a hacer por código, aunque también se podría añadir en el StoryBoard.
Lo primero que haremos es añadir el delegate de UIScrollView al interface ViewController:
@interface myViewController : UIViewController <UIScrollViewDelegate>
A continuación definimos un método que va crear dos vistas con dos etiquetas y las va a añadir al ScrollView:
-(void)createTwoViewsWithTwoLabels
{
// ScrollView
UIScrollView *scrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 60)];
// View 1
UIView *view1=[[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 40)];
view1.backgroundColor=[UIColor colorWithRed:0.5f green:1.0f blue:0.5f alpha:1.0f];
// Label 1
UILabel *label1 = [[UILabel alloc]initWithFrame:CGRectMake(22, 20, 275, 38)];
[label1 setBackgroundColor:[UIColor clearColor]];
[label1 setText:@"Vista 1"];
label1.textColor=[UIColor blueColor];
label1.adjustsFontSizeToFitWidth=YES;
label1.textAlignment = NSTextAlignmentRight;
label1.font = [UIFont fontWithName:@"Chalkduster" size:50];
label1.numberOfLines = 1;
[view1 addSubview:label1];
//Se añade la primera vista al scrollview
[scrollView addSubview:view1];
//View 2
UIView *view2=[[UIView alloc]initWithFrame:CGRectMake(self.view.frame.size.width, 0, self.view.frame.size.width, self.view.frame.size.height - 40)];
view2.backgroundColor=[UIColor colorWithRed:1.0f green:1.0f blue:0.7f alpha:1.0f];
//Label 2
UILabel *label2 = [[UILabel alloc]initWithFrame:CGRectMake(22, 20, 275, 38)];
[label2 setBackgroundColor:[UIColor clearColor]];
[label2 setText:@"Vista 2"];
label2.textColor=[UIColor blueColor];
label2.adjustsFontSizeToFitWidth=YES;
label2.textAlignment = NSTextAlignmentRight;
label2.font = [UIFont fontWithName:@"Chalkduster" size:50];
label2.numberOfLines = 1;
[view2 addSubview:label2];
// Se añade la segunda vista al scrollview
[scrollView addSubview:view2];
// Propiedades necesarias del scrollview
scrollView.pagingEnabled = YES;
scrollView.delegate = self;
scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * 2, scrollView.frame.size.height);
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;
scrollView.bounces = NO;
//Se añade el scroll view a la vista del ViewController
[self.view addSubview:scrollView];
}
Este método se llamará en el viewDidLoad:
- (void)viewDidLoad
{
[super viewDidLoad];
[self createTwoViewsWithTwoLabels];
}
Por último voy a implementar la función del UIScrollViewDelegate que detecta el cambio de página en el scroll:
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
CGFloat pageWidth = scrollView.frame.size.width;
int pagina = floor((scrollView.contentOffset.x- pageWidth / 2) / pageWidth) + 1;
self.pageControl.currentPage=pagina;
}
Y con esto ya tendríamos un sencillo scroll con page control:
@Fin
