Liberte seu desenvolvedor de aplicativo interno Parte 5: Próximas etapas

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ê experimentará como pode ser divertido transformar suas ideias em realidade! Esta é a parte 5 da série. Se você está apenas começando agora, confira o início da série aqui .

No meu postagem anterior , você aprendeu a navegar entre diferentes cenas em seu aplicativo e aprendeu a usar controles de interface de usuário personalizados em seus aplicativos. Começamos a construir o Escrever análise cena (mostrada no lado esquerdo da figura 1 ), que terminaremos neste post, e passaremos para o Categoria do aplicativo cena mostrada no lado direito de Figura 1. (Esta postagem foi atualizada para iOS 8, Xcode 6.3 e Swift 1.2 ) .

Figura 1 - O preenchimento Escrever análise e Categoria do aplicativo cenas.

Abrindo o Projeto

Siga estes passos para abrir o Revisão do iApps projeto (você também pode baixar o projeto de esse link ).

1. Inicie o Xcode no seu Mac e selecione Revisão do iApps no Recente painel no lado direito da janela de boas-vindas e clique em Abrir . Você também pode selecionar Arquivo > Abrir Recente > iAppsReview.xcodeproj no menu Xcode.

1. Depois que o projeto for aberto, vá para o Project Navigator no lado esquerdo da janela do Xcode e selecione storyboard principal arquivo para exibi-lo na superfície de design.

Adicionando uma visualização de imagem à cena

O primeiro controle que adicionaremos à cena é um visualização da imagem . Uma visualização de imagem é usada para exibir uma única imagem ou uma animação composta por várias imagens. Neste aplicativo, precisamos que a visualização da imagem exiba uma única imagem em miniatura de qualquer foto que o usuário selecione em seu álbum de fotos. Vamos adicionar a visualização da imagem agora.

1. Arraste um Visualização da imagem do Pesquisador de objetos e posicione-o à direita do botão de controle Cinco estrelas. Quando a linha guia vertical aparece no lado superior e direito da visualização da imagem ( Figura 2 ), solte o botão do mouse para colocar a visualização da imagem na cena.

Figura 2 - Adicionar um Visualização da imagem para a cena.

1. Obviamente, o Visualização da imagem é muito maior do que queremos, então vamos torná-lo menor. Para fazer isso, pegue o canto inferior esquerdo da visualização da imagem e arraste o canto para cima e para a direita até que o tamanho seja 40,0 para largura e 60,0 para altura ( Figura 3 ).

Figura 3 - Redimensionar o Visualização da imagem .

1. O trabalho de uma visualização de imagem é exibir uma imagem. No momento, quando um usuário cria uma nova avaliação, não haverá imagem a ser exibida na visualização de imagens, portanto, ela ficará invisível. Eventualmente, permitiremos que o usuário clique na visualização da imagem para selecionar uma imagem de sua biblioteca de fotos. Para indicar ao usuário que ele pode clicar na imagem, vamos adicionar uma imagem à visualização de imagens. No Inspetor de Atributos clique na seta para baixo no lado direito do Imagem caixa de combinação de atributos e selecione Adicionar Imagem da lista. Isso exibe 'Adicionar imagem' na visualização da imagem, conforme mostrado em Figura 4 .

Figura 4 - Definir a visualização da imagem Imagem atributo.

1. Agora vamos fixar a visualização da imagem para que ela permaneça em sua posição em relação aos lados superior e direito de sua visualização pai. Com a visualização da imagem selecionada, vá para o Inspetor de tamanho clicando no segundo botão à direita na barra de ferramentas do Inspetor no lado superior direito da janela do Xcode ( Figura 5 ). No lado esquerdo do Redimensionamento automático seção há um quadrado contendo barras I, setas de duas pontas e um quadrado interno.

O quadrado interno representa o controle de interface do usuário atualmente selecionado na superfície de design (neste caso, a visualização da imagem). O quadrado externo representa a exibição que contém o controle de interface do usuário. As barras 'I' entre esses dois quadrados são conhecidas como 'struts'. você pode selecionar structs para fixar o controle de interface do usuário em um ou mais lados da exibição pai.

As setas dentro do retângulo interno são conhecidas como 'molas'. Você pode selecionar essas setas para especificar se deseja que a largura e a altura do controle sejam redimensionadas conforme a visualização pai muda de tamanho.

Para fixar a posição relativa da visualização da imagem nos lados superior e direito de sua visualização pai, desmarque a barra I no lado esquerdo da Redimensionamento automático quadrado e selecione a barra I no lado direito da Redimensionamento automático quadrado ( Figura 5 ).

Figura 5 - Fixe a visualização da imagem no canto superior direito da visualização que a contém.

Adicionando um campo de texto à cena

No Escrever análise cena mostrada em figura 1 , o controle de interface do usuário mostrado abaixo do controle de classificação de cinco estrelas é conhecido como campo de texto . Um campo de texto exibe uma única linha de texto que pode ser editada pelo usuário. Nesse caso, o campo de texto permite que o usuário insira o nome do aplicativo que está avaliando. Vamos adicionar um campo de texto à cena agora.

1. Arraste um Campo de texto do Pesquisador de Objetos e posicione-o abaixo da visualização da imagem, conforme mostrado em Figura 6 . Quando a linha guia horizontal aparecer abaixo da visualização da imagem e a linha guia vertical aparecer à direita, solte o botão do mouse para colocar o campo de texto na cena.

Figura 6 - Adicione um campo de texto à cena.

A linha guia horizontal indica o espaço recomendado entre os controles da interface do usuário em uma cena e a linha guia vertical indica o espaçamento recomendado da borda esquerda de um controle da interface do usuário até a borda esquerda da cena.

1. Agora vamos estender o campo de texto para a largura da cena (menos o espaçamento recomendado da borda). Para fazer isso, clique na alça de redimensionamento (o pequeno quadrado branco) no lado esquerdo do campo de texto e arraste-o para a borda esquerda da cena até que a linha guia vertical apareça conforme mostrado em Figura 7.

Figura 7 - Redimensione a largura do campo de texto.

1. É uma boa ideia adicionar texto de espaço reservado a um campo de texto para fornecer ao usuário uma pista sobre o tipo de informação que você deseja que ele insira. Texto do espaço reservado (como mostrado no lado esquerdo da Figura 8) aparece em um campo de texto como uma marca d'água cinza claro que desaparece em tempo de execução assim que o usuário começa a digitar no campo de texto.

Para adicionar texto de espaço reservado ao campo de texto, vá para o Attributes Inspector e defina o Espaço reservado atribuir a Nome do aplicativo .

Figura 8 - Definir o campo de texto Espaço reservado texto.

Seu campo de texto agora está pronto para o horário nobre!

Adicionando uma vista de texto à cena

Quando o usuário escreve uma avaliação de aplicativo, queremos dar a ele bastante espaço para se expressar. Não queremos usar um campo de texto porque ele só pode conter uma única linha de texto. Em contrapartida, o visualização de texto O controle permite que o usuário insira várias linhas de texto, incluindo linhas vazias para criar parágrafos. Vamos adicionar um abaixo do campo de texto.

1. Role um pouco mais para baixo no Pesquisador de objetos e arraste um Visualização de texto diretamente abaixo do campo de texto até que as linhas guia horizontal e vertical apareçam conforme mostrado na Figura 9 e solte o botão do mouse para colocá-lo na cena.

Figura 9 - Adicione uma visualização de texto à cena.

1. Clique na alça de redimensionamento no lado direito da visualização de texto e puxe sua borda direita para o lado direito da cena até que a linha guia vertical apareça conforme mostrado na Figura 10 .

Figura 10 - Redimensione a largura da visualização de texto.

1. Observe o texto latino que aparece no controle de exibição de texto. Se você usou ferramentas como o iBooks Author da Apple, reconhecerá isso como um texto de espaço reservado usado para demonstrar a fonte e a cor do texto que aparece no controle. Isso é diferente do texto de espaço reservado que você adicionou ao campo de texto. Este texto de espaço reservado deve ser excluído, então vamos fazer isso.

Vá para o Attributes Inspector e clique em qualquer lugar no texto latino mostrado na Texto atributo. Imprensa Comando+A (segure o Comando tecla para baixo e, em seguida, pressione a letra UMA ) para selecionar todo o texto como mostrado em Figura 11 . A seguir, pressione o excluir tecla e, em seguida, pressione Retorna para excluir todo o texto.

Figura 11 - Selecione todo o texto na visualização de texto.

Eventualmente, precisamos alterar a altura da visualização de texto, mas primeiro vamos adicionar um controle de interface do usuário na parte inferior da cena, para que possamos definir a altura da visualização de texto de acordo.

Adicionando um botão à cena

Há um botão que precisamos adicionar à cena - um Publicar botão que publica a avaliação do usuário na web. Vamos adicionar o botão agora.

1. Arraste um Botão da Biblioteca de Objetos e posicione-o no canto inferior esquerdo da cena, até a borda da cena. Quando as linhas guia horizontal e vertical aparecem como mostrado na Figura 12 , solte o botão do mouse para posicionar o botão na cena.

Figura 12 - Adicionar um Botão para a cena.

1. Agora vamos redimensionar o botão para que ele preencha toda a largura da cena. Pegue o lado direito do botão e arraste-o até o lado direito da cena, como mostrado na Figura 13 .

Figura 13 - Redimensione o botão.

1. Em seguida, clique duas vezes no botão para colocá-lo no modo de edição, altere o texto para Publicar ( Figura 14 ) e, em seguida, pressione Retorna .

Figura 14 - Altere o texto do botão para Publicar

1. Agora vamos mudar a cor de fundo do Publicar botão para branco. Com o botão Post ainda selecionado, vá para o Attributes Inspector e defina o Fundo propriedade de imagem para branco.png ( Figura 15 ). Se você clicar em qualquer outro lugar no storyboard, verá que o plano de fundo do Publicar botão agora é branco.

Figura 15 - Defina o Fundo imagem do Publicar botão para branco.png .

Como está agora, este botão é simplesmente um espaço reservado e não fará nada em tempo de execução quando o usuário tocar nele. Vamos mudar isso em um post futuro e torná-lo totalmente funcional.

1. Agora que o botão na parte inferior da cena está posicionado e dimensionado da maneira que queremos, podemos alterar a altura do controle de exibição de texto para ocupar mais espaço disponível. Para fazer isso, primeiro clique na visualização de texto para selecioná-la e, em seguida, clique na alça de redimensionamento na parte inferior da visualização de texto e arraste-a para baixo em direção aos controles na parte inferior da cena. Quando a linha guia horizontal aparecer ( Figura 16 ), solte o botão do mouse.

Figura 16 - Redimensione a visualização de texto.

Especificando as configurações de redimensionamento

Agora precisamos especificar as configurações de redimensionamento do campo de texto, visualização de texto e botão Postar, para que eles sejam redimensionados e reposicionados corretamente em tempo de execução.

1. Selecione os Nome do aplicativo campo de texto na superfície de design. Vá para o Inspetor de dimensionamento clicando no segundo botão à direita na barra de ferramentas do Inspetor. Selecione a I-Bar no lado direito da Redimensionamento automático controle para fixar o lado direito da visualização de texto no lado direito da visualização ( Figura 17 ). Em seguida, clique na mola horizontal no centro da Redimensionamento automático controle para que a largura do campo de texto se expanda automaticamente com a largura da exibição.

Figura 17 - Configurações de redimensionamento do campo de texto

1. Em seguida, selecione a visualização de texto (o controle abaixo do campo de texto). No Inspetor de dimensionamento, selecione todas as I-Bars e as molas horizontais e verticais no centro da Redimensionamento automático ao controle ( Figura 18 ). Isso especifica que a exibição de texto deve ser fixada em todos os lados da exibição e aumentar em largura e altura junto com sua exibição pai.

Figura 18 - Configurações de redimensionamento da visualização de texto

1. Agora selecione o Publicar botão na superfície de design. No Inspetor de dimensionamento, desmarque a barra I superior e selecione as barras I direita e inferior ( Figura 19 ). Em seguida, selecione a mola horizontal no centro da Redimensionamento automático ao controle. Isso fixa o botão à esquerda, à direita e à parte inferior de sua visualização pai e faz com que ele redimensione sua largura com a largura da visualização pai.

Figura 19 - Configurações de redimensionamento do botão Post

Vamos Chutar os Pneus!
Agora você terminou de configurar o protótipo da cena Write Review! Vamos ver como funciona em tempo de execução.

1. No canto superior esquerdo da janela do Xcode, altere a configuração do Esquema, clique no lado direito da configuração do Esquema e selecione iPhone 6 ( Figura 20 ). Em seguida, clique em Xcode's Corre botão.

Figura 20 - Defina o esquema para iPhone 6

1. Quando o aplicativo aparecer no Simulador, clique no botão Escreva uma crítica linha na cena principal que exibe a cena Write Review ( Figura 21 ).

Figura 21 - A cena Write Review em tempo de execução.

Apesar de nossa melhor tentativa de configurar os atributos de redimensionamento para esta cena, ainda temos espaço extra na parte inferior da cena. Este é um dos problemas que você encontra ao usar a tecnologia de redimensionamento iOS 'molas e suportes' mais antiga. Em um post futuro, converteremos as cenas no aplicativo para usar o Autolayout mais recente, que foi bastante aprimorado no Xcode 6.

1. Por enquanto, no Escrever análise cena, você pode clicar nos botões e ver que eles ainda não estão funcionais. No entanto, se você clicar no campo de texto ou na visualização de texto, observe que o teclado aparece na parte inferior da tela, conforme mostrado em Figura 22 . Você pode clicar nas teclas do teclado para digitar texto em qualquer um dos controles de texto. No entanto, como está agora, não há como fazer o teclado desaparecer quando você terminar. Vamos corrigir esse problema em um próximo post! Por enquanto, você pode clicar no botão de volta ( Revisão do iApps ) para retornar à cena principal e, em seguida, navegue de volta para o Escrever análise cena para esconder o teclado.

Figura 22 - O teclado aparece quando você clica no campo de texto ou na visualização de texto.

1. Volte para o Xcode e clique no botão Pare botão para interromper a execução do aplicativo no Simulador.

Adicionando uma cena de categoria de aplicativo

Eu gostaria de avançar um pouco mais no aplicativo neste post, então adicionaremos uma das cenas mais fáceis no aplicativo—o Categoria do aplicativo cena. Esta é a cena que é exibida quando o usuário toca no Categoria do aplicativo fila na Escrever análise cena. Ele permite que eles selecionem uma categoria de aplicativo de uma lista predefinida.

1. Desde o Categoria do aplicativo scene permite que o usuário selecione um item de uma lista, faz sentido adicionar um controlador de exibição de tabela ao storyboard. Para fazer isso, arraste um Controlador de exibição de tabela da Biblioteca de Objetos e coloque-o à direita do Escrever análise cena como mostrado em Figura 23 .

Figura 23 - Adicione um Table View Controller ao storyboard.

1. Agora vamos criar uma transição entre o Escrever análise cena e a nova cena do controlador de exibição de tabela. Para fazer isso, segure o Ao controle tecla para baixo, clique no botão Categoria do aplicativo célula no Escrever análise cena e arraste o ponteiro do mouse para o novo Controlador de exibição de tabela cena. Quando o Controlador de exibição de tabela cena é destacada em azul como mostrado na Figura 24 , solte o botão do mouse.

Figura 24 - Crie um segue para a nova cena do Table View Controller.

1. No pop-up segue que aparece, selecione o Empurre opção como mostrado em Figura 25 .

Figura 25 - Selecione Empurre no pop-up segue.

Isso adiciona uma transição entre as cenas e adiciona uma barra de navegação na parte superior do Controlador de exibição de tabela cena ( Figura 26 ).

Figura 26 - A nova segue aparece entre as cenas.

1. Agora vamos mudar o título da nova cena. Para fazer isso, clique duas vezes na barra de navegação vazia na parte superior da cena para colocá-la no modo de edição. A seguir, digite o texto Categoria do aplicativo ( Figura 27 ) e, em seguida, pressione o botão Retorna chave.

Figura 27 - Defina o título para Categoria do aplicativo .

1. Em seguida, vamos alterar a aparência da visualização da tabela. Primeiro, clique na área cinza rotulada Conteúdo do protótipo de exibição de tabela para selecionar a visualização de tabela. Em seguida, vá para o Inspetor de Atributos e altere o Estilo para Agrupado . Isso faz com que a visualização de tabela assuma a aparência agrupada com a qual você se familiarizou ( Figura 28 ).

Figura 28 - Definir a visualização da tabela Estilo para Agrupado .

1. na versão protótipo do aplicativo, queremos exibir uma lista estática de categorias de aplicativos na visualização de tabela, então volte para o Attributes Inspector e altere o Contente para Células estáticas . Isso adiciona duas células adicionais à exibição de tabela. Como todas as células nesta visualização de tabela terão a mesma aparência geral, precisamos apenas de uma célula na visualização de tabela, então vamos excluir as duas últimas células. Para fazer isso, clique na segunda célula na visualização de tabela, segure o botão mudança tecla para baixo e, em seguida, clique na terceira célula para selecioná-la também. Com as duas células selecionadas, pressione o botão excluir chave que deixa uma célula restante ( Figura 29 ).

Figura 29 - Exclua as duas últimas células na visualização de tabela.

1. Para esta lista de categorias de aplicativos, precisamos apenas de um único rótulo em cada célula da visualização de tabela. Para que isso aconteça, vá para o Inspetor de Atributos e altere o Estilo para Básico . Isso adiciona um rótulo com o texto Título no lado esquerdo da célula ( Figura 30 ).

Figura 30 - Definir a visualização da tabela Estilo para Básico .

1. Precisamos adicionar várias células a essa visualização de tabela, cada uma especificando uma categoria de aplicativo diferente. Para fazer isso, com a primeira célula selecionada, pressione Comando+D oito vezes, para criar um total de nove células de visualização de tabela ( Figura 31 ).

Figura 31 - Crie células duplicadas.

1. Agora precisamos alterar o texto de cada célula para uma categoria de aplicativo diferente. Para fazer isso, clique duas vezes no lado esquerdo da primeira célula na exibição de tabela. Isso coloca o texto do rótulo no modo de edição. A seguir, digite o texto Entretenimento e, em seguida, pressione Retorna . Agora altere o texto de todas as outras células na visualização de tabela, conforme mostrado em Figura 31 .

Figura 31 - Defina todas as categorias de aplicativos.

1. Há uma etapa final que precisamos realizar para terminar a versão protótipo desta cena - adicione uma marca de seleção ao Jogos célula. Lembre-se, no Escrever análise cena, o Categoria do aplicativo o texto da célula indica o Jogos categoria está atualmente selecionada ( figura 1 ). Embora o usuário não possa selecionar uma célula diferente no protótipo (ele poderá fazer isso quando concluirmos o aplicativo), precisamos colocar uma marca de seleção no Jogos célula para refletir a seleção atual.

Para isso, selecione o Jogos célula na exibição de tabela e, em seguida, vá para o Inspetor de atributos e altere o Acessório para Marca de verificação . Isso exibe uma marca de seleção no lado direito da célula, conforme mostrado em Figura 32 .

Figura 32 - Defina o Acessório para Marca de seleção

Executando no aplicativo no simulador

Agora você está pronto para executar o aplicativo no Simulador para ver como fica!

1. Clique no Xcode Corre botão, e quando o aplicativo aparecer no Simulador, clique no botão Escreva Análise linha para navegar para o Escrever análise cena. Depois, clique no Categoria do aplicativo linha e você será levado para o novo Categoria do aplicativo cena onde você pode ver a marca de seleção no Jogos linha como mostrado em Figura 33 .

Figura 33 - Você pode ver a marca de verificação em tempo de execução!

1. Volte para o Xcode e clique no botão Pare botão para interromper a execução do aplicativo no Simulador.

Conclusão

Nesta postagem, você foi apresentado a quatro novos controles de interface do usuário: o campo de texto, a visualização de texto, a visualização de imagem e o botão. Você também revisou as informações sobre como adicionar um controlador de exibição de tabela a um storyboard e configurar a exibição de tabela, incluindo a adição de uma marca de seleção para indicar um item selecionado. Caso você tenha problemas ao seguir essas etapas,  pode fazer o download do projeto concluído em esse link .

No meu próximo post, terminaremos o aplicativo protótipo adicionando algumas novas cenas e configurando-as para atender às nossas necessidades. Depois disso, aprenderemos o básico sobre como escrever código para que possamos transformar nosso aplicativo protótipo em um aplicativo totalmente funcional!

< Próximo>>