Tutorial iOS – Criando/Personalizando uma Tab Bar utilizando o storyboard – Parte 1

On 22 de setembro de 2014 by Rafael Lage

Nesse tutorial iremos aprender a fazer um aplicativo simples com estrutura de Tab Bar. Iremos utilizar a StoryBoard que facilita bastante para usuários novos, já que diminui significativamente a utilização de código e facilita o entendimento do fluxo dos aplicativos. Inicialmente iremos criar a Tab Bar, adicionar novas views, personalizar os itens, mudar as cores. Para isso devemos seguir os seguintes passos:

1 – Crie uma Single View Based Aplication:
Captura de Tela 2014-08-19 às 10.33.03

2 – Vá em Main.storyboard delete a ViewController que está criada e arraste Tab Bar Controller:

tabbar1

 

OBS: Aqui nós já temos uma aplicação simples que possui duas Tabs, coloque algum texto e rode-a para ver seu funcionamento.

 

Personalizando Item

 3 – Agora vamos personalizar o item da Tab Bar. Na Main.storyboard vá na viewController que você deseja alterar a imagem e clique no item. Ao clicar você verá que a seguinte barra lateral aparecerá(imagem abaixo), nesta barra podemos alterar o nome e imagem podendo usar uma imagens já disponibilidades pela Apple ou as que preferirmos:

tabBar3

 

Adicionando novos itens/views

 4 -Essa Tab Bar tem como padrão 2 itens, mas podemos adicionar novas viewControllers. Para isso crie uma nova viewController e segurando “control” conecte a Tab Bar à viewController e selecione a opção “view controllers”:

tabBar4

 

tabbar5

 

tabbar6

Resultado (Clique para ver a animação)

tabgif

Projeto: tabBar.zip

Deixe um comentário

O seu endereço de e-mail não será publicado.