Custom-Shaped Switch in iOS Apps
By: Alex Nekrasov
Tags: Mobile App Development, Swift, iOS App Development

Once I got a rather simple-looking task from a regular client of mine: he needed to make a screen for an iOS app with several switches. The switch was long and thin. It was different from both the UISwitch, which has size 51x31 points, and the Material switch, which is more flexible in size, but the thumb is bigger than the track.

Switches from client’s design

I found many solutions on GitHub, but they were either modifications of existing UISwitch, or variations of Material switch. Other options didn’t look like switches at all.

I’ll give some references, in case you’re looking for something different:

AIFlatSwitch — the switch looks more like an animated checkbox.

MJMaterialSwitch —an iOS implementation of the Android Material Switch.

LabelSwitch — the closest switch to what I was looking for. Longer than the standard one, with text on top. Unfortunately, it didn’t work when I tested it.

TTSwitch — a very old switch, circular or rectangular.

PWSwitch — an animated flat switch with a rather interesting design.

Paper Switch —a standard iOS switch, but with an interesting effect on its superview.

TKSwitcherCollection — a whole collection of different switch components.

SwiftySwitch — a switch component with custom geometry, but written in an old version of Swift.

PVSwitch — another Material-looking switch.

None of them completely fulfilled my requirements. Just to be clear, I needed:

A switch component, looking similar to the standard UISwitch.

A library which can be compiled in a Swift5-based project.

View can be places and set up right in a Storyboard.

The closest to what I needed was SwiftySwitch. There were several issues I needed to fix on the go.

One of the biggest advantages of SwiftySwitch is that it requires only one file. It supports CocoaPods, but obviously, this way of integration wasn’t an option for me. So I just dragged the swift file into my project.

The standard way of old control integration into iOS projects includes three steps:

Upgrading old Swift syntax to a modern one. Apple changes some function names, deprecates some functions, introduces new ones. Usually, Xcode offers some automatic code replacements. Fixing bugs. The same functions may work differently, UIKit views may look different than they used to. After a syntax update, custom control needs testing and bug fixing. Adjusting for project needs. You find the closest control to your needs, but it rarely matches completely. You may need to add or remove some features, or change the behavior of the view.

Here’s the original file:

To update Swift to a modern version, you can use the integrated Xcode function. To use it, click on the Edit menu and select Convert, then To Current Swift Syntax:

Conversion to current Swift syntax

If you project is already using the latest Swift version, it won’t offer you to convert only one file. This problem can be solved by either creating a separate project and running the conversion there, or reviewing the file manually. If you try to build the project, Xcode will show you errors in the file (if it doesn’t, it means that your file is already good to go).

Fixing errors

When your project builds, test it and check if it has any bugs. In my case I only found a couple of issues with speed and geometry, but fortunately, all these parameters could be configured in Storyboard Editor. If you’re going to use it in many places, you can change the default values:

Default values

And that’s how it looks in the app:

Switches in the app after modifications

Final source code:

I hope it was helpful for you.

See you next time and happy coding!