Picker views allow users to select an item from a spinning list. This video shows how to get picker views into your iOS apps and how to modify their settings.
- [Instructor] A picker view works a little bit different than from what you might expect. So here on my screen, I'm in my storyboard and I'm testing on iPhone SE and I'm viewing as an iPhone 6s. Now of course we can match this, but for what we're doing it doesn't really matter. So I'll go to Filter in the object library and search for picker and just drag out a picker view component and I'll just drag it right into place, right about there and then I'm going to add the pins by holding Shift + Option + Command and then pressing the equals sign so all the pins get added so it stays in place and if I change my view to view it as an iPhone SE, then it's still stuck to the sides there.
Alright, so now with most components you could just select the component and then head over to the attributes inspector and then modify what's inside of the component to the attributes inspector. If you look at the picker view section, we actually only have this Shows Selection Indicator option. That's it and those are those two lines on the top and the bottom that show which selection we have. Other than that, we don't have any options to modify what's actually inside of the picker view. That's because with a picker view, you need to set up all of the data in your code.
So let's look at how that works. If we head over to the connections inspector with the picker view selected, you're going to see two outlets for the picker view, a data source and a delegate and you need to set these before you can get the picker view to hold any data and even though you may think well if I just want to display data, all I need to set up is the data source, well actually you need to set up both just to set up the data. So keep that in mind and then just click and drag from this circle just right onto that yellow circle, which is our view controller.
So I'll set that as a data source and when I did that it actually deselected the picker view. So I'll select it again and then set the delegate in the same way. Now of course we could use the assistant editor to do this. We could create an outlet to this picker view in our view controller and then we can set the picker view's delegate and data source through code as well, but I find this way to be the fastest and most convenient way to set the data source in the delegate. So just drag over again to the view controller and now the picker view has set the view controller as its data source and delegate.
Now there's something else we need to do to actually have the view controller be the data source and the delegate. We need to tell the view controller class that it can be a picker view data source and a picker view delegate. So let's head over to ViewController.swift and then we're going to go past UIViewController on line 11 and then type a comma and say this class is going to be a UIPickerViewDataSource and a UIPickerViewDelegate.
Now if you're interested in seeing the necessary methods to handle for the delegate protocols here, you can select them and then look in the Quick Help and you can see that this is for UIPickerView. The data source handles basically how many rows and columns are inside of the picker view and the delegate handles what's going to be in those rows and columns and what happens when those rows and columns are selected. Now again, you can read more information here.
You can always look it up in the Xcode help. But for now, that's all we really need to know. So we're here to set up what's going to be inside of the picker view and let's just keep it simple. So right underneath my class declaration, I'm going to define a property and so I'm gonna use let and we'll just call this items and this is going to be an array of strings and items are gonna be really simple, just item one and then item two and then item three.
So this array is going to go inside of our picker view. Now right now, there's an error right here and if you click on the error you're going to see that it doesn't conform to the protocol and it's getting cut off, but if it wasn't cut off, you'd be able to see UIPickerViewDataSource. So now I've hidden the left and right areas of my screen so we can see that a little bit better. So UIPickerViewDataSource has two methods we need to adopt and you can easily get those methods without having to remember their names by going below viewDidLoad, so just in an empty space right here, and then just typing out pickerView and the two methods that you need to support for data source are numberOfRowsInComponent and numberofComponents in pickerView.
So let's start by using numberOfComponents and we need to return an integer there and the components are actually the columns in the picker view and for ours we're just going to do one column. So I'm going to return one. And then I'll go below this method and start typing pickerView again and then we want numberOfRowsInComponent. Now the number of rows is going to be three, which is the same amount of items in our array. So just return items.count.
Now at this point, that error goes away and we've successfully fulfilled all that is needed or required from UIPickerViewDataSource. However, if we run the application, we're not going to get any data inside of our picker view. So when we run it, we get these three rows and they're just question marks. So let's stop the app and look at how we populated. So remember, the data source just defines the number of rows and columns. The delegate defines what's going to be inside of those rows and columns and what happens when we select them.
So let's go down and I'm going to implement another method, which is pickerView titleForRow forComponent. So what we need to do here is return a string that is going to be in the row and this is going to correspond to the index of the items array. So row zero is going to return items index zero, row one returns items index one, et cetera. So all we need to do is just return items index row and that's it.
So we implement these methods and we've set up a data source for our picker view. So we'll just test this in a simulator and confirm that we see item one, item two, and item three inside of the picker view. So in the simulator here, we have item one, item two and item three just as we expected and of course if I stop the app and I add to or take away from the items array, for example if I add an item four right here, that will be updated because this pickerView titleForRow returns the current data inside of the array.
So there we go. So we changed the array. We changed the data that's inside of the picker view. So remember for your picker view, you need to set the picker view's data source, which we did, inside of the storyboard. You can do that in multiple ways, but the easiest way is to select the picker view, head over to the Connections Inspector in the inspector bar and then drag in the outlets from the data source circle and the delegates circle and to set them to our view controller and then in your view controller, adopt those protocols, UIPickerViewDataSource, UIPickerViewDelegate.
You can create an object like an array to store your data and then you need to handle numberOfComponents, pickerView numberOfRowsInComponent and pickerView titleForRow in order to get that data inside of your picker view.
- Adding picker views
- Responding to selections in picker views
- Creating UI elements with code
- Creating image views to display images
- Creating web views to display web content
- Changing fonts, pins, and views with size classes