Liberte seu desenvolvedor de aplicativos internos Parte 4: Adicionando navegação

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 4 da série de blogs. Se você está apenas começando agora, confira o início da série aqui (Esta postagem foi atualizada para iOS 8, Xcode 6.3 e Swift 1.2.)

No meu postagem anterior , finalizamos a tela principal do Revisão do iApps aplicativo para iPhone. No processo, você aprendeu como configurar uma visualização de tabela, como adicionar imagens a um projeto e como usá-las como imagens de inicialização, bem como nas linhas de uma visualização de tabela.

Esta semana, você adicionará uma nova cena (mostrada na figura 1 ) para o storyboard e aprenda sobre a navegação entre as diferentes cenas.

Figura 1 - A cena Write Review

Abrindo o Projeto

Siga estas etapas para abrir o projeto que você criou no post anterior (você também pode baixar o projeto de esse link ):

1. Inicie o Xcode no seu Mac.

1. Para abrir o projeto na janela de boas-vindas do Xcode, selecione Revisão do iApps no recente painel no lado direito da janela e, em seguida, clique em Abrir . Você também pode abrir o projeto selecionando Arquivo > Abrir Recente > iAppsReview.xcodeproj no menu Xcode.

1. Depois que o projeto for aberto, no Project Navigator no lado esquerdo da janela do Xcode, selecione o storyboard principal para exibir o storyboard no Interface Builder Editor no centro da janela do Xcode.

Adicionando uma nova cena ao storyboard

Agora vamos adicionar uma nova cena ao storyboard.

1. Certifique-se de que a Biblioteca de Objetos no canto inferior direito da janela do Xcode esteja visível conforme mostrado em Figura 2 . Se não estiver visível, vá para o menu Xcode e selecione Exibir > Utilitários > Mostrar biblioteca de objetos .

1. Para adicionar uma nova cena a um storyboard, tudo o que você precisa fazer é arrastar um dos controladores de exibição da Biblioteca de objetos para a superfície de design do storyboard. Você escolhe qual controlador de visualização adicionar com base no tipo de controles de interface do usuário que deseja incluir na cena. Por exemplo, se você precisar de uma cena que contenha um controlador de exibição de tabela, você deve escolher o Controlador de exibição de tabela item da Biblioteca de Objetos. Como você pode ver em figura 1 , nossa nova cena conterá uma visualização de tabela com uma única linha, então precisamos adicionar um Mesa Ver controlador ao storyboard.

Então, como mostrado em Figura 2 , arraste um Controlador de exibição de tabela da Biblioteca de Objetos e solte-o à direita do Revisão do iApps cena. Eu coloco à direita, porque gosto de posicionar meus controladores de visualização no storyboard na ordem em que são exibidos em tempo de execução. Isso faz com que meu storyboard seja autodocumentado.

Figura 2 - Adicionar um Controlador de exibição de tabela ao storyboard.

Depois de adicionar a nova cena ao storyboard, você verá vários avisos exibidos no Activity Viewer na parte superior central da janela do Xcode. Você pode ignorar esses avisos com segurança por enquanto, e vamos abordá-los mais adiante neste post.

Criando uma transição entre cenas

Agora precisamos criar uma conexão, ou segue, entre o Revisão do iApps cena e a nova cena que você acabou de adicionar. O Xcode torna isso incrivelmente fácil.

1. Ao criar um segue, você deve primeiro decidir qual elemento da interface do usuário deve iniciar o segue, ou transição, para a próxima cena. Neste caso, o Escreva uma crítica row é o objeto que deve acionar o segue. Então, enquanto segura o ao controle chave , Clique no Escreva uma crítica linha e, em seguida, arraste o ponteiro do mouse para a nova cena, conforme mostrado na Figura 3 .

Figura 3 - Control+Arrastar de Escreva uma crítica linha para a nova cena.

1. Quando a nova cena é destacada em azul como mostrado na Figura 3 , solte o botão do mouse e o ao controle chave. Isso exibe o pop-up Segue listando os diferentes tipos de segues que você pode escolher, conforme mostrado em Figura 4 .

Figura 4 - Selecione o Empurre segue.

1. Examinaremos todas as opções mostradas neste pop-up em um post futuro, mas por enquanto, basta selecionar o Empurre opção como mostrado em Figura 4 . Ao fazer isso, um segue é adicionado entre as duas cenas, conforme mostrado na Figura 5 .

Figura 5 - Uma segue é adicionada entre as duas cenas.

A seta do segue aponta na direção em que ocorre a navegação entre as cenas. Quando duas cenas têm uma relação de segue como esta, a cena que aciona a segue é conhecida como fonte , e a cena para a qual você está navegando é conhecida como destino . Observe que quando um segue é selecionado (como está em Figura 5 ), o objeto que aciona o segue é destacado (neste caso, o Escreva uma crítica fileira). Quando você tem muitos segues em um storyboard, isso é extremamente útil para determinar qual controle de interface do usuário é usado para acionar um determinado segue. Você também deve ter notado que uma barra de navegação foi adicionada automaticamente ao topo da cena de destino. Isso é conveniente, pois normalmente você deseja uma barra de navegação na parte superior de uma cena de destino quando estiver navegando de uma cena de origem que tenha uma barra de navegação.

1. Agora vamos adicionar um título à barra de navegação da cena de destino. Para fazer isso, clique duas vezes na barra de navegação para colocá-la no modo de edição e digite o texto Escrever análise e pressione Retorna . Quando terminar, a barra de navegação deve se parecer com Figura 6 .

Figura 6 - Defina o título da barra de navegação para Escrever análise .

1. Vamos completar a barra de navegação adicionando um botão ao seu lado direito. Este botão eventualmente permitirá que os usuários compartilhem sua avaliação com outras pessoas. Para adicionar este botão, na Biblioteca de Objetos (localizada no canto inferior direito da janela do Xcode), role para baixo até ver o Item de botão da barra . Arraste o item do botão da barra da biblioteca de objetos e passe-o sobre o lado direito da Escrever análise barra de navegação da cena. Quando você vê o guia retângulo arredondado azul mostrado na Figura 7 , solte o botão do mouse para soltar o botão neste local.

Figura 7 - Adicionar um Item de botão da barra para o lado direito da barra de navegação.

1. Agora vamos alterar a aparência visual do botão para fornecer uma pista ao usuário de que tocar nesse botão permitirá que ele compartilhe sua avaliação. Para fazer isso, com o item do botão da barra ainda selecionado, vá para o Inspetor de Atributos. Se o Inspetor de Atributos não estiver visível, você pode exibi-lo selecionando Exibir > Utilitários > Mostrar Inspetor de Atributos no menu Xcode. A seguir, defina o Identificador atribuir a Ação como mostrado em Figura 8 . Isso exibe a imagem de ação familiar do iOS no botão ( Figura 8 ). Sinta-se à vontade para tentar selecionar alguns dos outros Identificador opções para ver como são, mas quando terminar, defina-o de volta para Ação ( Figura 8 ).

Figura 8 - Definir o item do botão da barra Identificador atribuir a Ação .

1. Agora vamos ver como tudo isso funciona em tempo de execução. Clique no Corre botão no canto superior esquerdo da janela do Xcode. Após alguns segundos, o aplicativo aparece no Simulador conforme mostrado no lado esquerdo do Figura 9 . Clique no Escreva uma crítica fila, e o Revisão do iApps cena sairá da tela para a esquerda e o Escrever análise cena se moverá em seu lugar a partir da direita, como mostrado na Figura 9 (dependendo da versão do Xcode que você está usando, seu Simulador pode parecer diferente).

Figura 9 - Revisão do iApps em tempo de execução

1. Observe o Escrever análise cena tem um botão 'voltar' que foi adicionado automaticamente no lado esquerdo de sua barra de navegação ( Figura 9 ). Isso é conveniente porque o usuário precisa de uma maneira de navegar de volta para o Revisão do iApps cena. Por padrão, o botão Voltar contém o texto do título da barra de navegação da cena de origem ( Revisão do iApps , nesse caso). Em um post posterior, mostrarei como alterar esse texto padrão, mas, por enquanto, esse texto funciona bem. Vá em frente e toque no botão Voltar para navegar de volta para o Revisão do iApps cena.

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

Configurando a Visualização de Tabela

Agora você está pronto para configurar a visualização de tabela que aparece na parte superior da Escrever análise cena como mostrado em figura 1 . Precisamos configurar uma célula de visualização de tabela que permita ao usuário selecionar a categoria do aplicativo ao escrever uma avaliação. Eventualmente, tocar nessa célula em tempo de execução levará o usuário a outra cena onde ele poderá selecionar uma categoria de aplicativo em uma lista.

1. No Escrever análise cena, clique na área cinza abaixo da visualização de tabela rotulada Conteúdo do protótipo de exibição de tabela para selecionar a visualização de tabela.

1. Em seguida, vá para o Inspetor de Atributos e altere o Contente para Células estáticas , e as Estilo para Agrupado . Ao fazer isso, duas células adicionais são adicionadas e a visualização de tabela assume a aparência agrupada mostrada na Figura 10.

Figura 10 - Defina o Contente para Células estáticas e a Estilo para Agrupado .

1. 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 para selecioná-la, segure o botão mudança tecla e, em seguida, clique na terceira célula. Com as duas últimas células selecionadas, pressione o botão excluir key para removê-los da visualização de tabela.

1. Com a célula restante selecionada como mostrado em Figura 11 , mudar o Estilo para Detalhe à direita . Isso adiciona um Título rótulo à esquerda da célula e um Detalhe etiqueta no lado direito da célula. A seguir, altere o Acessório atribuir a Indicador de divulgação , que adiciona uma pequena seta cinza no lado direito da célula.

Figura 11 - Defina o Estilo para Detalhe à direita e a Acessório para Indicador de Divulgação .

1. Agora vamos alterar o texto do Título e Detalhe rótulos. Para fazer isso, primeiro clique duas vezes no Título label top coloque-o no modo de edição, digite o texto Categoria do aplicativo como mostrado em Figura 13 e depois pressione Retorna .

Figura 13 - Altere o Título texto do rótulo para Categoria do aplicativo .

1. Como este é um aplicativo protótipo, é útil configurar alguns dados estáticos para que os usuários possam ter uma ideia de como ele funcionará quando for convertido em um aplicativo real. Então, vamos mudar o texto do Detalhe rotular para Jogos , indicando que o app analisado é um jogo. Para fazer isso, clique duas vezes no Detalhe label para colocá-lo no modo de edição, digite o texto Jogos e depois pressione Retorna . Quando terminar, a célula terá a aparência Figura 14 .

Figura 14 - Altere o Detalhe texto do rótulo para Jogos .

Isso conclui a configuração da visualização de tabela. Vamos passar para os outros controles da interface do usuário nesta cena!

Adicionando uma vista à cena

Muitas vezes, uma visualização de tabela preenche uma cena inteira. Com o Escrever análise cena, este não é o caso. Há apenas uma linha na visualização da tabela, então você aprenderá como adicionar outros controles de interface do usuário abaixo da visualização da tabela.

Em primeiro lugar, você precisa adicionar um Visão diretamente abaixo da visualização de tabela para conter todos os outros controles da interface do usuário. Isso é necessário para fornecer um contêiner no qual você pode posicionar e dimensionar seus outros controles.

1. Para fazer isso, role para cima na Biblioteca de Objetos, localize o Visão item e, em seguida, arraste-o para o Escrever análise cena até ver a barra de alinhamento azul mostrada na Figura 15 .

Figura 15 - Adicionar um Visão para o Escrever análise cena.

1. Solte o botão do mouse para soltar o Visão na cena. Ao fazer isso, ele é posicionado automaticamente diretamente abaixo da visualização da tabela, conforme mostrado na Figura 16 .

Figura 16 - A visualização recém-adicionada

1. Agora vamos redimensionar a visualização para que ela preencha toda a área abaixo da visualização da tabela. Para fazer isso, pegue a alça de redimensionamento (a pequena caixa branca) na parte inferior da visualização e arraste-a para a parte inferior da cena. Ao fazer isso, um pop-up de tamanho exibe a largura e a altura da visualização. Continue arrastando para baixo até a altura do Visão é 415,0 como mostrado em Figura 17 e solte o botão do mouse.

Figura 17 - Redimensionar a visualização

1. Em seguida, vamos alterar a cor de fundo do Visão . Com o Visão ainda selecionado, vá para o Inspetor de Atributos e clique no lado direito do Fundo controle para exibir o pop-up Cores ( Figura 18 ). Se os Lápis de Cera não estiverem visíveis, clique no botão Lápis de Cera no canto superior direito do pop-up Cores. Em seguida, selecione o giz de cera cinza na extremidade direita da segunda linha a partir da parte inferior, conforme mostrado na Figura 18 .

Figura 18 - Defina a cor de fundo da visualização.

Agora você está pronto para adicionar outros controles de interface do usuário dentro da exibição.

Adicionando um controle de revisão de cinco estrelas

Como você pode ver em figura 1 , o primeiro controle diretamente abaixo da visualização de tabela é um controle de revisão de cinco estrelas. Infelizmente, esse não é um dos controles de interface do usuário que a Apple fornece no kit de ferramentas do iOS, então tive que criar um controle personalizado do iOS para este projeto. Siga estas etapas para adicionar o controle de revisão de cinco estrelas ao seu projeto.

1. Primeiro, clique esse link e os arquivos de revisão de cinco estrelas serão salvos no Transferências pasta no seu Mac.

1. Em seguida, vá para o Project Navigator no lado esquerdo da janela do Xcode, clique com o botão direito Revisão do iApps grupo e selecione Adicionar arquivos a 'iAppsReview'... no menu pop-up ( Figura 19 ).

Figura 19 - Adicionar arquivos ao Revisão do iApps grupo.

1. Na janela Adicionar arquivos que é exibida a seguir, selecione o Transferências pasta no Favoritos painel à esquerda. Em seguida, no lado direito da janela, role para baixo até o Classificação por estrelas pasta e clique na seta cinza à esquerda da pasta para expandi-la. Agora clique no mmStarRating.swift arquivo para selecioná-lo ( Figura 20 ).

Figura 20 - Adicione o mmStarRating.swift arquivo para o seu projeto.

1. Com o arquivo selecionado, certifique-se de que o Copie os itens, se necessário opção está marcada e, em seguida, clique no botão Adicionar botão. Isso adiciona o arquivo ao seu projeto como mostrado em Figura 21 .

Figura 21 - O novo arquivo no Project Navigator

O arquivo que você acabou de adicionar é chamado de arquivo de código porque contém código de programação. Sinta-se à vontade para dar uma olhada se quiser, mas por enquanto, usaremos apenas o controle de interface de usuário de classificação por estrelas em nosso projeto.

Gostaria de salientar que não criei este controle de classificação por estrelas do zero. Quando você precisa de um novo controle personalizado, é um Melhor prática para pesquisar na web para ver se alguém já escreveu um controle que seja pelo menos próximo ao que você deseja. Isso é exatamente o que eu fiz. Encontrei um controle de Ray Wenderlich que estava bem próximo do que eu estava procurando e o converti de Objective-C para Swift. Em seguida, adicionei alguns recursos adicionais e ajustei um pouco o controle para fazê-lo funcionar exatamente do jeito que eu queria.

Quando você cria um controle personalizado como este, ele não é adicionado automaticamente ao Pesquisador de objetos para que você possa arrastá-lo e soltá-lo em uma cena. É preciso algum trabalho extra para tornar isso possível, mas vamos pular isso por enquanto e mostrarei como usar um controle personalizado em seu projeto sem arrastar e soltar da Biblioteca de Objetos.

1. Primeiro, certifique-se de que o storyboard esteja selecionado no Project Navigator. Em seguida, vá para o Pesquisador de objetos, clique no botão Visão item para selecioná-lo e, em seguida, arraste-o para o Escrever análise cena como mostrado em Figura 22 . Tente posicionar o novo Visão para que a linha-guia apareça perto do topo da visualização original, conforme mostrado na Figura 22 (você não precisa fazer isso exatamente certo, porque vamos corrigi-lo em um momento).

Figura 22 - Solte uma nova visualização dentro da visualização existente.

1. Para obter o tamanho e a posição deste Visão exatamente certo, vamos passar para o Size Inspector. Para fazer isso, clique no segundo botão à direita na barra de ferramentas do Inspetor, conforme mostrado na Figura 24 . No Inspetor de tamanho, defina os seguintes valores de atributo de posição e tamanho:

• X = 20
• y = 0
• Largura = 174
• Altura = 60

Quando terminar, a vista deve ser dimensionada e posicionada na cena, conforme mostrado na Figura 23 .

Figura 23 - Defina o tamanho e a posição da visualização no Size Inspector.

1. Com a visualização ainda selecionada, vamos para o Identity Inspector clicando no terceiro botão da esquerda na barra de ferramentas Inspectors, conforme mostrado em Figura 24 . A seguir, altere o Classe definindo para mmStarRating . Quando você faz isso, você está efetivamente convertendo o Visão objeto em um controle de classificação de cinco estrelas. É tão fácil quanto isso! Você não verá nenhuma estrela no momento do design, mas as verá quando executar o aplicativo.

Figura 24 - No Inspetor de Atributos, altere o Classe para mmStarRating .

1. Agora volte para o Inspetor de Atributos e defina o Fundo cor para Cor de fundo da visualização da tabela de grupos para que ele se misture com o plano de fundo da visualização.

1. Agora vamos ver como o controle fica em tempo de execução. Clique no Xcode Corre botão e após alguns segundos você verá o Revisão do iApps cena aparecem no Simulador. Clique no Escreva uma crítica linha na visualização de tabela e você navegará para o Escrever análise cena. Como você pode ver, ele contém o novo controle de classificação de cinco estrelas. Conforme você clica em estrelas diferentes, elas ficam douradas e o texto associado é exibido abaixo das estrelas, como mostrado na Figura 25 .

Figura 25 - O controle de classificação por estrelas em tempo de execução

1. Para interromper a execução do aplicativo no Simulador, volte ao Xcode e clique no botão Pare botão.

Conclusão

Neste post, você aprendeu como criar uma transição entre duas cenas em um storyboard, como adicionar controles a uma cena que já contém uma visualização de tabela e como usar um controle personalizado (não Apple) em seus aplicativos iOS. Caso você encontre algum obstáculo ao longo do caminho, você pode baixar o projeto concluído (até agora) em esse link . No meu próximo post, terminaremos esta cena e construiremos outra das cenas menos complicadas, adicionando outra peça ao seu conjunto de habilidades do iOS!

< Próximo>>