Como usar UIDatePicker, um tutorial para iniciantes
Introdução
Recentemente precisei usar um Date Picker em um projeto, para coletar uma data (dia, mês e ano) do usuário. Contudo, por ser um componente básico e simples de usar, não encontrei muitos materiais disponíveis em português de como eu poderia coletar esse dado e tratar essa data, para ficar da forma que eu precisava.
Por esse motivo, decidi fazer esse breve artigo, explicando um pouco sobre UIDatePiker e como usar suas funcionalidades de forma simples.
UIDatePicker ou UIPickerView?
Em primeiro lugar, devemos nós atentar as diferenças existentes entre um Date Picker e um Picker View, apesar de serem bem parecidos, a forma de implementar é diferente, e principalmente o conteúdo que os dois apresentam.
Date Picker
A forma de implementar é bem simples, principalmente se tiver o auxílio do storyboard, pois já vem pré configurado. No geral o conteúdo apresentado são datas, ou informações relacionadas ao tempo (hora, minutos, segundos), não permitindo a personalização, ou melhor, não permite a adição de informações que não citadas a cima, por exemplo, inserir estações do ano.
Picker View
É mais complicado de implementar, pois deve ser totalmente configurado, através de protocolos. Porém, permite total personalização do conteúdo, além do seu formato também, por exemplo, a quantidade de linhas e colunas.
O que é um Date Picker?
Mas, a final, o que seria um Date Picker?
Segundo a documentação oficial Apple:
Um controle para a entrada de valores de data e hora.
Tipos de Date Picker
Se você precisa coletar datas, horas ou ambos, dentro do seu App, o Date Picker é o caminho certo. Contudo, você pode fazer isso de três formas diferentes, segundo a HIG (Human Interface Guidelines).
- Inline: Um campo editável que se encaixa em um pequeno espaço, como uma linha de lista ou tabela, e se expande para exibir uma visualização de edição.
- Compact: Um rótulo que se expande para exibir uma visualização de edição em um contexto modal
- Wheels: O conjunto tradicional de rodas de rolagem
Nesse tutorial, irei abordar o Date Picker na forma de rodas (wheels), que é usado para selecionar o tempo do Timer, no app Relógio
Passo a passo
Passo 1: Crie um novo projeto, do tipo Single View App, escolha um nome para seu projeto, neste caso, escolhi DatePickerTutorial.
Passo 2: Vá para o arquivo Main.storyboard, acesse a Library (um botão com o simbolo de +, localizado na parte superior direita), selecione o Date Picker e raste para a tela do arquivo Main.storyboard. Depois selecione uma Label (acessando novamente a Library) e arraste para a tela. Após, realizar esses passos, você deverá ficar com o storyboard, mais ou menos, desse jeito a baixo.
Passo 3: Agora, devemos configurar algumas propriedades do Date Picker, para que fique visualmente da forma que queremos. No meu caso, quero que ele apresente o dia, mês e ano (dia/mês/ano), e quero que os nomes do meses no Date Picker fique em português.
Vamos definir essas configurações no inspetor de atributos, para acessar o inspetor de atributos, selecione o Date Picker, clicando sobre ele, então perceba que irá aparecer algumas informações do lado direito na tela do Xcode, provavelmente as informações que irão aparecer serão do inspetor de atributos (style, mode, locale,…), se não forem essas informações selecione o inspetor de atributos, na parte de cima das informações, um icone que parece uma setinha apontando para baixo.
Já no inspetor de atributos, mude o style para wheels, o mode para Date e, o locale para Portuguese (Brazil).
Caso não apareça nenhuma informação, ao lado direito no Xcode, verifique se o botão "Hide or show the Inspector" está ativado (ele tem icone que é um retângulo, e fica localizado na parte superior direita, o último retângulo)
Passo 4: Ligar os componentes do storyboard (Date Picker e Label) ao arquivo View Controller.
Para fazer essa conexão, primeiro adicione um editor a direita (para deixar duas "telas", lado a lado), depois disso em uma você deixa uma tela no arquivoMain.storyboard e, a outra no arquivo ViewController.swift.
Depois de deixar o tela dividida, na parte em que tem o storyboard, mantenha o pressionado o botão Control, depois clique e segure em cima do Date Picker, e arraste para a tela do ViewController, dessa forma:
Passo 5: Para finalizar, temos que tratar o valor que o selecionado no Date Picker, e fazer com que esse texto da label seja alterada conforme o valor do Date Picker é alterado
Para Tratar o valor do Date Picker vamos usar uma variável do tipo DateFormatter, declarando ela em cima da função viewDidLoad(), da seguinte forma:
let formatter = DateFormatter()
Dentro da função viewDidLoad() temos que definir o formato em que queremos que o texto da Label fique, nesse caso eu quero que fique dia/mês/ano. Então vamos mudar o formato que a variável formatter tem:
formatter.dateFormat = "dd/MM/yyyy"
Agora é só mudar o texto da Lebel, para que fique igual a data que está selecionada no Date Picker, usando o formato que definimos anteriormente:
dateLabel.text = formatter.string(from: self.datePicker.date)
O seu arquivo viewController.swift deve set ficado mais ou menos assim, deois de ter adicionado essa essas três linhas de código
Com apenas esses três linhas de código, conseguimos pegar a data do Date Picker, e apresentar na label, tente rodar o seu projeto agora, para ver o resultado!
Se você conseguiu rodar o projeto, deve ter percebido que o texto da Label fica estátio, mesmo você selecionando outras datas no Date Picker, para resolver esse problema, precisamos de só mais um pouco de código.
Para atualizar o texto da Label vamos usar uma função simples, para adicionar a função o processo é bem parecido com o de conetcar os componetos do Storyboard com o ViewController, na verdade só muda um pequeno detalhe, na hora que você for adicionar a função ao aquivo ViewController, você precisa colocar ele abaixo da função viewDidLoad(). Depois de dar um nome a função, no meu caso eu coloquei o nome da função de datePickerSelected.
Assim, a função vai ser chamada todas vezes que mexemos no Date Picker, então só precisamos adicionar o código que atualiza o texto da Label, dentro da função, dessa forma:
Se você rodar o projeto agora ele estará sempre atualizando o texto da Label, toda vez que uma nova data for selecionada no Date Picker
E finalizamos por aqui, espero ter ajudado (:
