Picker views allow users to select an item from a spinning list. This video shows how to get picker views into your apps, and how to modify their settings.
- [Instructor] Up to this point in this series we've done some basic user interface development. But let's take it a step further and look at some more intermediate user interface elements. So I have my blank project here and I'm going to filter in the object library for a picker. What I'm looking for is a picker view. So we're going to click and drag that out to the screen. And I'll put it right there, you just want to make sure that it's centered with both the left and the right edges touching. And then, Shift Option Command equal sign to have Xcode automatically create those pins for you.
And, what we want to do here is look at using the picker view. Now, if you select the picker view so you can deselect everything by picking the white space. Select the picker view and then look in the attributes inspector. So you'll notice that there are no settings for the picker view specifically in the attributes inspector. For a picker view, we set its data in code. To do that, we need to provide something called a data source and a delegate, for the picker view.
To do that, with the picker view selected head over to the connections inspector. In there, under Outlets you're going to see the data source and delegate connections. Data source sounds a little bit confusing because you think of that as the object that supplies the data. But what a data source really does for a picker view is it tells how many columns and rows are inside of the picker view. The delegate actually both handles events for the picker view. And, tells it what data to put inside of the picker view.
So, we need to set both of these to put some data in our picker view. So I'm going to click and drag from the circle for data source. And I'm going to drag it on my view controller. You can drag on that yellow circle with the white square. Right here, or, like I'll do with the delegate by selecting the picker view and clicking and dragging from the circle we can set it in our document outline. So they're both the same. We're telling them to attach to our view controller. So our view controller will be both the data source and the delegate for the picker view.
So let's head over to view controller dot swift. And of course, before we can populate our picker view with data, we need some sort of data to put inside of it. So I'm going to create an array of strings. And we're going to use that for our data. Now, it's important to note that when you're populating a picker view with data you're not limited to an array of strings, you actually can provide whatever data you want. I'm just going to keep it simple for this case. So let's hide that utility area to get a little bit more space. And create a constant called data.
And that's going to be an array of string objects. And I'll just set it equal to a simple string array. Item one. And then we'll do item two and item three. So we're going to have three items inside of our picker view. The next step is to tell our class that it can be a data source and a delegate for a picker view. And we do that online in (mumbling) After, the UI view controller sub-class call out. So after that, comma and a space.
And then I'm just going to type picker to narrow it down to my delegates in data sources. And you should see UI picker view delegate and UI picker view data source close to the top. So we're going to need to add both of those so I'll press Return to add delegate comma and space. We'll type picker again. And then I want to pick UI picker view data source. So we have UI picker view delegate and UI picker view data source. If you type that out, you're going to see an error message.
If you click on that, you'll see that it says type view controller does not conform to protocol. UI picker view data source. Do you want to add protocol stubs? So what this is saying is, we're not handling the methods that we need to handle for our view controller class to be a UI picker view data source. Now, the easiest way to fix the problem is to simply click the Fix button. I'll do that and there are the methods that I need to implement. That's nice and fast. For more information about the methods you can implement for UI picker view data source just put your mouse in there and then show the utility area and go to Quick Help.
And you'll see a link to go to the protocol reference at the bottom. Or, your UI picker view, if you're interested in that. Let's hide the utility area. Go back to our code. So these two methods that we've handled already are automatically with Xcode, dictate what number of rows and columns are inside of our picker view. You can think of components as columns. For our simple picker view, we're only going to have one column.
So I'm just going to return one. And then for rows, we want to return however many rows are inside of our data arrays. So this data array right here has three. Instead of returning three we return data dot count. And, just as a matter of personal preference I actually don't like where Xcode put these methods. I like to have my variables and constants declared at the top. And methods handled below that. So I'm just going to grab these, cut with Command X.
Scroll down to the bottom of my code. Tab in a little bit and I'll paste with Command V. And that is a little bit more comfortable for me to look at. And I'll just delete some of those extra lines there. So, we have our array. We're saying that there is one column or component in our picker view. And we're saying that there are three rows, or in other words, there are as many rows as there are items in our data array. So at this point, if we were to test the application we would still see the blank white screen.
So we've handled the appropriate methods for picker view data source. Which again, just ask how many rows and columns our picker view has. Now we need to handle the methods that actually present the data inside of the picker view which are in the UI picker view delegate protocol. These methods, however, are optional. Remember, you can always look up that delegate protocol by showing the utility area. Put in your cursor inside UI picker view delegate in your code, and then just reading about it in the description.
Of course, you have links to the protocol reference and everything else you need. For right now I'm going to hide the utility area. And scroll down to the bottom of my code. And I'm going to handle a method that will show what needs to go inside of each row inside of our picker. Now, the easiest way to do this is to type the word picker out. And that way, all of these delegate methods are going to pop up in your code pending. Then you can just select the one that you want.
So if you just look at these, they're all the same at the beginning. Then they change in this section, here. So we have width for component which is not what we're interested in. Row height for component. Also not interested. Did select row. And then we have title for row. And if you go down to that, you'll see the description it says, call by the picker view when it needs the title to use for a given row in a given component. So just by typing picker you can select which method that you want to handle. And you usually have enough information from this alone.
And of course, you can always go to the documentation if you need some more help. So let's handle picker view title for row for component. So, what we need to do is return a string. And it's optional. And, this is going to be the title that's in the row of the picker view. So, all we need to do is just return data. And that's our string array. And the index that we want is just whatever row comes in. So we pass an index row to the square brackets with row inside of them.
And that's actually it. We don't have to worry about the component because we only have one column in our picker view. So when we run the application, what we should now see is item one, item two, and item three inside of our picker view. And sure enough, there we go. And we can scroll through them. If you stop the add return to Xcode you could even add more data to your array, if you want. And it will show up in the picker view when you test the application. There we go. There's item four right there.
So, in order to have your picker view display data you cannot manage it inside of your story board. You need to do it with code. But you need to first connect your picker view to a delegate and a data source. Remember, you can do that by selecting the picker view. And going in the connections inspector. So I'll deselect and select it again. You can have data source and delegates set in there. Of course you can do this in your code by connecting your picker view to your code and then setting data source and delegate with code.
But I find this way to be much faster and easier to implement. Once you've done that, you need to have your class be a picker view delegate and a data source. You need to have some kind of data to put inside of your picker view. Then you need to handle the data source methods which Xcode will actually handle for you automatically if you forget to do it with that Fix It button. Then, finally, to get data in your picker view you need to handle picker view title for row for component.
Instructor Todd Perkins shows how to use pickers, pop-up messages, sliders, switches, and indicators to build a sophisticated app interface, and display HTML content, files, and data with web views. Plus, learn how to dynamically update your layouts using size classes, and get a brief overview of the Apple Human Interface Guidelines.
- Picker views, controllers, sliders, and indicators
- Creating UI elements with code
- Displaying images with image views
- Creating web views to display web content
- Changing fonts, pins, and views with size classes