No tutorial de hoje iremos falar da classe UIPageViewController, muito utilizada em diversas situações. Sua função é manter em apenas uma view, diversos conteúdos, bastando apenas deslizar os dedos para os lados para mudar o tipo de conteúdo. A seguir uma imagem que exemplifica a sua utilização.

A Classe UIPageViewController é altamente configurável, podemos definir:
– a orientação das pages view: vertical ou horizontal
– o estilo da transição: transição de rolagem ou transição de folhear um livro.
– o espaço entre as páginas: apenas pode ser alterado quando o modo de transição for rolagem.

Bom, vamos criar um simples projeto para demonstrar como o UIPageViewController funciona.

Vamos começar!!

Criando um Projeto:

Abra o XCode, selecione as opções conforme informado a seguir:

A seguir, defina o nome do projeto conforme desejado, no nosso caso defini como PageControl.

Criando a Page View Controller na Storyboard

Agora, selecione Main.storyboard e adicione uma View Controller e uma Page View Controller, pasta isso basta arrastar a opção no menu a esquerda, conforme indicado com a seta.

Após adicionar a View Controller e a Page ViewController o resutado deverá ser similar a imagem a seguir:

Agora, selecione a Page View Controller e no menu a direita faça as seguintes modificações:

Clique no terceiro ícone: Identify Inspector conforme indicado na seta e em seguida preencha os campos indicados: em Storyboard ID coloque: PageViewController.

Já no quarto ícone indicado, que corresponde a tela de Attributes Inspector vá no item Transition Style coloque Scroll, conforme indicado nas setas abaixo:

Feito isso, vamos adicionar uma Label ao ViewController e um botão chamado “Começar de novo”

Criando a  Classe ViewController

A próxima etapa é criar a classe que iremos associar ao ViewController que adicionamos a Label e o Botão na etapa anterior. Para isso vá no Menu: File -> New -> New File  e escolha a opção “Objective-C Class” nos templates. Defina o nome como PageContentViewController e em seguida volte a StoryBoard selecione o menu Identify Inspector da ViewController em questão e defina o nome da Classe com o mesmo nome do arquivo criado, aproveite também para definir o StoryBoard ID o resultado será o seguinte:

Vamos agora adicionar a Label e o Botão adicionados na StoryBoard ao código, no arquivo PageContentViewController.h, para isso basta habilitar o modo Assistant Editor, repare nas setas indicando como habilitar esse modo e qual arquivo deverá estar selecionado.

Agora é fácil com a tecla control pressionada clique nos itens na storyBoard e arraste uma seta até o código na tela da direita. Ao arrastar o botão por exemplo, um balão será exibido e as configurações deverão ser iguais a indicadas na imagem abaixo:

Além disso, precisaremos declarar as seguintes variáveis:
– NSString para atribuir o texto a label
– NSUInteger para identificar a pagina selecionada
– NSArray para armazenar o conteúdo

por fim, precisaremos criar um objeto do tipo UIPageViewController, e adicionar o seu Procotolo de Delegate para controlar os movimentos, nosso arquivo ViewController.h ficará assim:

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
#import <UIKit/UIKit.h>

@interface PageContentViewController : UIViewController <UIPageViewControllerDataSource>

@property NSUInteger pageIndex;
@property NSString *titleText;
@property (weak, nonatomic) IBOutlet UILabel *labelText;
@property (nonatomic, retain) NSArray *titleLabel;
@property (nonatomic, retain) UIPageViewController *pageViewController;
– (IBAction)comecar:(UIButton *)sender;

@end
[/sourcecode]

Como adicionamos o Protocolo UIPageViewControllerDataSource teremos que implementar três funções, além disso deveremos popular a Array com o contéudo que será exibido, por tanto o  arquivo ViewController.m terá as seguintes modificações

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
– (void)viewDidLoad
{
[super viewDidLoad];
self.titleArray = @[@"Pagina 1", @"segunda Pagina", @"Terceira", @"4"];
}
[/sourcecode]

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
#pragma mark – Page View Controller Data Source

– (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
viewControllerBeforeViewController:(UIViewController *)viewController
{
NSUInteger index = ((PageContentViewController*) viewController).pageIndex;

if ((index == 0) || (index == NSNotFound)) {
return nil;
}

index–;
return [self viewControllerAtIndex:index];
}

– (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
viewControllerAfterViewController:(UIViewController *)viewController
{
NSUInteger index = ((PageContentViewController*) viewController).pageIndex;

if (index == NSNotFound) {
return nil;
}

index++;
if (index == [self.titleArray count]) {
return nil;
}
return [self viewControllerAtIndex:index];
}

– (PageContentViewController *)viewControllerAtIndex:(NSUInteger)index
{
if (([self.titleArray count] == 0) || (index >= [self.titleArray count])) {
return nil;
}

// Create a new view controller and pass suitable data.
PageContentViewController *pageContentViewController;
pageContentViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"PageContentViewController"];
pageContentViewController.titleText = self.titleArray[index];
pageContentViewController.pageIndex = index;

return pageContentViewController;
}
[/sourcecode]

Outras duas funções serão fundamentais, a primeira para indicar quantas páginas teremos e a segunda para informar qual a primeira página a ser exibida:

[sourcecode language=”objc” wraplines=”false” collapse=”false”]

- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController
{
    return [self.pageTitles count];
}

– (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController
{
    return 0;
}

[/sourcecode]

Para inicializar o pageControl adicione o seguinte código a ViewDidLoad da ViewController.m

[sourcecode language=”objc” wraplines=”false” collapse=”false”]

self.pageViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"PageViewController"];
    self.pageViewController.dataSource = self;
    // inicializa a pageViewController
    PageContentViewController *startingViewController = [self viewControllerAtIndex:0];
    NSArray *viewControllers = @[startingViewController];
    [self.pageViewController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];
   
    // muda o tamanho da page view controller
    self.pageViewController.view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height – 30);
   
    [self addChildViewController:_pageViewController];
    [self.view addSubview:_pageViewController.view];
    [self.pageViewController didMoveToParentViewController:self];
[/sourcecode]

Para alterar as cores do controlador de página basta acrescentar o seguinte código no arquivo AppDelegate.m na função, alterando as cores que achar conveniente: didFinishLaunchingWithOptions

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
UIPageControl *pageControl = [UIPageControl appearance];
pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
pageControl.currentPageIndicatorTintColor = [UIColor blackColor];
pageControl.backgroundColor = [UIColor whiteColor];
[/sourcecode]

Pronto, basta compilar o projeto e o resultado obtido será igual o da imagem a seguir: