O melhor pedaço da Maçã.
MM News

Receba os nossos principais artigos diariamente, por email.

Quaddro + MacMagazine: criando aplicativos para iOS e conhecendo o ambiente gráfico do Xcode

Single View Application

Depois da série sobre conceitos básicos e principais classes para este início de estudo, chegou a hora de dar um passo adiante e começar o trabalho com interface gráfica.

Publicidade

Requisitos

Motivation Instrumental, da cantora Kelly Rowland

Conceitos

Por mais que seja importante o conhecimento prévio das classes básicas para programação, o ambiente gráfico do Xcode é o elemento central para ligar as peças tela e códigos. Nos últimos textos, nós fizemos um uso bem focado do Xcode, direcionado apenas para arquivos de código e, consequentemente, sem explorar todos os painéis da ferramenta.

Desta vez, vamos subir um degrau e visar o desenvolvimento com elementos gráficos, para que tudo o que foi aprendido na programação possa ser colocado em prática em um projeto visual para o usuário.

Publicidade

Este texto será como uma visita guiada, então vamos à prática para começar as explicações e detalhamentos de recursos do ambiente gráfico do Xcode.

Prática

Vamos começar criando um novo projeto, mas desta vez usaremos um template diferente. Nas aulas, passadas por focarmos no código, estávamos usando o Command Line Tool na categoria OS X > Application. Agora escolheremos o Single View Application, na categoria iOS > Application.

Single View Application

Esse é o template básico de desenvolvimento de aplicativos para iOS, já que nos fornece uma estrutura pronta para adição de elementos na tela — ou mesmo múltiplas telas. Ao avançar, o sistema pede o nome do arquivo, assim como algumas outras definições. Vamos chamar nosso projeto de PrimeiroApp.

Nome - Configs

No item Devices, definam iPhone e confirmem se vocês estão com os dois primeiros checkboxes marcados. O primeiro (Use Storyboard) habilita a estrutura mais moderna de gerência de interface gráfica; o segundo (Use Automatic Reference Counting) habilita o chamado ARC, que é uma forma automática para gerenciamento de memória. Ambos são os recursos mais modernos e atuais em seus segmentos.

Interface inicial

A imagem acima ilustra como deve estar o ambiente do Xcode após o carregamento. Começarei por aqui algumas explicações.

Para ambientá-los nas áreas chaves da interface do Xcode, montei a seguinte imagem:

Estrutura - Areas

Aqui nós temos as seis áreas nas quais o ambiente gráfico do Xcode é dividido. Vamos às explicações sobre cada uma delas.

  • Toolbar: barra que concentra os controles gerais do Xcode para o projeto atual. No começo da barra temos os recursos para compilação e no final, os botões que exibem/ocultam áreas do ambiente gráfico.
  • Navigator: painel responsável por, entre outras coisas, exibir os arquivos atualmente incluídos e utilizados no projeto. Alguns exemplos de elementos listados no Navigator são: classes de programação, arquivos de interface gráfica, recursos como imagens, áudios, vídeos e frameworks.
  • Editor: área responsável por exibir o que foi selecionado no Navigator. Se a seleção for um arquivo de programação, o Editor possibilita a visualização e a edição de arquivo. No caso de imagens e vídeos, o painel se comporta como um player, exibindo a mídia selecionada.
  • Debug: área para exibição de recursos de debug e mensagens de log. Bastante usando durante a programação para testes e análises de erros.
  • Inspector: área responsável pelo controle e pelas configurações do que está selecionado no Editor. Se selecionarmos o arquivo de interface gráfica no Navigator, o Editor exibe a tela e seus elementos. Se selecionarmos um campo de texto no Editor, o Inspector mostra opções para definir cor de fundo, tipo de fonte, alinhamento e demais configurações suportadas pelo objeto selecionado. Também existem abas para controle de classes, definições de tamanho, posição e documentação.
  • Library: área que contém, entre outras coisas, os elementos gráficos que podem ser adicionados à tela do aplicativo. É aqui que nós encontramos campos de textos, botões, tabelas e demais objetos de UI (user interface). Também possui abas complementares para bibliotecas de arquivos, códigos e mídias do projeto.

Como a proposta deste texto é permitir esse contato inicial com a interface gráfica (imagino que seja o que a maioria esteja esperando desde o primeiro artigo), vamos inserir alguns objetos gráficos na tela do projeto atual.

Para isso, selecionem no Navigator o MainStoryboard. Ele é o arquivo responsável por definir a interface gráfica do aplicativo, sua quantidade de telas e transições entre elas. Uma vez que você o tenha selecionado, o Editor deve carregá-lo em sua área. Eis que temos o primeiro contato com a estrutura de tela de um aplicativo para iOS.

Storyboard

Aqui temos a estrutura básica da tela de um aplicativo para iOS, sendo composta pela barra de status na parte de cima e a tela de trabalho efetiva, abaixo (usamos o termo view). O termo técnico para toda essa área gráfica carregada no Editor é Canvas, pois a ideia, aqui, é compor visualmente a interface. Então, com ela carregada, vamos agora no painel Library e selecionar a terceira aba (Object Library). Com isso, teremos acesso aos elementos que podem ser adicionados à tela do nosso aplicativo. Eu vou arrastar para dentro da tela que está no Editor um objeto Label.

Label

Quando arrastamos um objeto para a tela, ele é inserido em sua forma básica, logo, cabe a nós fazer sua personalização visual. Com o label selecionado no Editor, podemos arrastar os controles de seu tamanho como quisermos. Com o tamanho definido, vamos agora no Inspector selecionar a quarta aba (Attributes). Lá eu alterei o Color para branco e o Alignment para centro (center). Um pouco mais para baixo, na rolagem do Inspector, vocês encontrarão a opção Background, que eu defini a cor laranja (uma pequena homenagem aos meus alunos do curso online, Vinicius, Gabriel e Rangel).

Com o nosso objeto label configurado, vamos agora inserir mais um elemento na interface gráfica do nosso aplicativo. Voltando ao Object Library, eu vou arrastar para a tela agora o elemento que tem como ícone uma barra com os números 1 e 2. Seu nome é SegmentedControl.

Segmented

Novamente, ao arrastar o objeto para a tela, ele vem “limpo”. O primeiro ajuste que eu farei é clicar duas vezes em cada lado do texto e alterar seus valores: Curso Completo e Curso Modular. Ainda com o objeto selecionado, no Inspector agora temos os controles específicos de um SegmentedControl. Vou mudar a primeira opção Style para Bar. Isso já nos dá uma tela com o texto básico do Label e com o SegmentedControl servindo de menu interativo. Vamos testar?

Essa é a “cereja do bolo” pois, depois de definir tudo visualmente, chegou a hora de ver sua criação em funcionamento. Aqui, alguns poderiam pensar: “Mas Danilo, eu ainda não tenho a conta paga para testar no meu iPhone!” A boa notícia é que, com o Xcode, é instalado um simulador que serve de “iPhone Virtual”. Duvida? Clique no botão play (Run) no começo da barra de ferramentas ou então use o atalho Command + R. Agora, como eu digo nos meus cursos na Quaddro Treinamentos, são “momentos de tensão!”

Depois de esperar um pouco (tudo bem, às vezes não é tão pouco assim :-P) devemos ter carregado na tela o iOS Simulator que recebeu e está exibindo o seu primeiro aplicativo gráfico para iOS.

Simulator

Curtindo o momento de empolgação pelo primeiro “encontro” com o Simulator, você já dá aquela respirada like a boss, do tipo “Rá! Já sou um iOS Developer”. Mas não se esqueça de que ainda é preciso definir o comportamento de código para que o clique no SegmentedControl dispare alguma coisa no seu código. Mas isso são cenas dos próximos capítulos. O intuito deste texto era fazer a apresentação inicial do ambiente e de seus painéis, então eu vou deixar vocês com esse ar de “até agora está fácil!” 😉

Nos próximos textos integraremos os elementos de tela com códigos para dar “vida” aos nossos aplicativos. Para dúvidas e debates, como sempre, indico o tópico oficial, no fórum da Quaddro. E confira aqui todos os artigos que já publicamos no MacMagazine.

Um abraço a todos e até a próxima!

Ver comentários do post

Artigo Anterior
Pai em Apple Retail Store

↪ Feliz Dia dos Pais! :-D

Próximo Artigo
iPhone com cor ouro

Rumores do dia: "iPhone 5S" com modelo dourado, "iPhone 5C", botão Home de safira e iPad mais fino

Posts Relacionados