Switches toggle on and off, and activity indicators show that a task is being completed. See how to create and customize these controls in this video.
- [Instructor] A switch is a simple UI control that has an on and an off state. You can create a switch through the library. Filter for switch and then drag one onto the screen wherever you'd like. Let's also filter for a label. We can drag one below the switch. That should be good. Let's connect these objects to code by opening up the assistant editor, which we can do by Option + clicking ViewController.swift, and then right click and drag from the label underneath your view controller class declaration.
Call it label. Hit Connect or Enter. I'll make an extra line of space. And then right click and drag from the switch underneath viewDidLoad. Now you may recognize the value changed event. This works just like the slider controller and many of the other user interface objects in Xcode. Now I'm not going to show you all of them because many of them work in the same way. I just want to point out that for the most part, this is the process.
The UI object has some kind of event that it can trigger. You could handle that event and respond how you like. If you need to reference the object that's calling the event in the event itself, you can set the type to that particular object, in this case, UISwitch. I'll name this switchWasChanged and then hit Connect. Let's return to the standard editor and look at some of the options we have for customizing a switch.
Show the right view and head over to the attributes inspector. You can see that we have a few options right here like modifying the tint of the object and setting the initial state either on or off. Let's head over to ViewController.swift and handle the switchWasChanged event. Before we write any code, think about how you might display whether the switch was on or off inside of a label.
I'll do that by typing label.text and setting it equal to sender.isOn and then a question mark. This is like putting an if statement in your code but it's condensed. If you're unfamiliar with if statements, they allow you to check whether a certain value is true and respond accordingly. So what this says is is the sender on, or in other words, is the switch on? If it's on, we do what's after the question mark, which is put the string inside the label.
We'll put the string On. And then if the switch is off, we can put a colon right after that and put another string and put what the string should be inside of the label if the switch is off, which is Off. So to review, this is a value that's going to be true or false. Question mark says if it's true, then we do what's after the question mark, and a colon says if the value is false, then do that.
So the label's text will be On if the switch is on and Off if the switch is off. Run the application to confirm that it works. Toggle the switch and watch the label update. So as with other user interface elements, a switch has a value changed event which you can use to respond whenever the value of the switch changes to on or off.
The switch itself, which in this case is referred to as sender, has a property called isOn that is true when the switch is on.
- Alert controllers and actions
- Sliders, progress bars, and switches
- Creating UI elements with code
- Displaying web content with Safari view controllers and WKWebView
- Creating collection view controllers
- Creating tabbed apps
- Publishing your app with App Store Connect