Swift Components Tour – UISwitch

In this lesson

  • UISwitch basics
Kyle Roberts
Swift Guru at Large

Kyle's Series


Tap on time to skip ahead


The lights go down as a lone actor enters the stage reading an excerpt of Brax.tv’s rendition of Random Text Generation. Hi, Kyle here with another stop on the Swift Components Tour. This stop is switches, the UISwitch. You may recognize the UISwitch from the settings app. That’s where you see it a lot. The functionality is basically what you would expect. Here you can see it acting pretty much as a light switch. Let’s get down to business.


Basically, the UISwitch toggles between two states, on and off. We’ve seen this act here in two different formats. The first one, standard UISwitch, nothing special, just dragged out from down here again onto the storyboard and hooked up to a function in our code that says the toggle switch was toggled. Down here, we could have actually had this on the UIButtons stop on the Swift Components Tour, but I thought it might fit better here because this is actually a UIButton with some fancy footwork to set it up to act exactly like a UISwitch. You can see here what’s going on is this view controller is like we’re in a theater. We have the house lights which light up the whole room, maybe during intermission or after the play. And we have spotlights to highlight whatever is going on on the stage. Also, when the house lights come on, if the spotlights are already on, the spotlights will turn off. We’re not about wasting energy. There’s no need to have the spotlights on here. Sort of the same, when we turn the spotlights on and the house lights are on we will turn the house lights off so you can see where the spotlights are pointing too. Not that any of that matters in this fictional theater.


Let’s just look at the storyboard, as usual. You can see here that I have a UILabel that says spotlights. Plus the UISwitch under it, which controls both spotlights. Down here, I have the house light’s UIButton. The special toggle functionality of this button is implementing in the code so it looks just like a UIButton from the UIButtons view controller.


Then I have two image views whose images are set to a clip art style spotlight. Let’s look at the code to see how we’re working with all of these elements here. I have a reference to both switches. One is actually the UIButton and then the label that’s above the light is the spotlight switch. We also have a reference to both spotlights and an auto layout constraint hooked to both spotlights. In viewDidLoad, here I’m sending the house lights switch, which is the UIButton, I’m setting it’s selected property to false. We’ll cover this in a second but that is how we’re using a UIButton to act like a UISwitch. Plus, a little bit of customization on the lights label above the UISwitch. You can see it sort of has a little bit of glow around it that changes colors. It’s based on the house lights. We’re just setting that up over here.


Right here, all we’re doing is a CGTransformation where we’re flipping the right spotlight image view horizontally. In the storyboard, both spotlights are facing to the right, but after this flip in viewDidLoad, both spotlights are going to be facing in towards the center. Then we’re just adjusting the two constraints on both spotlights so that they are off screen when the view appears. This is what we’ll see when the view appears, an empty dark theater.


Next in the code, we have the touch or toggle events from the UISwitch and the UIButton. With the UISwitch it’s pretty easy, as the switch object itself will keep track of whether it’s on or off. In this method where the spotlight switch is toggled, we check if the spotlight switch is on after it’s been toggled. If it is on, we need to turn on the spotlights. If the spotlights switch is off after it’s been toggled, turn off the spotlights.


It’s only slightly more complicated when using a UIButton, we need to check if the house lights switch selected property is true after taping it. If it is, we need to set its selected property to false and then turn off the house lights. If the switch is not selected after we tap it, we need to make sure we set the selected property to true, and then turn on the house lights.


Now these methods down here are not as important. They’re basically just handing the animating and the states of the spotlights and the lights label shadow. How the views are interacting with the selected or on properties of the UIButton and the UISwitch. That’s been the UISwitch! Thanks for watching.