How to Create Custom SwiftUI View Modifiers and Extensions

SwiftUI has revolutionized the way we create user interfaces in iOS and macOS applications. It provides a declarative syntax for building UI components, making the code more readable and maintainable. Custom view modifiers and extensions are powerful tools in SwiftUI that allow you to encapsulate common styling and behavior into reusable components. In this blog post, we’ll explore how to create and use custom view modifiers and extensions in SwiftUI using a practical example.

Understanding Custom View Modifiers

View modifiers are a fundamental part of SwiftUI. They enable you to apply styling, layout, and behavior changes to views. While SwiftUI offers a wide range of built-in modifiers, there might be cases where you want to create your own custom modifiers to encapsulate specific styles or behaviors.

In this example, we have defined a custom view modifier named MyBigFont. This modifier applies a larger font size and a blue text color to any content it is applied to.

struct MyBigFont: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 30))
            .foregroundColor(Color.blue)
    }
}

The body function is where we define how the modifier alters the provided content. In this case, the content is first given a font size of 30 points and then its text color is set to blue. Now, let’s explore how you can apply this custom modifier using extensions.

Using Extensions to Create Custom View Modifiers

Extensions in Swift allow you to add new functionality to existing types. In SwiftUI, you can use extensions to create custom modifiers that enhance the capabilities of the View protocol. By extending the View protocol, you can define new methods that provide additional styling and behavior to any view.

In this code, we’ve extended the View protocol to create a method called big(). This method applies the MyBigFont modifier to the view it’s called on.

extension View {
    public func big() -> some View {
        modifier(MyBigFont())
    }
}

This extension enables you to easily apply the MyBigFont modifier to any view. For example, in the ContentView, we use the big() modifier to increase the font size and change the text color of the “Hello, world!” text.

Text("Hello, world!").big()

Applying Custom Modifiers in ContentView

In the ContentView struct, we’re utilizing both the built-in and custom modifiers to style the UI elements. We also apply the .imageScale(.large) modifier to the image of a globe icon, and then use our custom .big() modifier on the text view.

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!").big()
        }
        .padding()
    }
}

The resulting UI presents a larger font size and blue text color for the “Hello, world!” text, thanks to our custom modifier.

Conclusion

Custom view modifiers and extensions are valuable tools in SwiftUI that help you encapsulate styling and behavior into reusable components. By creating a custom view modifier, you can define a set of changes to apply to a view’s appearance. Extensions, on the other hand, let you create methods that enhance the View protocol, enabling you to chain multiple modifiers together to achieve complex UI designs.

In the example, we demonstrated how to create a custom view modifier, extend the View protocol to create a custom method, and apply both standard and custom modifiers to create a visually appealing and reusable style. SwiftUI’s emphasis on declarative syntax, combined with custom modifiers and extensions, allows you to build intuitive and maintainable user interfaces with ease. If we needed to change the font styling throughout our application, instead of updating everywhere we could instead update the modifier and changes would be applied wherever the modifier was used.

If you’ve enjoyed this blog, you will probably enjoy some more of my iOS app development blogs or general tech blogs. All my code for this tutorial is available on GitHub. You can also opt to subscribe, if you wish to receive updates via email newsletters from time to time.