Swift Components Tour – Pickers

In this lesson

This chapter of the Swift Components Tour is the UIPickerView and its friends, the iOS dropdown controls.

Kyle Roberts
Swift Guru at Large

Kyle's Series

Transcript

Tap on time to skip ahead

00:10

Hello and welcome to another stop on the Swift Components Tour, Pickers. I’m Kyle with Brax.tv and let’s jump right in!

00:19

A picker is something that everyone has seen using iOS but they may not know what it’s called. It’s basically this pseudo 3D, rounded, scrolling, dropdown menu. I guess it’s sort of like iOS’s dropdown control. What’s happening in this view controller, is I have a label here asking “What is your favorite of Apple’s favorite cities?” I’ll explain in a little bit where I learned what Apple’s favorite cities were. For now, let’s just pick our option. I’ve never been to any of these. I’m just going to pick Sunnyvale because it has a nice name. It’s sounds kinda nice there. As you select an option in this UIPicker, then we change this answer label up here to the current selection of the picker.

01:18

Then down here, we have a UITextField with placeholder text that says pick a date, any date. So we tap on that UITextField and up slides a UIDatePicker.  Which is a specialized version of the normal UIPicker made just for dates. You can customize this a little to include the time, maybe add some zazz with some colors or backgrounds. As usual with this Swift Components Tour, we’re keeping it pretty plain. We just select whatever date we want. How about we select my birthday! Not 2015. I’m pretty old so I don’t want to scroll all the way back, however far. My birthday is November 4th and now that I can see that it is on a Wednesday this year. That’s pretty cool. Wednesday birthdays are the third best day to have your birthday. I would know, I’ve had a few. Not important. Let’s check out the storyboard.

02:15

Here in the storyboard, again like a few of the other view controllers we’ve seen in the Swift Components Tour, this scene looks exactly as it does in the app. Maybe a little bit different spacing. What’s going on with the spacing here is this UITextField’s constraints are actually constraining it to a specific distance from the bottom of the screen, which we see here, rather than maintaining a strict distance from the view above it, which would be this UIPicker. Again, this is just a label asking a question, a label to display the current value of this UIPickerView, and this UIPicker which I’ve just dragged out from down here again. I mentioned about where I got the options of your favorite of Apple’s favorite cities. When you drag a UIPicker view into Interface building, it’s automatically populated with these five options. You may notice that you can’t customize the options over here. That’s because the UIPicker view actually uses a delegate in data source, like a table view and we’ve also seen delegates use UITextControls, like UITextField here. When we get to the code we’ll talk about that.

03:37

Again, with this UITextField, basic UITextField, just set the placeholder text. That’s all we need to know about it. So, how about some code?

03:48

Up here, three properties for our three UI elements. The city picker, the picker display label, which was that picker that the text was always set to the current value of the city picker, and then the date text field. Underneath, we have a property for an array called pickerData which is just those five cities stored as strings in an array. Then, we have a property for a date formatter and a property for the UIDatePicker. In viewDidLoad, we’re just calling two methods to set a picker and set a date picker. In setUpPicker, what I’m first doing is adding a border to the picker. I don’t really have a reason that I did this, other than there’s just no border normally. I’m not sure why I didn’t add one to the UIDatePicker underneath, but there’s a boarder. Here we’re also setting the datasource and delegate to this view controller, which you can also do in the storyboard. Then we’re telling the picker after it has run through its delegate and datasource methods, to select row with an index of two which is actually a third row, and that’s Cupertino, which is the default selected one when you drag it out onto Interface Building. So I just stuck with that. And then we’re telling the pickerDisplayLabel to set it’s text to the picker data’s object at index two, which is again the third one, which is again Cupertino.

05:19

A quick run through of these delegate and data source methods for the picker view. The first one, number of components in the picker view. All that’s asking, how many sections going from left to right there are. You can see in this standard UIPickerView here we only have the one but in the datePicker we have three for month, day and year. Since we’re only worrying about the city here, we don’t need to know about the state or the country, we’re just returning one section.

05:46

In the next method, it’s asking how many rows are in the component and since we only have one component we don’t have to worry about which this method is asking about, and we’re returning five. A better way to do that would be to return self.pickerData.count. That’s because if we ever change the options in here, maybe we add another, then the picker view will automatically update with a sixth row. Otherwise, if we would have kept this at five we could have had a sixth option but the delegate only says there’s supposed to be five rows. So we’ll only see these five rows.

06:28

 

The next delegate or data source method, it’s just asking what the title for the row is. We’re returning picker data object at index row. Basically, index zero of the picker view, we’re asking for object at index zero of the picker data array, and so on and so on until we get to index four, which is actually the fifth element in the array. This last method is just getting the event from when a value is selected in the picker view and updating the pickerDisplayLabel. Again, when we select a new option it will update the label above to the currently selected option.

07:10

Let’s check out the date picker. A bit of setup is required for this, since we didn’t add it in through Interface Building. I’ll explain why in just a second. First off, we’re setting the date picker mode to .date. I think the other option includes date and time, not sure about that, but we can just leave it for now, it’s not super important. Then I’m adding a response to the event ValueChanged to call this method datePickerDateChanged. When the day in the date pick is changed, or the value is changed, it will call this method on the object self. We’re setting the date of the date picker to today’s date and the date pickers background color to white. Here’s where it is interesting, because we are doing something cool with the dateTextField. We are setting its property inputView to the datePicker. Basically all this will do for you, normally when you tap on a text field, it will slide up a keyboard, or in this case if you’re in the simulator and you have the keyboard turned off, it won’t slide up the keyboard but it will just let you type. But since we are setting the dateTextField’s inputView to the datePicker, when we tap on the text field, it will slide out the datePicker like it is a keyboard for the text field. You can do this with any UIElement that you want. Even something custom that you made up that just displays some random shapes that you would want to add to the text field. It’s something that’s your choice but since we’re on the Pickers stop on the Swift Components Tour I thought it was suitable to use the UIDatePicker here. Then we’re just setting date style of the date formatter.

08:58

Down in this method that we mentioned earlier that is called on the value changed event of the date picker, all we’re doing is using the date formatter to set the text in the text field to the selected date in the datePicker. It formats it so it says day of the week, month, day, year. And then this final method here, we may have covered it before, but all it does is hide the keyboard on a tap, or a swipe, or a scroll, or anything. One thing it doesn’t do is catch touch events that are intersected by subviews of the main view. All this is catching is touches on non-interactable elements of this view controller, such as this label. That’s it. Thanks for watching!

Additional Info

Register to get access to additional resources and info.