Swift Components Tour – UIStepper

In this lesson

  • UIStepper basics
Kyle Roberts
Swift Guru at Large

Kyle's Series


Tap on time to skip ahead


Hello world. Kyle here with Brax.tv and we’re on our last stop of the UI controls portion of the Swift Components Tour. This last stop is the UIStepper. The UIStepper is a UI control that’s not nearly as common as some of the others. I’m not sure of all the reasons for this. I do know that it is not as old as some of the other UI controls so maybe some apps or even the operating system itself is a little slower to adopt or implement this new component. But it is really cool.


Basically a stepper is sort of like a UISegmentedControl with a minus segment and a plus segment. But it’s not just a UISegmentedControl, the importance of the UIStepper lies in what it keeps track of. A UIStepper has four important properties that you need to know about to use it. The first two of these important properties is the minimum and the maximum value of the UIStepper. All four of these properties are numbers. The minimum is the minimum number the UIStepper’s current value can be. The maximum property is the maximum value the stepper’s current value can be. The stepper’s current value is always between the minimum and the maximum. The step property is the increment that the stepper will add or subtract to the current value staying within the bounds of the minimum and the maximum.



So let’s take a look at this first stepper here. Next to it is a text field that says “your fav number.” What is my fav number? I don’t know. Let’s go with 111. What do you think will happen if we hit the minus side of the stepper? It will increment the value in this text field down by one. With the plus side of this stepper it will increment it up by one. If we just hit the the backspace, if we hit the minus or plus we will either add or subtract from zero. We can even go into negative numbers. That is basically what a UIStepper is for, but it’s functionality is not only limited to editing the value of a number in your app.


Here’s an example down here with dates. Set to today’s date, August 17, 2015, we can add a day to this. And it will change the date even keeping track of the week day. Once we get to the end of the month, it will move on to the next month. You can go backwards, as you would expect, all the – we’re not going to go to July because that’s a lot of clicking. It’s probably annoying.


This bottom stepper is actually going to control the brightness of your device. Since we’re in this simulator it’s not going to work, but just picture it. Pressing the minus button your screen getting dimmer, pressing the plus button your screen getting brighter. It’s amazing!


Under here we have the storyboard basically laid out the same as we have it in here. Now these four properties that we were looking at for the stepper are not as important here as we’re actually overwriting what’s in the storyboard in the code. There’s a lot going on in this code since we’re doing a lot of things in this view controller. In viewDidLoad, we’re setting up some date formatting stuff in the date label to handle all of that date information: changing by day, keeping track of the day of the week, the month, the year, and setting some default values for some of the steppers on the screen. We have each stepper on a value changed event hooked up to this one method, stepperChangedValue. How we are determining which stepper sends a message to this method is by asking if the sender is equal to the number stepper. If it is then we’ll adjust the number value. If the sender is equal to the date stepper then we’ll adjust the date. If the sender is equal to the utility stepper, we’ll adjust the brightness. We’re also using an event from the numberTextField on valueDidChange to just set the number stepper’s value to the number in the text field. Also some delicate methods for the UITextField to only use number values and a dash for the negative symbol. A method to hide the keyboard here on a tap. I’ll quickly go over how we are handling the value adjustments to the content on the screen.


Here in a just number value it is as simple as setting the number text field’s text to the number stepper’s value. Pretty similar with the adjust brightness method. We’re just setting the device’s brightness to the utility stepper’s value. In the adjust date method, it gets a little more complicated since we’re working with some NSDate components and NSCalendars. NSDates are not the simplest thing to work with in iOS. But basically what we’re doing is we’re determining if the stepper has incremented up or down. Then either subtracting a day or adding a day to this NSCalendar object. Then we’ll extract the date from that NSCalendar and set the value on the stepper and the value on the date label to their respective components of the NSCalendar.


Be on the lookout in the future for another video about handling the display of an NSDate. Thanks for watching!