Photo by Jakub Żerdzicki on Unsplash

Creating Custom Components in SwiftUI

Learn how you can design custom SwiftUI components without reinventing the wheel

I have been building a little app, and for once I started by actually designing the screens and components of the app before diving right into the code side of thing. And after having the design ready I started building the components. If you are now wondering, what components? And why would anyone want to build their own, let me explain.

Built-In vs Custom Components

SwiftUI has a fantastic library of built-in components that work reliable and are easy to use; the only catch: you can’t really change the design of them.

Custom vs Built-In Toggle Style

Instead of completely ignoring the built-in components and rewriting everything ourselves, Apple has actually provided us with a very nice way of changing the style of a built-in component without having to rewrite all of the logic.

Note: Custom styles are currently not available for every component, but more and more are supported.

Creating a Custom Style

So what exactly are custom styles and how do they work? I think the best way to understand custom styles is with an example:

@State var isFlagged = false
Toggle(isOn: $isFlagged) {
    Label("Flag", systemImage: "flag.fill")
}
.toggleStyle(.button)  // toggle Style: can be .button, .switch, or .automatic

When we add a component like a Toggle, we can set a style, and Apple provides us with two in-built ones: button and switch. While those may work for a lot of use cases, we can easily create our own toggle style, which allows us to choose from the existing ones or ours.

Custom Toggle Style

To create a custom style, we usually only need to implement a makeBody function. This function has a configuration argument, which allows us to tap into information of the component. For a toggle, we can for example, get the information if it is currently on or off. With that we can build a custom style, like a checkbox, like this:

struct CheckboxToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            ZStack {
                Circle()
                    .fill(Color(.systemGray6).opacity(0.5))
                if configuration.isOn {  // if the toggle is on, show a checkmark
                    Image(systemName: "checkmark")
                        .foregroundColor(.primary)
                        .font(.system(size: 20, weight: .semibold))
                }
            }
            .frame(width: 42, height: 42)
            .overlay {
                Circle()
                    .stroke(Color.primary.opacity(0.2), lineWidth: 1)
            }
            // the actual label/text of the toggle
            configuration.label
        }
        .contentShape(Rectangle())
        .onTapGesture {
            // add a little animation when the box is clicked
            withAnimation(.spring(response: 0.4, dampingFraction: 0.5)) {
                configuration.isOn.toggle()
            }
        }
    }
}

Important parts here are:

• configuration.isOn: Will give you the current state of the Toggle, and automatically update your UI if it changes
• configuration.label: Will return the label passed to the toggle, so you can place it where ever you want in your custom toggle style

But how can we now use it? We just need to pass the newly created style to the toggleStyle function and that’s it!

@State var isFlagged = false
Toggle(isOn: $isFlagged) {
    Label("Flag", systemImage: "flag.fill")
}
.toggleStyle(CheckboxToggleStyle())

Components supporting Custom Styles

There are multiple components supporting custom styles, like: Button, Toggle, Gauge, ProgressView, Label, and TextField but there are others that sadly don’t support custom styles (yet) and we need to rely on the given styles or create a fully new component. The ones that don’t support custom styles are, for example: Picker, DatePicker, List, Table, Form, Stepper, Slider, ColorPicker, TextEditor, Calendar. If you are looking to building your own custom styles, just search for the Apple documentation for that specific style and they have normally some great examples to start with.

Conclusion

As usual, I hope you did enjoy this little blog post about custom Swift components and maybe even start using them in your next project!

Get Ix76y’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

If you need a place to store snippets like these, I use Snippet Library, a SwiftUI Library app I developed to keep all my favorite SwiftUI components in one place. If you try it, let me know in the comments what you think of it and I’m always open to feature requests and improvements 🙂! The app, has some paid features (mostly nice to haves so no need to pay), but is free to download and I’m looking to adding more and more snippets to it in the future.