Tutorial iOS – Criando um menu lateral deslizante

On 26 de agosto de 2014 by Conrado Carneiro

Uma tendência dos aplicativos para iOS atualmente é a utilização do Menu lateral, aplicativos famosos como do Facebook e Google adotam ou já adotaram esse sistema de layout, conforme podemos notar na imagem do aplicativo do GMail a seguir:

Hoje iremos abordar um tutorial ensinando a fazer um menu semelhante, então mãos a obra!!!

1. Criar um projeto no XCode
Abra o XCode e crie um projeto do tipo iOS -> Application -> Single View Application.
Criei um projeto com o nome CCSideBar, e o resultado podemos ver a seguir:

Captura de Tela 2014-08-26 às 13.42.25

 

A primeira tarefa será adicionar uma Biblioteca ao projeto, que pode ser baixada em: SWRevealViewController.
Após baixar e descompactar o arquivo, arraste os dois arquivos existentes para dentro do projeto.

Captura de Tela 2014-08-26 às 13.44.46

 

Feito isso, selecione o arquivo Main_iPhone.storyboard e vamos trabalhar um pouco na interface.
Selecione a ViewController(1) existente vá no Identify Inspector (2) e determine o nome da Classe como SWRevealViewController (3).

Captura de Tela 2014-08-26 às 13.46.23

 

Agora, vamos adicionar ao projeto:
– Table View Controller (1)
– Navigation Controller (2) seguido de uma View Controller (3)

Por fim, devemos clicar e segurar com botão direito do mouse sobre a Primeira View (Reveal View Controller) (4) e arrastar até a TableView ao soltar um balão será exibido e devemos selecionar a opção: reveal view controller.
O mesmo procedimento deverá ser feito para a Navigation Controller.
Por fim as views deverão estar interligadas conforme a imagem a seguir. (5)

Captura de Tela 2014-08-26 às 13.54.06

Agora, clique sobre a linha que liga a Reveal View Controller até Table View Controller (1) e vá em Attributes Inspector (2) e defina o Identifier como sw_rear (3), realize o mesmo procedimento com a ligação da Reveal View Controller com a Navigation Controller porem defina como sw_front.

Captura de Tela 2014-08-26 às 14.03.10

Crie a classe MainViewController do tipo UIViewController e atribua ao view Controller que está em seguida ao Navigation Controller.

No arquivo MainViewController.h adicione a biblioteca a baixo:

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
#import "SWRevealViewController.h"
[/sourcecode]

Além disso, no arquivo MainViewController.m na função ViewDidLoad adicione o seguinte código:

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
    // Mudar a cor do botão
    _sidebarButton.tintColor = [UIColor redColor];

    // Define a ação do botão da Navigation Bar, quando for pressionado o menu será exibido.
    _sidebarButton.target = self.revealViewController;
    _sidebarButton.action = @selector(revealToggle:);

    // Define o movimento a ser feito para mostrar ou ocultar o menu
    [self.view addGestureRecognizer:self.revealViewController.panGestureRecognizer];
[/sourcecode]

Por fim, volte ao Interface Builder clicando no arquivo Main_iPhone.storyboard selecione a view MainViewController (1) e arraste um Bar Button Item (2) para a navigation bar (3), conforme mostrado na imagem:

Captura de Tela 2014-08-26 às 14.15.09

 

Por fim, precisamos ligar o botão ao código, e para isso clique no Assistant editor  (1) selecione o arquivo MainViewController.h (2) clique e segure sobre o Bar Button item (3) pressionando ao mesmo tempo a tecla Control e arraste até o código, ao soltar um balão será exibido e defina como Connection: Outlet,  name: sidebarButton e Type: UIBarButtonItem (4)

Captura de Tela 2014-08-26 às 14.20.27

Resultado final do menu em funcionamento:

test

Para baixar o projeto completo: CCSideBar

One Response to “Tutorial iOS – Criando um menu lateral deslizante”

  • Olá, show esse tutorial, sendo que fiz todo o procedimento e estou com esse erro.

    ‘NSInvalidArgumentException’, reason: ‘-[UIButton setTarget:]: unrecognized selector sent to instance

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *