Skip to content

Trabalhando com pickerView em swift

Trabalhando com pickerView em swift

Bom pessoal vamos trabalhar neste post com um pickerView, este componente é bem interessante e pode ser utilizado para alguns fins, neste post não vamos nos aprofundar muito no componente iremos basicamente criar um componente para selecionar valores dentro de nosso pickerView.

Vamos começar com nosso storyboard, não precisaremos da nada muito complexo apenas vamos colocar nosso pickerView e uma label, o label só estará la para quando selecionarmos um valor em nosso picker possamos ver o que selecionamos.

telaApp

Bom com nosso pickerView e o label devidamente ligados a nossa classe vamos ao código agora. Mas antes disso vamos ligar importar o delegate e o dataSource para nosso projeto para isso vamos mudar na declaração da classe, agora ficou da seguinte maneira:

class ViewController: UIViewController,UIPickerViewDataSource,UIPickerViewDelegate

É possível que ao importa-los você tenha recebido alguns erros, vamos ignora-los por enquanto pois basicamente o xcode está reclamando pois importamos, e não estamos usando.

Vamos agora implementar o delegate e o dataSource ao picker com apenas duas linhas de código dentro de nosso viewDidLoad:

PickerTeste.delegate = self

PickerTeste.dataSource = self

Antes de prosseguir, nós temos um pickerView, mas o que iremos mostrar nele ? Bom para isso iremos criar um array (caso ainda tenha alguma dúvida quanto aos arrays você pode dar uma olhada neste post onde trabalhamos um pouco mais com eles).

Nosso array está da seguinte maneira:

let arrayDados = [“categoria 1”,“categoria 2”,“categoria 3”,“categoria 4”,“categoria 5”,“categoria 6”,“categoria 7”,“categoria 8”,“categoria 9”,“categoria 10”,“categoria 11”]

Com nosso array criado podemos continuar, vamos criar os métodos necessários para nosso picker funcionar.

Assim como em uma tableView precisamos de um método que retorne quantos itens serão mostrados pelo componente, para nosso picker esse método é o numberOfRowsInComponent

a função completa fica assim:

func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {

return arrayDados.count

}

Assim como fazemos quando usamos um array retornamos o count (numero de itens) do array, pois caso o array tenha um tamanho diferente (no caso de um valor ter sido inserido, ou retirado) não teremos problemas.

Caso tenha dúvidas sobre funções você pode dar uma olhada neste post onde trabalhamos com elas.

Com este método agora vamos atribuir o valor dos array ao picker, porém vamos fazer de maneira diferente, vamos atribuir valores customizados para nossas linhas do picker, com o seguinte método:

Por ela já estar comentado acredito que não será necessário explicar parte por parte do método.

func pickerView(pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusingView view: UIView!) -> UIView {

var pickerLabel = view as UILabel!

if view == nil {

pickerLabel = UILabel()

// alterando o background do label, baseando no valor da linha

let hue = CGFloat(row)/CGFloat(arrayDados.count)

pickerLabel.backgroundColor = UIColor(hue: hue, saturation: 1.0, brightness: 1.0, alpha: 1.0)

}

// atribuindo o valor correspondendo do array para a linha

let titleData = arrayDados[row]

// atribuindo fonte e tamanho de fonte para as linhas

let myTitle = NSAttributedString(string: titleData, attributes: [NSFontAttributeName:UIFont(name: “Georgia”, size: 26.0)!,NSForegroundColorAttributeName:UIColor.blackColor()])

pickerLabel!.attributedText = myTitle

// retorno do método

return pickerLabel

}

Por fim vamos fazer o método para que quando nosso usuário selecione uma linha esse valor seja passado para nosso label, para isso usamos um método igual ao de tableView, usamos o didSelectRow, para o pickerView o método completo fica assim:

func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

labelTeste.text = arrayDados[row]

}

Lembrando que “labelteste” é o label que eu criei, se você tiver usado outro nome para seu label, você deverá alterar isso. Esses são apenas alguns métodos que temos a disposição para implementar em nosso pickerView, temos outros como por exemplo:

func pickerView(pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat

Onde podemos retornar um valor do tipo float para alterar o tamanho das linhas selecionadas, ou

func pickerView(pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat

Onde podemos retornar a largura da linha selecionada.

Bom espero ter ajudado, por hoje ficamos por aqui.

No comment yet, add your voice below!


Add a Comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *