Home / IOS Development / SwiftUI Toggle Customization: Styling with ToggleStyle

SwiftUI Toggle Customization: Styling with ToggleStyle



Earlier we wrote a tutorial on how to customize the look of a SwiftUI button. This week, let’s see how to customize the look and feel of a SwiftUI switch. If you have read the guide, you know that we can use a protocol called ButtonStyle to create your own button style for customizations. For heat exchangers, the adjustment can be achieved by using ToggleStyle protocol. Later in this tutorial we will use the protocol to transform a switch from the default look to a check box.

First, let’s start with the basics. In SwiftUI you create a toggle using Toggle component. When you initialize 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 switch. Here is an example code snippet to create a standard switch:

If you place the code in Xcode and preview it on the screen, you should see a switch, which is the default appearance of an exchange.

swiftui toggle switch style

Change switch color

In iOS 13, Apple does not provide APIs to change the color of the switch. However, you can easily change the color of the color in iOS 14 with a code line like this:

You can attach one .toggleStyle modifier to Toggle component and provide it with an instance of SwitchToggleStyle with an alternate hue.

swiftui-toggle-tint-color

Customize Toggle Style

The SwitchToggleStyle is a built-in style of a switch. With ToggleStyle protocol, you can create your own switch style to customize the look of a switch. Say, for example, instead of showing a switch in the form of a switch, you might want to make it look like a check box.

In this case, you can adopt ToggleStyle protocol and implement the required method as follows:

You just need to implement makeBody function and create the view for the exchange. In the code above, we use the SF symbols to create a circular check box. The makeBody the function provides configuration parameter for you to access the label and check the status of the bill of exchange.

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

Now we have completely changed the style of the switch by transforming it from a standard switch to a check box.

swiftui-toggle-checkbox-style

Summary

In this guide, I have guided you through the adaptation of Toggle component in SwiftUI. By adopting ToggleStyle protocol, you can easily transform a default switch to a check box or any type of switching style you want. I hope you enjoy this guide. If you want to dive deeper into SwiftUI and learn more about other customization techniques, you can check out our Mastering SwiftUI book.


Founder of AppCoda. Author of several iOS programming books, including beginning iOS 13 programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Follow me on Facebook, Twitter and Google+.




Source link