All of these switches follow the same pattern. There is a background and nob that slides from left to right (usually with an animation), much like the UISwitch . Except if you wanted to implement any of these designs it would be a poor choice to subclass UISwitch as you can hardly customize the colours — aside from the on/off tint.

So I thought I would try to re-engineer the UISwitch so that I would have complete control over each aspect, making it easy to style in the future. Here was the end result:

Take some time now to guess which is the native UISwitch

Turns out its actually pretty easy (and a lot of fun!) to build these control elements from scratch. I even went so far as to add the ability to set on/off text or images. For those who don’t know, UISwitch has onImage and offImage which when set don’t do anything anymore.

Let’s get started !

First we need to take a magnifier to UISwitch . From the start I could tell that there were at least 3 main layers that make up UISwitch .

The outer background layer the nob slides along, we will call this the Track layer

An inner layer that’s size seems to shrink when the switch is on or highlighted. We will call this the Inner layer

The knob which expands ever so slightly when highlighted. We will call this the Thumb layer