You’d be surprised at how many steps there are to get those scrolling wheels that Apple likes to use as a visual representation of a drop down box.

UIPickerView In Action

Reference image for reference

I decided to lay out the key steps in getting this to work here because the tutorials I found online seemed a bit fragmented between what’s old and what’s new. So today in this small fry post I’m going to show you how to add a UIPickerView, add some values to it and then prepare those values for segue. This is by no means the best way to do it and I’m not claiming to be any master programmer but it’s how I was able to get it working so uhh… LET’S GO!

This was done in Swift 5, Xcode version 11.4.1 and on an iPhone X running iOS 13.4.1

To start off with, introduce the Picker View into your view controller like normal and create a reference to it in your ViewController.swift file.

@IBOutlet weak var colourEntry: UIPickerView!

I named it colourEntry because we’re making a selector to choose the colour of a users profile in my app. Next you’re going to want to create a variable to store your values in:

var colourData: [String] = [String]()

Since we’re holding multiple values we’re going to use an array. Swift automatically assumes that values stored in square brackets like these: [] are an array.

Now that we’ve done that, head on down into your viewDidLoad and add a line that defines what we want in the list:

override func viewDidLoad() {
    super.viewDidLoad() // Should already be in here
    colourData = ["White", "Green", "Black"]

White, green and black seem like appropriate colour schemes to me and we have defined them in an array. So let’s now tell the UIPickerView how to assemble the data. First we’re going to add a few functions into the view controller. Our first function:

func componentAmount(in pickerView: UIPickerView) -> Int {
    return 1

This is where we define how many components we have in the selector. Since we only need one in this demonstration here then return 1 we have! Running it now will look a little like this: UIPickerView Question mark

Next we want to tell the view how many elements we want it to have:

func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    return colourData.count

This looks at the colourData array created and counts the amount of values in it, since we have three values (["White", "Green", "Black"]) the value output should also be three. Remember to include return here, without it the data just wouldn’t go where we want it to.

Now if you run this as it is you’ll see this: UIPickerView Question marks

Wow, three question marks. Pretty nice if I do say so myself. But users may be saying at this point:

What is this? A guessing game?

Life as whole is but we don’t want this to be for our users so next we’ll implement a way of importing the array into the picker view.

func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    return colourData[row]

So this is small thing pulls in the value from the colourData in relation to the amount of rows that we have in the array so the first row will be called White, the second row Green and the last row will be Black

Now if you run your app it’ll look just like this: UIPickerView In Action

You can scroll through the list and it will move around. But there’s one more thing we can do, send the output somewhere:

func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    colourSelected = colourData[row]

This is now taking the value that was selected and storing it in another variable. I called it colourSelected. You are now free to do with this value as you please.

Hope this is helpful somewhat, as I said I’m no master programmer but it took me multiple trips to different sources to get exactly what I wanted here, that’s too many trips for me.

If you have any comments, concerns or advice please leave them below, until next time! Stay safe in these quarantine times!

Written on 20 April 2020 at 18:11
Categorised as: coding
- Written by jrmswell