Liberte seu desenvolvedor de aplicativos internos Parte 27: Edição in-loco de exibição de tabela

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, mostrarei a você, que não é programador, passo a passo o processo de criação de aplicativos para iPhone, iPod touch e iPad. Junte-se a mim todas as semanas nesta aventura e você verá como pode ser divertido transformar suas ideias em realidade! Esta é a parte 27 da série. Se você está apenas começando, confira o início da série aqui .

Em muitos dos aplicativos iOS integrados, como Definições , você pode editar informações diretamente nas células de uma visualização de tabela. Este é um bom recurso, porque você, o usuário, não precisa navegar para uma cena separada apenas para inserir um valor. Isso é especialmente importante ao configurar o e-mail onde há vários valores que precisam ser inseridos.



Neste post, vou mostrar como isso é feito. Vamos fazer o iAppsReview Definições cena e alterá-lo para que possamos editar o endereço de e-mail e a senha diretamente na visualização da tabela, conforme mostrado em figura 1 .

  A cena de Configurações concluída
Figura 1 - A cena Configurações com edição de visualização de tabela no local

Você pode obter a versão mais recente do Revisão do iApps projeto de esse link . Eu recomendo que você siga as instruções passo a passo, mas se você se perder ao longo do caminho, você pode obter o projeto concluído de esse link .

Adicionar esse recurso de edição a uma visualização de tabela requer duas etapas principais.

  1. Crie células de exibição de tabela personalizadas que contenham um rótulo e um campo de texto.
  1. Crie um controlador de exibição de tabela personalizado que manipule eventos delegados dos campos de texto.

Há muita sutileza que precisamos fazer para que funcione corretamente, mas esses são os passos básicos.

Criando Células de Exibição de Tabela Personalizada

Vamos começar criando células de visualização de tabela personalizadas para o endereço de e-mail e a senha.

  1. Abra o Revisão do iApps projeto em Xcode.
  1. No Project Navigator, selecione o Enredo principal arquivo e, em seguida, role no storyboard até o Definições cena.
  1. Clique no Endereço de email célula para selecioná-lo e, em seguida, vá para o Inspetor de Atributos (o terceiro botão da direita na barra de ferramentas Inspetores) e altere o Estilo para Personalizado . Isso remove o rótulo da célula.
  1. Com a célula ainda selecionada, vá para o Object Browser no canto inferior direito da janela do Xcode, selecione um Etiqueta e arraste-o para o lado esquerdo da célula até ver as linhas guia mostradas na Figura 2 e, em seguida, solte o botão do mouse.
  Adicionar um marcador
Figura 3 - Adicione um rótulo à célula Endereço de e-mail.
  1. Com o rótulo ainda selecionado, vá para o Attributes Inspector e clique na seta para baixo à direita do Fonte configuração para alterar a fonte para Sistema 16.0 .
  1. Clique duas vezes no rótulo na superfície de design para colocá-lo no modo de edição, altere o texto do rótulo para Endereço de email , e pressione Retorna .
  1. Volte para o Pesquisador de Objetos, arraste um Campo de texto para o lado direito da célula até ver as diretrizes mostradas em Figura 3 e, em seguida, solte o botão do mouse.
  Adicionar um campo de texto
Figura 3 - Adicione um campo de texto à célula de endereço de e-mail.
  1. Pegue a alça de redimensionamento no lado esquerdo do campo de texto e arraste-a para a esquerda até ver a linha guia vertical mostrada na Figura 4 .
  Redimensionar campo de texto
Figura 4 - Redimensione o campo de texto.
  1. Com o campo de texto ainda selecionado, vá até o Attributes Inspector e altere os seguintes atributos:
  • Fonte - Sistema 15.0
  • Espaço reservado -user@example.com
  • Estilo de borda - Nenhum
  • Tamanho mínimo da fonte - 12
  • Teclado - Endereço de email
  1. Clique fora do campo de texto para desmarcá-lo e a célula Endereço de e-mail deve se parecer com Figura 5 .
  Célula de endereço concluída
Figura 5 - A célula de endereço de e-mail preenchida

Agora vamos configurar a célula de visualização da tabela de senhas. Vou abreviar um pouco essas etapas, pois elas são muito semelhantes às etapas da célula Endereço de email.

  1. Selecione os Senha célula de exibição de tabela na superfície de design e, em seguida, vá para o Inspetor de atributos e altere o Estilo para Personalizado .
  1. Adicionar um Etiqueta para o lado esquerdo da célula e defina sua Fonte tamanho para Sistema 16.0 .
  1. Clique duas vezes no rótulo e altere seu texto para Senha .
  1. Adicione um campo de texto ao lado direito da célula.
  1. Arraste a alça de redimensionamento no lado esquerdo do campo de texto para a esquerda até ver que sua largura está definida como 167 (a mesma largura que o campo de texto do endereço de e-mail.)
  1. Com o campo de texto ainda selecionado, vá até o Attributes Inspector e altere os seguintes atributos:
  • Fonte - Sistema 15.0
  • Espaço reservado - Requeridos
  • Fronteira Estilo - Nenhum
  • Verifica a Seguro atributo

Quando terminar, o Senha a célula de exibição de tabela deve se parecer com Figura 6 .

  Célula de senha concluída
Figura 6 - A célula de senha preenchida

Criando um SettingsViewController

Para responder a eventos nos campos de texto de endereço de e-mail e senha, precisamos criar um controlador de exibição personalizado para o Definições cena.

  1. No Project Navigator, clique com o botão direito do mouse no Revisão do iApps pasta do grupo e selecione Novo arquivo... a partir do menu pop-up.
  1. No lado esquerdo da caixa de diálogo Novo arquivo ( Figura 7 ) debaixo de iOS seção, selecione Toque de Cacau . No lado direito da caixa de diálogo, selecione Classe Objective-C e depois clique Próximo .
  Nova caixa de diálogo de arquivo
Figura 7 - Criar um novo Classe Objective-C .
  1. Na próxima etapa da caixa de diálogo, defina o Classe para ConfiguraçõesViewController , definir Subclasse do para UIViewController ( Figura 8 ) e clique em Próximo .
  Nova caixa de diálogo de arquivo etapa 2
Figura 8 - Criar ConfiguraçõesViewController como uma subclasse de UIViewController .
  1. Na caixa de diálogo Salvar arquivo, clique no botão Crio botão. Isso adiciona os novos arquivos de classe ao Project Navigator.
  1. Você pode estar se perguntando por que eu escolhi criar este novo controlador de visão como uma subclasse de UIViewController ao invés de Controlador UITableView . O motivo é que a visualização de tabela nesta cena contém todas as células estáticas, portanto, não há necessidade da maioria dos métodos que são adicionados automaticamente a um controlador de visualização de tabela pelo Xcode. No entanto, embora não precisemos da maioria desses métodos, ainda precisamos basear o controlador de exibição em Controlador UITableView .

Para fazer isso, vá para o Project Navigator e clique no botão SettingsViewController.h arquivo para selecioná-lo. No @interface declaração, mudança UIViewController para UITableViwController como mostrado em Figura 9 .

  Classe base UITableViewController
Figura 9 - Altere a classe base para Controlador UITableView .
  1. Agora precisamos associar o novo controlador de visualização ao Definições cena. Para fazer isso, vá para o Project Navigator, selecione o Enredo principal arquivo e, em seguida, clique na barra de status do Definições cena (um contorno azul aparece ao redor da cena quando você a seleciona corretamente). Em seguida, vá para o Identity Inspector (o terceiro botão da esquerda na barra de ferramentas do Inspector) e altere o Classe para ConfiguraçõesViewController ( Figura 10 ).
  Definir a classe do controlador de exibição
Figura 10 - Defina a classe do controlador de visualização para ConfiguraçõesViewController .

Isso nos fornece a configuração básica que precisamos.

Testar a exibição de tabela atualizada

Ainda não terminamos a configuração, mas vamos fazer um test drive para ver como funciona até agora.

  1. Clique no Xcode Corre botão.
  1. Quando o aplicativo aparecer no Simulador, selecione o Configurações e comentários opção.
  1. Clique no Endereço de email campo de texto e o teclado de e-mail devem aparecer ( Figura 11 ).
  Teclado de e-mail
Figura 11 - O teclado de e-mail é exibido.
  1. Clique no Senha campo de texto e o teclado padrão devem aparecer.
  1. Volte para o Xcode e clique no botão Pare botão.

Neste ponto, uma das coisas mais óbvias que precisamos fazer é ocultar o teclado quando o usuário toca no fundo.

Escondendo o teclado

Para ocultar o teclado, precisamos adicionar um reconhecedor de gestos à visualização da tabela e criar um método de ação que oculte o teclado em resposta a um toque.

  1. Exiba o painel Document Outline clicando no botão retângulo arredondado no canto inferior esquerdo do Interface Builder ou selecionando Editor | Mostrar estrutura do documento do cardápio.
  1. Arraste um Tap Gesture Recognizer do Object Browser no canto inferior direito da janela do Xcode e solte-o no Document Outline na Vista de mesa no Cena de configurações ( Figura 12 ). Isso adiciona um ícone de reconhecimento de gestos ao encaixe da cena abaixo da cena Configurações.
  Adicionar um reconhecedor de gestos
Figura 12 - Adicione um reconhecedor de gestos ao Vista de mesa no Cena de configurações .
  1. Agora precisamos criar um método de ação para o reconhecedor de gestos. Para fazer isso, primeiro exiba o Editor Assistente clicando no botão central no grupo de botões Editor na parte superior da janela do Xcode. Isso deve exibir o SettingsViewController.h arquivo no Editor Assistente. Se não selecionar este arquivo na barra de salto do Editor Assistente.
  1. Clique no ícone do reconhecedor de gestos no dock de cena e, em seguida, vá para o Inspetor de conexões (o botão na extremidade direita da barra de ferramentas Inspetores). Clique na conexão bem à direita do seletor ação e arraste para baixo no SettingsViewController.h arquivo logo acima do @fim declaração. Quando o Inserir ação pop-up aparece ( Figura 13 ) solte o botão do mouse.
  Criar um método de ação
Figura 13 - Crie um método de ação para o reconhecedor de gestos.
  1. No pop-up Criar Conexão ( Figura 14 ), defina o método de ação Nome para hideTeclado .
  método de ação hideKeyboard
Figura 14 - Nomeie o método de ação hideTeclado .

Isso adiciona o hideTeclado declaração do método para o SettingsViewController.h arquivo de cabeçalho ( Figura 15 ).

  hideCabeçalho do teclado
Figura 15 - A hideTeclado declaração de método
  1. Agora vamos implementar o novo método. No Project Navigator, selecione o SettingsViewController.m para exibi-lo no Editor de código e, em seguida, role até a parte inferior do arquivo de código. Adicione o código mostrado em Figura 16 para o hideTeclado método.
  hideCódigo do teclado
Figura 16 - A hideTeclado código

Antes de testarmos isso, vamos fazer algumas outras pequenas alterações.

Chave de retorno no campo de e-mail

Se houver várias células que podem ser editadas em uma visualização de tabela, é uma convenção da Apple mover para o próximo campo quando o usuário toca no Retorna tecla no teclado. Vamos adicionar essa funcionalidade ao Endereço de email campo de texto. Precisamos adicionar várias saídas de controle de interface do usuário para que isso aconteça.

  1. No Project Navigator, selecione o Enredo principal arquivo e, em seguida, clique no botão Definições barra de status da cena. Isso deve exibir o SettingsviewController.h arquivo no Editor Assistente. Se não selecionar este arquivo na barra de salto do Editor Assistente.
  1. Segure o Ao controle tecla para baixo, clique no botão Endereço de email campo de texto e arraste o ponteiro do mouse para baixo no SettingsViewController.h arquivo logo abaixo do @interface declaração. Quando o Inserir Coleção de Outlet, Ação ou Outlet pop-up aparece ( Figura 17 ), solte o botão do mouse.
  saída de campo de texto de e-mail
Figura 17 - Crie uma saída de campo de texto de endereço de e-mail.
  1. No pop-up Create Outlet, defina o Nome da saída para txtE-mail e depois clique no Conectar botão ( Figura 18 ). Isso adiciona uma nova propriedade de saída ao arquivo de cabeçalho.
  criar pop-up de saída
Figura 18 - Criar um txtE-mail tomada
  1. Agora crie uma saída para o Senha campo de texto. Ligue para esta tomada txtSenha .
  1. Enquanto estamos nisso, vamos criar saídas para o Conecte-se , Inscrever-se , e Dar uma resposta botões. Precisaremos disso em uma etapa posterior. Aqui estão os nomes que você precisa dar a esses pontos de venda:
  • Conecte-se - btnLogin
  • Inscrever-se - btnCadastre-se
  • Dar uma resposta - btnFeedback

Quando terminar, você deverá ver as tomadas mostradas em Figura 19 .

  Pontos de venda
Figura 19 - As novas propriedades do outlet
  1. Agora precisamos criar um método de ação que seja acionado quando o usuário tocar em retornar no Endereço de email campo de texto. Para isso, clique no botão Endereço de email campo de texto na superfície de design e, em seguida, vá para o Inspetor de conexões (o último botão à direita na barra de ferramentas Inspetores).
  1. Clique na conexão bem à direita do Terminou na saída evento e arraste para baixo no SettingsViewController.h arquivo logo acima do fechamento @fim declaração, quando o Inserir ação pop-up aparece solte o botão do mouse.
  1. No pop-up Criar Conexão, defina o Nome do método de ação para emailReturnKey e depois clique no Conectar botão. Isso adiciona a nova declaração de método ao arquivo de cabeçalho.
  1. No Project Navigator, clique no botão SettingsViewController.m arquivo para exibi-lo no Editor de código. Role até a parte inferior do arquivo de código e adicione o código mostrado em Figura 20 ao método.
  Código da chave de retorno de e-mail
Figura 20 - A emailReturnKey: código

Este código dá foco ao campo de texto da senha enviando-lhe um torne-se o primeiro respondente mensagem.

Manipulando a chave de retorno no campo de senha

Então, como devemos lidar com a situação em que os toques do usuário retornam no campo de senha? Isso é não A convenção da Apple para mover o foco de volta para a primeira célula editável. Portanto, neste caso, podemos simplesmente optar por ocultar o teclado. Podemos reutilizar o ocultarTeclado: método de ação que criamos anteriormente para o reconhecedor de gestos.

  1. No Project Navigator, selecione o Enredo principal Arquivo.
  1. Na cena Configurações, clique no botão Senha campo de texto para selecioná-lo. Isso deve exibir o SettingsViewController.h arquivo no Editor Assistente. Caso contrário, selecione este arquivo na barra de salto do Editor Assistente.
  1. Vá para o Inspetor de conexões e clique na conexão à direita do Terminou na saída evento. Arraste o ponteiro do mouse para baixo na SettingsViewController.h arquivo e passe o mouse sobre o hideTeclado método de ação até ver o Ação de conexão pop-up e solte o mouse.

Testando o teclado e a tecla Return

Agora estamos prontos para testar nossos aprimoramentos no teclado e na tecla de retorno.

  1. No Xcode, clique no Corre botão.
  1. Quando o aplicativo aparecer no Simulador, selecione Configurações e comentários para navegar para o Definições cena.
  1. Clique no Endereço de email campo de texto e o teclado deve aparecer.
  1. Clique no Retorna tecla no teclado, e o foco deve se mover para o Senha campo de texto da célula.
  1. Clique no Retorna tecla novamente e o teclado deve estar oculto.
  1. Clique no Endereço de email campo de texto novamente e, em seguida, clique no plano de fundo do modo de exibição de tabela. Isso também deve ocultar o teclado!

Conclusão

Até agora, configuramos o básico para editar campos de texto em visualizações de tabela. No entanto, há mais trabalho a ser feito! Antes de tudo, precisamos recuperar e armazenar as configurações do usuário (endereço de e-mail e senha) no dispositivo. Além disso, devemos fazer o usuário clicar em um Editar botão antes que eles possam alterar essas informações para que eles não alterem acidentalmente seu endereço de e-mail e senha. Vamos abordar isso e muito mais no meu próximo post!

< Próximo>>