Você tem uma ideia para um aplicativo, mas não tem o conhecimento de programação para começar a construí-lo? Nesta série semanal de blogs, How To Unleash Your Inner App Developer, vou levar você, o não programador, passo a passo pelo processo de criação de aplicativos para iPhone, iPod Touch e iPad. Junte-se a mim a cada semana nesta aventura, e você vai experimentar como pode ser divertido transformar suas ideias em realidade! Esta é a parte 6 da série. Se você está apenas começando agora, confira o início da série aqui (este post foi atualizado para iOS 8, Xcode 6.3 e Swift 1.2.)
No meu postagem anterior , você foi apresentado a vários controles da interface do usuário, incluindo o campo de texto, a exibição de texto, a exibição de imagem e o botão de retângulo arredondado. Terminamos o principal Revisão do iApps cena e adicionou um novo Categoria do aplicativo cena.
Tirando as rodinhas de treinamento
Agora que você aprendeu algumas das habilidades básicas para adicionar novas cenas a um storyboard e configurar visualizações de tabela, farei com que você crie algumas cenas por conta própria. Acho que uma vez que você tira as rodinhas (as instruções passo a passo explícitas com imagens para cada passo), você verdade descobrir o que você sabe, e o que você não sabe. Todas as instruções para criar as cenas neste post podem ser vistas no vídeo que criei para este post que pode ser encontrado em esse link . Este vídeo usa o Xcode 5, mas as instruções são praticamente idênticas ao Xcode 6.
VEJA TAMBÉM Usuário Mac faz logoff
Para começar, inicie o Xcode e abra o projeto iAppsReview que você criou até agora, ou você pode baixar o projeto em esse link .
Criando a cena Minhas revisões
Como mostrado no lado direito de figura 1 , a primeira cena que você vai criar é a Minhas avaliações cena. Nesta cena, o usuário pode ler as avaliações que escreveu para diferentes aplicativos. Esta cena é desencadeada a partir do Leia seus comentários linha do Revisão do iApps cena.
 |
| Figura 1 - A Minhas avaliações cena é acionada a partir do Leia seus comentários fileira. |
Você já aprendeu tudo o que precisa saber para criar o Minhas avaliações cena. Os principais passos a seguir são descritos abaixo. Depois, você pode assistir Parte A do vídeo que criei para este post:
- Adicionar um novo Controlador de exibição de tabela ao storyboard. Embora figura 1 mostra a cena diretamente à direita do Revisão do iApps cena por uma questão de clareza, eu recomendo posicioná-lo diretamente abaixo do Escrever análise cena em vez disso;
- Crie um Empurre segue entre o Leia seus comentários linha do Revisão do iApps cena e o novo controlador de exibição de tabela.
- Na barra de navegação da nova cena, altere o título para Minhas avaliações .
- Alterar a visualização da tabela Contente atribuir a Células estáticas .
- Alterar a visualização da tabela Estilo atribuir a Agrupado .
- Exclua as duas últimas células no modo de exibição de tabela.
- Altere as células restantes Estilo atribuir a Básico .
- Defina a célula Acessório atribuir a Indicador de divulgação .
- Faça quatro duplicatas da célula.
- Mudar o Texto do rótulo da célula de Título para Doodle Jump .
- Mudar o Texto dos rótulos das outras células para o texto mostrado em Figura 1.
- Execute o App no Simulador para ver como fica em tempo de execução!
Criando a cena de avaliações online
Em seguida, você vai criar o Avaliações on-line cena mostrada no lado direito de Figura 2 . Essa cena permite que os usuários leiam avaliações on-line que outros usuários escreveram. Esta cena é desencadeada a partir do Leia comentários on-line fila na Revisão do iApps cena.
 |
| Figura 2 - A Avaliações on-line cena é acionada a partir do Leia comentários on-line fileira. |
Essa cena é muito parecida com a Minhas avaliações cena que você criou na seção anterior, exceto que a visualização de tabela tem duas seções em vez de uma. A célula na primeira seção da visualização de tabela tem seu Estilo atributo definido como Detalhe à direita . As células na segunda seção da visualização de tabela têm seus Estilo atributo definido como Básico . Por uma questão de organização, recomendo que você localize essa nova cena no storyboard diretamente abaixo do Minhas avaliações cena que você criou na seção anterior.
Veja se você pode criar essa nova cena sozinho. Você pode consultar as etapas na seção anterior e em postagens anteriores para obter dicas, mas tente criá-lo por conta própria. Depois, você pode assistir Parte B do vídeo que criei para este post.
Criando a cena de revisão
Tanto o Minhas avaliações e Avaliações on-line cenas podem compartilhar um Análise cena onde o usuário pode ler seus próprios comentários, bem como comentários postados por outros on-line. Figura 3 mostra como deve ser a cena final. Esta cena pode ser iniciada a partir do Doodle Jump fila na Minhas avaliações cena, bem como o Doodle Jump fila na Avaliações on-line cena.
 |
| Figura 3 - A Análise cena |
Novamente, você deve ser capaz de criar esta cena a partir das informações que dei a você em meus posts anteriores. Depois, você pode assistir Parte C do vídeo que criei para este post.
Aqui está uma lista dos principais passos:
- Adicionar um Ver controlador para o storyboard e posicione-o à direita do Minhas avaliações cena.
- Crie um Empurre segue do Doodle Jump linha do Minhas avaliações cena para o novo controlador de exibição.
- Crie um segundo Empurre segue, desta vez do Doodle Jump linha do Avaliações on-line cena para o novo controlador de exibição.
- Altere o título da barra de navegação no novo controlador de visualização para Análise .
- Colocou o Fundo atributo de cor para a cor de lápis cinza claro chamada Mercúrio .
- Adicionar um Etiqueta para o centro superior da cena (posicionado de acordo com as linhas de guia). Esse rótulo é usado para exibir o nome do aplicativo que está sendo revisado. Mudar o Fonte atributo do rótulo para Sistema Negrito 17.0 . Colocou o Alinhamento do rótulo para Centralizado e, em seguida, estique os lados esquerdo e direito do rótulo até a largura da cena até ver as linhas guia esquerda e direita aparecerem. Por fim, altere o texto do rótulo para Doodle Jump .
- Adicione um segundo Etiqueta diretamente abaixo do rótulo que você acabou de adicionar. Esse rótulo é usado para exibir a categoria do aplicativo. Defina o rótulo Alinhamento para Centralizado e, em seguida, estique o rótulo para as bordas esquerda e direita da cena usando as linhas-guia. Por fim, altere o texto do rótulo para Entretenimento .
- Agora você está pronto para adicionar o controle de revisão de cinco estrelas à cena. Para fazer isso, adicione um Visão para a cena diretamente abaixo do rótulo que você acabou de adicionar e coloque sua borda esquerda na linha guia esquerda da cena. Vá para o Inspetor de tamanho e altere a visualização Largura para 175 e a altura de 60 . Depois, vá para o Identity Inspector e altere o Classe para mmStarRating . Por fim, altere a cor de fundo do controle de cinco estrelas para Mercúrio .
- Adicionar um Visualização da imagem diretamente abaixo do rótulo, mas no lado direito da cena. A visualização da imagem é usada para exibir uma miniatura de uma imagem que pode estar associada à revisão. Vá para o Inspetor de tamanho e altere a visualização da imagem Largura para 40 e os seus Altura para 60 . Depois, reposicione a visualização da imagem para o lado direito da cena. Finalmente, vá para o Inspetor de Atributos e defina o Imagem para AddImage.png .
- Adicionar um Visualização de texto controle diretamente abaixo do controle de revisão de cinco estrelas. A visualização de texto será usada para exibir os comentários da revisão. Em seguida, centralize a visualização de texto na cena e, em seguida, estique os lados esquerdo e direito da visualização de texto até as bordas da cena usando as linhas-guia. Exclua o texto latino da visualização de texto e substitua-o pelo texto mostrado em Figura 3 (ou texto de sua escolha).
- Em seguida, puxe a parte inferior do controle de exibição de texto para baixo em direção à exibição de imagem até ver a linha guia horizontal aparecer.
- Embora não seja mostrado no vídeo que acompanha este post, você precisa especificar o auto-dimensionamento para os controles nesta cena como fizemos para a cena Write Review no meu post anterior. Tente descobrir as configurações corretas por conta própria e, em seguida, examine o link do projeto concluído no final desta postagem para ver como você se saiu.
- Execute o App no Simulador para ver como fica a nova cena em tempo de execução!
Criando a cena de configurações
A próxima cena que precisa ser criada é a Definições cena mostrada em Figura 4 . Essa cena permite que o usuário faça login usando seu e-mail e senha ou, se ainda não tiver uma conta, inscreva-se em uma. Mais adiante nesta série de blogs, aprimoraremos essa cena para que o usuário possa inserir seu endereço de e-mail e senha diretamente nas linhas da visualização da tabela.
 |
| Figura 4 - A Definições cena. |
Vá em frente e tente isso por conta própria usando as etapas descritas abaixo e, depois, você pode assistir D-share do vídeo que criei para este post.
- Adicione um Table View Controller ao storyboard e coloque-o abaixo do Avaliações on-line cena.
- Crie um Empurre segue do Configurações e comentários linha do Revisão do iApps cena para o novo controlador de exibição de tabela.
- Altere o título na barra de navegação da nova cena para Definições .
- Alterar a visualização da tabela Contente atribuir a Células estáticas , e os seus Estilo atribuir a Agrupado .
- Exclua as duas últimas células na exibição de tabela, deixando uma célula restante.
- Altere as células restantes Estilo atribuir a Básico .
- Mudar o Cor atributo ao lápis rotulado Acreditar .
- Como precisamos de duas células nesta visualização de tabela, clique no rótulo da célula e clique novamente nele para selecionar a própria célula. Depois, pressione Comando+D para criar uma duplicata da célula.
- Altere o texto do rótulo da primeira célula para Endereço de email e o rótulo da segunda célula para Senha .
- Agora vamos definir o texto do cabeçalho da visualização de tabela. Para fazer isso, clique na área cinza ao lado da visualização de tabela para selecionar a seção de visualização de tabela e, em seguida, altere a Cabeçalho atribuir a Faça login usando e-mail e senha .
- Agora precisamos adicionar uma view diretamente abaixo da table view para conter os outros controles na cena. Para fazer isso, adicione um Visão para a cena e posicione-a abaixo da visualização da tabela até ver a barra horizontal azul aparecer e, em seguida, solte o mouse para colocar a visualização na cena. Em seguida, arraste a alça de redimensionamento na parte inferior da visualização até que a altura da visualização seja 264 píxeis.
- Mudar o Fundo atributo de cor da vista para o Mercúrio cor de lápis.
- Adicionar um Botão no centro superior da visualização que você acabou de adicionar. Você pode colocá-lo diretamente contra a borda superior da visualização. Altere o título do botão para Conecte-se . Estique os lados esquerdo e direito do botão para as bordas esquerda e direita da cena. Depois, defina o Fundo atributo de imagem do botão para branco.png .
- Adicionar um Etiqueta centralizado diretamente abaixo do botão que você acabou de adicionar, usando a linha guia horizontal para espaçamento. Colocou o Alinhamento atributo do rótulo para Centralizado e, em seguida, estique as bordas esquerda e direita do rótulo até as linhas guia verticais na cena. Em seguida, altere a Fonte do rótulo para Sistema 14.0 . Por fim, altere o Texto do rótulo para Não tem uma conta ainda? Inscrever-se!
- Adicionar um Botão centralizado diretamente abaixo do rótulo que você acabou de adicionar. Altere o texto do rótulo para Inscrever-se . Depois, estique os lados esquerdo e direito do botão para as linhas guias verticais esquerda e direita da cena e, em seguida, defina o Fundo para branco.png .
- Adicionar um final Botão para o centro inferior da cena. Mudar o Texto do rótulo para Dar uma resposta . Depois, estique os lados esquerdo e direito do botão para as linhas guias verticais esquerda e direita da cena e, em seguida, defina o Fundo para branco.png .
- Assim como na cena anterior, você precisa especificar configurações de autodimensionamento para os botões, rótulo e a visualização que os contém. Novamente, você pode examinar o projeto finalizado para verificar seu trabalho.
- Execute o App no Simulador para ver como fica a cena em tempo de execução!
Há mais uma cena a ser criada - a Comentários cena que permite ao usuário fornecer feedback sobre o aplicativo. Essa cena fornece alguns desafios especiais que exigem que escrevamos uma pequena quantidade de código, então abordaremos isso no meu próximo post.
Felizmente, você conseguiu executar a maioria das etapas por conta própria. Caso você tenha problemas ao seguir essas etapas, você pode baixar o projeto concluído em esse link . Se você teve que confiar nos vídeos para concluir cada cena, recomendo voltar e tentar novamente até poder concluir as etapas por conta própria. Fazer isso fornecerá uma base sólida para criar protótipos de seus próprios aplicativos iOS!