[MÚSICA]
[MÚSICA] E
aí pessoal, tudo bem?
Nessa aula iremos utilizar o Tab Bar Controller.
Criaremos aplicativo que utiliza diversos view controllers disponíveis em abas
de tab bar.
Vamos iniciar criando novo projeto com a opção Single View Application.
Escolha o nome do projeto e em devices vamos usar iPad.
[SEM_ÁUDIO] Com
o projeto criado vamos trabalhar no storyboard.
Selecione o View Controller existente.
Agora vá em Editor, Embeded In e selecione Tab Bar Controller.
Isso já adiciona o Tab Bar Controller automaticamente no
seu projeto nesse View Controller selecionado.
Adicione novo View Controller.
[SEM_ÁUDIO] Repare
que o primeiro View Controller tem uma Tab Bar.
Selecionando essa barra podemos fazer algumas adições.
Coloque System Item existente, o Favorites.
Além disso
adicione uma label no meio desse View Controller e modifique para Favoritos.
[SEM_ÁUDIO]
[SEM_ÁUDIO] Agora
selecione o Tab Bar Controller.
Na aba de conexões temos que o Favorites View Controller já está conetado.
Clique e arraste até ao segundo View Controller para conetá-lo também.
Com essa conexão feita podemos mudar o ícone da barra também.
Nesse caso use o item More.
Aproveite também para adicionar uma label no centro desse View Controller.
[SEM_ÁUDIO] Modifique para Outros.
[SEM_ÁUDIO] Agora
vamos adicionar mais View Controller entre esses dois existentes.
Arraste o primeiro para cima e o segundo para baixo,
apenas para deixar o storyboard organizado.
[SEM_ÁUDIO]
[SEM_ÁUDIO]
[SEM_ÁUDIO]
[SEM_ÁUDIO] Em seguida conete esse View Controller
ao Tab Bar Controller, como já fizemos com o segundo View Controller.
[SEM_ÁUDIO] Além
disso vamos adicionar uma label como nos outros.
[SEM_ÁUDIO] Modifique
para Social.
Vou colocar uma imagem importada como ícone desse View Controller.
Para isso importe uma imagem
que seja 128x128 pixeis para a pasta xcassets.
No material de apoio para esse módulo tem
arquivo .zip com a imagem que iremos utilizar nessa aula.
Descompacte o arquivo e arraste a imagem
SocialIcon.png para a pasta xcassets.
Com isso feito podemos voltar ao storyboard,
selecionar o Tab Bar do Social View Controller e mudar
a imagem para SocialIcon.
Veja que a imagem está com tamanho maior do que a aba de navegação.
[SEM_ÁUDIO] Vá para
a pasta xcassets e mova a imagem para a posição 3x.
[SEM_ÁUDIO] Repare
que apesar de estar entre os dois outros View Controllers no storyboard
esse último View Controller foi colocado na última aba do Tab Bar.
Para mudar a posição, primeiramente selecione o Tab Bar Controller.
Agora clique no ícone que adicionamos e arraste para o centro do Tab Bar.
Vamos executar e ver como está o aplicativo.
[SEM_ÁUDIO]
[SEM_ÁUDIO] Veja
que cada ícone da barra está associado a View Controller do storyboard
o que corresponde a uma tela do aplicativo.
Na próxima aula você vai ver como utilizar constraints.
Até lá!