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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
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!
