UITabBarController

Continuando nosso guia sobre principais items de UI, hoje abordaremos UITabBarController como tópico. Acredito que não teremos problemas com o UITabBarController, pois tudo será feito no IB (Interface Builder), de forma simples e rápida.

Por | @reprotector Programação

Continuando nosso guia sobre principais items de UI, hoje abordaremos UITabBarController como tópico. Acredito que não teremos problemas com o UITabBarController, pois tudo será feito no IB (Interface Builder), de forma simples e rápida.

Vamos iniciar criando nosso projeto no xCode com o template de UITabBar Application e iPhone selecionado como Product. Salvei-o com o nome de TabBar.

UITabBarController


Repare que desta vez foram criadas duas classes: TabBarAppDelegate e FirstViewController. Mas não vamos mexer nelas por enquanto. Vamos abrir o arquivo MainWindow.xib no Interface Builder:
UITabBarController


Repare que temos dois View Controller’s dentro de nosso UITabBarController. Isso significa que esses dois objetos são itens que estarão “linkados” na Tab Bar. Se dermos Build&Run no projeto, já teremos uma aplicação com 2 itens na Tab Bar, sendo eles First e Second, com os conteúdos de FirstView.xib e SecondView.xib . Repare também, que o viewController de First é objeto da classe FirstViewController e que o viewController de Second é objeto da UIViewController padrão. Podemos fazer isso pois não temos nenhuma interatividade com o usuário dentro da Second. Poderíamos fazer a mesma coisa com a classe de First, que não teríamos nenhum problema.

Para vermos como é fácil adicionar novos itens na tab bar vamos criar um novo item. Clique com o botão direito em resource e selecione Add New File. Selecione User Interface e depois view como template. Nomeio-o como ThirdView.xib. (veja a figura abaixo)
UITabBarController


Ainda em MainWindow.xib, vamos colocar o viewController que será usado para o ThirdView. Abra o Library com a lista de objetos de UI. Para fazer isso, clique em Tools > Library. Arraste o viewController para dentro de UITabBarController:
UITabBarController


Dê dois cliques no ViewController que acabamos de criar e escreva ThirdView no campo Nib Name. Agora, vamos colocar o título para o nosso item na TabBar. Para isso, dê dois cliques em cima do TabBarItem referente a esse view. Veja na figura abaixo:
UITabBarController


Repare que temos o campo Image como um dos atributos. Este campo representa o ícone que é exibido acima do label de título na tab bar. Para utilizá-lo, é muito simples, basta adicionar uma imagem ao projeto (botão direito em Resources>add existing files) e colocar o nome da imagem neste campo (exemplo: ThirdIcon.png). A imagem deve ser salva em formato PNG e ser 30×30. Como padrão da Apple, este ícone terá tons de cinza e um gradiente em azul quando estiver selecionado. Isso não pode ser mudado de forma nativa, mas mais pra frente irei ensinar como “burlar” isso.

Estamos prontos para dar um Build&Run no projeto. Não aparecerá nada na tela de ThirdView pois não colocamos nada no seu xib, mas você pode brincar o quanto quiser. Se quiser colocar interatividade com o usuário, terá que criar uma classe que herda UIViewController para ser pai de ThirdView. Após isso, deve modificar o viewController dentro de UITabBarController.

Recomendo fazer isso para se acostumar com as nomenclaturas e ver que não é difícil fazer por conta própria.

Mais sobre: mobile iPhone desenvolvimento
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo

Siga nossas contas no Twitter