iOS

How to Customize the Appearance of SwiftUI Toggle


Earlier, we wrote a tutorial on customizing the appearance of a SwiftUI button. This week, let’s see how to customize the look & feel of a SwiftUI toggle. If you’ve read the tutorial, you know we can use a protocol called ButtonStyle to create your own button style for customizations. For toggles, the customization can be achieved by adopting the ToggleStyle protocol. Later in this tutorial, we will make use of the protocol to transform a toggle from the standard appearance to a checkbox.

First, let’s start with the basics. In SwiftUI, you create a toggle by using the Toggle component. When initializing a Toggle view, it requires you to specify a binding to a boolean property and a view that describes the purpose of the toggle. The binding controls the ON and OFF status of the toggle. Here is a sample code snippet for creating a standard toggle:

If you place the code in Xcode and preview it in the canvas, you should see a switch, which is the default appearance of a toggle.

swiftui-toggle-switch-style

Changing the Switch Color

In iOS 13, Apple doesn’t provide APIs for changing the tint color of the switch. However, you can easily alter the tint color in iOS 14 with a line of code like this:

You can attach a .toggleStyle modifier to the Toggle component and pass it with an instance of SwitchToggleStyle with an alternate tint color.

swiftui-toggle-tint-color

Customizing the Toggle Style

The SwitchToggleStyle is a built-in style of a toggle. With the ToggleStyle protocol, you can create your own toggle style to fully customize the appearance of a toggle. Say, for example, instead of displaying a toggle in the form of a switch, you may want to make it appear like a checkbox.

In this case, you can adopt the ToggleStyle protocol and implement its required method like this:

You just need to implement the makeBody function and create the view for the toggle. In the code above, we utilize the SF symbols to create a circular checkbox. The makeBody function provides the configuration parameter for you to access the label and control the status of the toggle.

Once you created your own toggle style, you can apply it by attaching the toggleStyle modifier like this:

Now we’ve completely changed the style of the toggle by transforming it from a standard switch to a checkbox.

swiftui-toggle-checkbox-style

Summary

In this tutorial, I’ve walked you through the customization of the Toggle component in SwiftUI. By adopting the ToggleStyle protocol, you can easily transform a standard switch to a checkbox or any kind of toggle style you like. I hope you enjoy this tutorial. If you want to dive deeper into SwiftUI and learn more about other customization techniques, you can further check out our Mastering SwiftUI book.

iOS
A Complete Guide to In-App Purchases for iOS Development
iOS
How to Reuse SwiftUI Views with LibraryContentProvider and Swift Package
SwiftUI
How to Create Perspective Text Using SwiftUI
Shares