[MÚSICA]
[MÚSICA] E aí, pessoal, tudo bem?
Nessa aula criaremos a interface visual do nosso quiz.
Com o Xcode aberto vamos criar novo projeto.
Clique em File, New, Project.
Escolha Single View Application e escolha o nome do projeto.
Selecione a linguagem
de programação Swift e na opção Devices escolha iPhone.
Escolha a pasta onde você deseja gravar o seu projeto e clique em Create.
No Main storyboard,
a primeira coisa que devemos fazer é criar a área de fundo do nosso quiz.
Para isso vamos criar uma nova view.
Como a cor de
fundo padrão é branca, vamos escolher uma outra cor para melhor visualização.
[SEM_ÁUDIO] Redimensione essa view para tamanho proporcional ao iPhone 5.
Para a largura coloque 320 pixels
e para a altura, 568.
Na posição X deixe
como 0 e na posição Y também 0.
Vamos adicionar agora uma label para o texto da nossa questão.
[SEM_ÁUDIO] Redimensione para o tamanho da área desejada.
[SEM_ÁUDIO] Vamos
centralizar o texto da questão,
tirar o número máximo de linhas
e escolher o modo de quebra de linha por palavra.
E vamos atualizar o texto da questão.
Agora adicione uma imagem que vai ilustrar a pergunta.
[SEM_ÁUDIO] Mas
antes de escolher a imagem de exemplo,
nós temos que importar algumas imagens para a pasta image.xcassets.
Nós deixamos disponível no material de apoio
link do arquivo ZIP com os arquivos que iremos utilizar nesse módulo.
Faça o download, descompacte o arquivo e para essa
aula selecione apenas as imagens.
Clique e arraste para dentro dessa área.
E então agora nós conseguimos selecionar uma dessas imagens.
Selecione a do elefante.
Escolha o modo de visualização Aspect Fit.
Agora podemos
incluir os 3 botões que são as nossas alternativas de resposta.
Redimensione.
[SEM_ÁUDIO] Escolha
uma cor de fundo para esse botão,
[SEM_ÁUDIO] a cor do
texto e aumente pouco o tamanho da fonte.
Atualize também o texto do botão.
Copie e cole esse botão mais 2 vezes.
Posicione e atualize também o texto desses botões.
[SEM_ÁUDIO] Vamos agora
criar uma caixa de diálogo com o usuário.
Para isso vamos criar uma view de feedback.
[SEM_ÁUDIO] Redimensione
[SEM_ÁUDIO] e
escolha uma cor de fundo.
[SEM_ÁUDIO] Adicione uma label.
[SEM_ÁUDIO] E
da mesma forma que fizemos com a outra label vamos centralizar,
tirar o número máximo de linhas e escolher a quebra de linha por palavra.
Atualize o texto para a label feedback.
Copie desses botões para dentro da área de feedback.
Reposicione e atualize o texto.
Por enquanto não se preocupe com o texto
de feedback porque nós vamos atualizar esse texto por código.
Para uma melhor organização renomeie essa view para ViewFeedback e a outra view,
renomeie para ViewBackground.
[SEM_ÁUDIO] E por
fim vamos ocultar a view de feedback.
[SEM_ÁUDIO] Rode
o aplicativo no simulador de iPhone 5s para ver o resultado.
[SEM_ÁUDIO] E
com isso temos pronta a interface gráfica do nosso aplicativo.
Na próxima aula veremos como interligar cada objeto desse com nosso código.
Até lá!