Tutorial iOS: Adicionando campo de Texto: UITextField

On 15 de fevereiro de 2014 by Conrado Carneiro

Agora que já aprendemos a criar um projeto e nos familiarizamos um pouco com o XCode, iremos aprender a adicionar um campo de Texto, muito utilizado para entrada de dados, como por exemplo em formulários.

Adicionando o UITextField a View

Abra o arquivo Main.storyboard existente em seu projeto e selecione a opção Text Field, na lista de objetos da biblioteca (Object Library), conforme indicado a baixo:

Text Field selecionado na lista de Objetos da biblioteca

Text Field selecionado na lista de Objetos da biblioteca

Após seleciona-lo arraste até sua View, posicionado no local desejado, repita o mesmo processo caso queira adicionar mais de um, conforme indicado na imagem:

UItextField adicionados a view

UItextField adicionados a view

Agora vamos adicionar um texto estilo marca d’água em cada Text Field para identifica-los. Selecione cada um deles, e no menu a direita escolha a opção Attributes inspector, em seguida no item Placeholder digite o texto desejado, conforme feito a seguir na imagem:

Definindo o placeholder de cada Text Field

Definindo o placeholder de cada Text Field

Agora vamos adicionar o objeto UITextField ao código. Para otimizar o espaço em tela, feche o Document Outline[1], e em seguida abra o Assistant Editor [2] indicados na imagem a baixo:

Feche o Document Outline e abra o Assistant Editior

Feche o Document Outline e abra o Assistant Editior

Precisamos garantir que estamos adicionando o objeto da Interface Gráfica no código correspondente correto, portanto marque a opção Automatic, para que o XCode se encarregue de definir em qual classe o código do Text Field será incluído. Além disso, garanta que o arquivo seja o .h.

 Configurando como Automatic

Configurando como Automatic

Selecione o primeiro Text Field, pressione a tecla Control, em seguida arraste o mouse até o código e solte, o resultado esperado é mostrado a seguir:

Adicionando um objeto da view no código

Adicionando um objeto da view no código

Um balão será exibido, nele você deverá preencher o nome que irá dar, repita o mesmo processo para cada TextField.

Nomeando o textField no código

Nomeando o textField no código

%

Comments are closed.