Skill Level Beginner
- [Instructor] Sometimes you need a control that doesn't yet exist. For example, the UI switch control is far from customizable. I'd like a toggle switch that looks more like an old fashioned switch, or push button. Listen to the basics of making your own controls by making a UI button into a toggle button. So go ahead and open up the example file, you'll find an empty class UIToggleButton.swift, and go into there. Let me give myself some more room here. To make our toggle button, I'm going to subclass UI button, since much of what I want is there.
I can't use an extension here because I'm going to add more properties, but the most important of those will be isOn. So we're gonna do var, isOn, colon, and that's a Bool, which will be false to start. And I'll just keep negating that back and forth to essentially give myself a toggle situation. Okay, very simple.
No big deal. UI button subclasses UI control. There is a series of tracking methods in UI control that handle touches. For controls, you don't use UI responder for touch events, but these methods instead. The control will handle any target action pairs in the class hierarchy. I'll change the button when I stop tracking at touch, using the end tracking method. So under my variable, I'm gonna add something called endTracking, like so.
So always call super when you use these methods. So I'm going to put in super.endTracking. And that's gonna be touch. And this will be event. So now I can do what I need to do and endTracking, and all that is is negate the isOns. So I'm gonna do isOn equals not isOn. And that'll be my toggle.
That's all you need for a toggle button. I'm gonna go over to the View Controller now, and you'll see that I've already done some button configuration for you to save you some time. Here's the configure toggle button like you would normally do for one of these, to set all the different properties. And I have some new properties I'm gonna be using here. And then underneath that, I added an addToggleButton. This has one problem with a custom control, and that's you're probably gonna add them programmatically. And so I did the auto layout for you, so you didn't have to spend all your time doing that.
You'll also see in the configuration, I put the selector in and didToggleButton, which is up here. And we could do some action up there in our actions. And what I'm gonna do is just simple if sender.isOn. We'll do one action which is set the title to on, for normal. Else, sender.setTitle to off.
Like so. That's all you need to do to get this to work right. And I'm gonna go ahead and run this. There's my button that says off. I click it, it says on, it says off, it says on. Works good. You have a nice button in the center of your screen. Now I'm gonna add some more features. One of the things that I really want here, is images for these buttons. I may not use an image, and if I don't, I'm gonna want that image to be nil and then go ahead and use the super class properties.
So, let's go back to the code. And I'm gonna add two more properties that are optional. The first one's gonna be onImage. That's gonna be optional, and it'll be nil. I'll do the same thing for offImage. I'll also make a method update display, which is gonna change this button's background image every time something happens. So I'm gonna first do the update display.
And I'll do if isOn. I'll do one thing. Else. I'll do something else. And let's give ourselves some more room so we can see all this. Okay, and so what I'm gonna do here to get my image, is I'm gonna do if let onImage equals onImage, that'll unwrap the onImage.
And then inside here I'm gonna set the background image to onImage for the UIControl state of normal. And that works fine. I'm gonna copy this. I'm gonna paste it down here, and make this off. So this would be off, this would be off, and this will be off. Alright, now I'm gonna use this. There's different ways of using it, I'm gonna use a simple method, which is I'm gonna run this whenever we set one of these properties.
So in the isOn property, I'm gonna do a didSet, and do an updateDisplay, like so. And this is the same thing for my onImage and offImage. So I'm just gonna go and copy and paste these in here like that. And that should work fine. Now I'm gonna go back over to my ViewController, and underneath where it says, let toggleButton I've got some space, I'm gonna put in toggleButton again.
And I'm going to assign my onImage and offImage. So we'll do the offImage first equals UIImage, named. And to get the name, I have them already created in the assets folder. And I'm gonna use the toggle off button for this. And I'm just gonna select it by clicking on it for renaming, copy it, and then go back to the ViewController, quote, command V, and there's toggle off.
I can copy all this and make this toggle on for the onImage, like so. Now I can go ahead and build and run. And I get a nice off button, and you can see that it's dimmed. I click it on, and it turns on. This is only scratching the surface of this subclass. You can add background colors the same way as you added images.
You can add habtics to make the user feel the click of the button. You might also wanna play with making some properties and methods public and private. Play around, and see what else you can do.