Sometimes you need a control that doesn’t yet exist. For example, the UISwitch control is far from customizable. I’d like a toggle switch that looks more like an old-fashioned switch or pushbutton. Let’s learn the basics of making your own controls by making a UIButton into a toggle button.
Open the example file. You’ll find an empty class UIToggleButton. in the UIToggleButton.swift file. To make our toggle button I’m going to subclass UIButton, since much of what I want is there.

 class UIToggleButton:UIButton{
}

I can’t use an extension because I’m going to add more properties to the button. The most important of those will be isOn.

var isOn:Bool = false

UIButton subclasses UIControl. There is a series of tracking methods in UIControl that handles touches. For controls, you don’t use UIResponder 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 a touch using the endTracking method.

override func endTracking(_ touch: UITouch?, with event: UIEvent?) {
}

Always call super when you use these methods.

super.endTracking(touch, with: event)

And I’ll change the state of the isOn button.

isOn = !isOn 

Head to the ViewController code. You’ll see I made a button configuration method configureToggleButton. One problem with custom controls like this is you will have to add them programmatically without more work, which I’ll cover in a future tip. I added two methods to configure the button and to lay out the button, which you can find in the example file or the listing below. I’ll use the button in the action I set up, where I’ll change the title on the toggle. This way you can see the action and the touch event can run independently, but see the effect of the touch event on the toggle.

if sender.isOn {
            sender.setTitle("On", for: .normal)
        } else {
            sender.setTitle("Off", for: .normal)
        }

Build and run. You’ll have a button in the center of the screen.

You can add more features. I’ll add images for the buttons.
I may not use an image. If I don’t I’ll want the image to be nil, and use the superclass properties, so I’ll use optionals for the image in the UIToggleButtonClass

public var onImage:UIImage! = nil 
public var offImage:UIImage! = nil

In my UIToggleButton method,  II’ll make a method updateDisplay which will change the button’s background image.

func updateDisplay() {
        if isOn {
            if let onImage = onImage{
                setBackgroundImage(onImage, for: .normal)
            }
        } else {
            if let offImage = offImage{
                setBackgroundImage(offImage, for: .normal)
            }
        }
    }

I’ll update the display once I set the image. I’ll use a property setter to do that.

var isOn:Bool = false{
    didSet{
       updateDisplay()
    }
}

I’ll do the same for the off image, so I’ll copy and paste that

var offImage:UIImage! = nil {
    didSet{
      updateDisplay()
    }
}

And the same for the on Image

var onImage:UIImage! = nil{
    didSet{
       updateDisplay()
    }
}

I added to the assets folder a toggle off and toggle on button image. Head to the ViewController. In the cofigureToggleButton, add two more lines of code.

 
toggleButton.offImage = UIImage(named: "Toggle off")
 toggleButton.onImage = UIImage(named:"Toggle on")

Build and run. Tap the button. You’ll get a cool looking button that glows when on, and dims when off.

You’ll find a few more examples of switches and toggles you can use in the downloads file. Give them a try like this switch

This is only scratching the surface of this subclass. You can add background colors the same way as images. You could add haptics to make the user feel the click of the button. You might also want to play with making some properties and methods public and private. Play around and see what else you can do.

The Whole Code

UIToggleButton.swift

//
//  UIToggleButton.swift
//  Toggle buttons and switches
//
//
//  An exercise file for iOS Development Tips Weekly
//  by Steven Lipton (C)2018, All rights reserved
//  For videos go to http://bit.ly/TipsLinkedInLearning
//  For code go to http://bit.ly/AppPieGithub
//

import UIKit

class UIToggleButton:UIButton{
    var isOn:Bool = false{
        didSet{
            updateDisplay()
        }
    }
    var onImage:UIImage! = nil{
        didSet{
            updateDisplay()
        }
    }
    var offImage:UIImage! = nil{
        didSet{
            updateDisplay()
        }
    }
    
    func updateDisplay(){
        if isOn {
            if let onImage = onImage{
                setBackgroundImage(onImage, for: .normal)
            }
        } else {
            if let offImage = offImage{
                setBackgroundImage(offImage, for: .normal)
            }
        }
    }
    override func endTracking(_ touch: UITouch?, with event: UIEvent?) {
        super.endTracking(touch, with: event)
        isOn = !isOn
    }
}

ViewController.swift

//
//  ViewController.swift
//  Toggle buttons and switches
//
//
//  An exercise file for iOS Development Tips Weekly
//  by Steven Lipton (C)2018, All rights reserved
//  For videos go to http://bit.ly/TipsLinkedInLearning
//  For code go to http://bit.ly/AppPieGithub
//

import UIKit



class ViewController: UIViewController {
    @IBOutlet weak var basicSwitch: UISwitch!
    
   
    var toggleButton: UIToggleButton!
    
    //Action when button recieves touchUpInside
    @IBAction func didToggleButton(_ sender: UIToggleButton) {
        if sender.isOn {
            sender.setTitle("ON", for: .normal)
        } else {
            sender.setTitle("OFF", for: .normal)
        }
    }
    
    //Configure the toggle button for this app.
    func configureToggleButton()-> UIToggleButton{
        let toggleButton = UIToggleButton()
        toggleButton.offImage = UIImage(named: "Toggle off")
        toggleButton.onImage = UIImage(named: "Toggle on")
        toggleButton.setTitleColor(.black, for: .normal)
        toggleButton.titleLabel?.font = UIFont(name: "Gill Sans", size: 36)
        toggleButton.setTitle("OFF", for: .normal)
        toggleButton.addTarget(self, action: #selector(didToggleButton(_:)), for: .touchUpInside)
        return toggleButton
    }
    
    //Add the button to the layout centered on the view.
    func addToggleButton(to view:UIView) {
        toggleButton = configureToggleButton()
        view.addSubview(toggleButton)
        toggleButton.translatesAutoresizingMaskIntoConstraints = false
        var constraints = [NSLayoutConstraint]()
        constraints += [NSLayoutConstraint.init(item: toggleButton, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerXWithinMargins, multiplier: 1.0, constant: 0)]
         constraints += [NSLayoutConstraint.init(item: toggleButton, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerYWithinMargins, multiplier: 1.0, constant: 0)]
         constraints += [NSLayoutConstraint.init(item: toggleButton, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 128)]
        constraints += [NSLayoutConstraint.init(item: toggleButton, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 96)]
        NSLayoutConstraint.activate(constraints)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        addToggleButton(to: view)
    }
}

One powerful, yet sometimes rightfully feared programming technique is recursion. Many do not even use it, some don’t know what it is, but when working with hierarchies, you really have to use it. Let’s take a look at recursion and apply it to a common UI case where you need it.
Download and open the exercise file. I put a playground inside the project to show you some simple recursion. The classic definition of recursion is

recursion: See Recursion

Recursion is calling yourself. However that’s not quite accurate. The most basic recursion is this.

func factorial(_ n:Int)->Int{
    return factorial(n-1) * n
}

This calls itself with one less for n every time. You’ll notice that Xcode has problems with this, and does warn you when you do not have a well-formed recursion. Something like this will not run truly forever, but will run until you run out of memory or out of range of your type. The definition of a well formed recursion is better written

Recursion: See Recursion until something happens.

There is some condition where we stop the recursion. For example, I can add a condition that if n is greater or equal to 1, the function returns a value of 1.

func factorial(_ n:Int)->Int{
    
    if n >= 1{
        return factorial(n - 1) * n
    } else{
        return 1
    }
}

The error disappears. We can run the function for 5 and get 120.

This is great, but where it is the most practical is traveling hierarchy or tree structures. Recursion is basically making a smaller identical problem and solving that, until there’s no more problems. One place you can see this is in a really messy storyboard I wrote.

I’ve got 20 buttons and I decide they would look better with a drop shadow and rounded corners, like I’ve shown you in other tips. I have them in three stack views and in two of the stack views I have stack views of one to three buttons.

I’m not going to make 20 outlets and change all of them. Instead, I’ll use the view hierarchy and some recursion.
Got to the view controller, and you’ll see I stubbed out code for us. There a’s function findButton which takes two parameters: a view and a level, which I defaulted to 0

func findButton(view:UIView,level:Int = 0){
        print("Subview count: \(view.subviews.count) Level: \(level)")
}

Right now all it does is print out the number of subviews and level. I’ll change this into a recursive function to search for Buttons to change.
I’ll start with the limiting factor. This time if a view has subviews, this is the subview count is greater than 0, I’ll look at each subview for more subviews.

       if view.subviews.count >= 0{
}

I could do a recursive look at that array of subviews, but for ordered items I tend to use a for.  Iteration simplifies tracing the recursion, and is a bit less intense on memory in large cases. So I’ll add this

for subview in view.subviews{
} 

However within this loop, I will check each subview for subviews recursively, indicating I’ve dropped a level in the tree by incrementing the level

 findButton(view: subview,level:level + 1)

At some point, I’ll hit a view without subviews. The if will fail, and that’s a single view. For this I’ll check for a button

if let button = view as? UIButton{
}

And I’ll set the button to have the level for title, as a rounded button with a shadow.

            button.setTitle("Level \(level)", for: .normal)
            button.setTitleColor(.white, for: .normal)
            viewFormat(view: button)

We’ll call this in view did layout subviews so rounded corners work right.

override func viewDidLayoutSubviews() {
        findButton(view: self.view)
    }

Change your simulator to an iPad pro 9.7″. Run this and you get rounded buttons with shadows.

While I changed everything, This technique can find a specific view if you have some identifying information. Of course it is not limited to views, but nested arrays or dictionaries can be traversed easily using a recursive method like this.

The Whole Code

//
//  ViewController.swift
//  RecursionDemo
//
//
//  A exercise file for iOS Development Tips Weekly
//  by Steven Lipton (C)2018, All rights reserved
//  For videos go to http://bit.ly/TipsLinkedInLearning
//  For code go to http://bit.ly/AppPieGithub
//

import UIKit

class ViewController: UIViewController {

    func viewFormat(view:UIView){
        view.layer.shadowOpacity = 0.9
        view.layer.shadowRadius = 5.0
        view.layer.shadowColor = UIColor.black.cgColor
        view.layer.shadowOffset = CGSize(width: 3, height: 3)
        if view.frame.width > view.frame.height{
            view.layer.cornerRadius = view.frame.height / 2.0
        } else {
            view.layer.cornerRadius = view.frame.width / 2.0
        }
    }
    
    func findButton(view:UIView,level:Int = 0){
        print("Subview count: \(view.subviews.count) Level: \(level)")
        if view.subviews.count >= 0{
            for subview in view.subviews{
                findButton(view: subview,level: level + 1)
            }
        }
        if let button = view as? UIButton{
            button.setTitle("Level \(level)", for: .normal)
            button.setTitleColor(.white, for: .normal)
            viewFormat(view: button)
        }
    }
    
    override func viewDidLayoutSubviews() {
        findButton(view: self.view)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }


}