SwiftUI: What are ViewModifiers?

SwiftUI is quickly becoming the popular choice for making iOS apps, and one of the most common things you use is ViewModifiers. If you have worked with SwiftUI before reading this and don't know what ViewModifiers are, I guarantee you have used them before without realising it.

ViewModifiers are methods you call on the Views you use in your app to customise their appearance and behaviour. You use them to change colors and sizes, to add gestures, to add accessibility options etc to your Views, if you have ever used .background or .foregroundColor in your project, these are examples of ViewModifiers.

How do you use ViewModifiers?

Let's start by creating a project, I wont bore you with the whole process so just make sure to select SwiftUI instead of Storyboard when making your project.
The default View created for you already uses some modifiers so lets take a look at that

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

The View above uses .padding and .foregroundColor.

• .padding : Lets you specify the padding for your View, note that because we dont provide any values it applies the system default padding for all sides. You can specify the edges and values like this .padding(.top, 12) or .padding(.horizontal, 12) for example
• .foregroundColor : Will set the foreground color for the view, affecting text colors, tints etc

Some common examples of built in modifiers are:

• .frame : Used to change the size of a View
• .font : Used to change the font family, size etc for a Text

Lets try making something ourselves, our target is to build a simple filled button

Before we start let's review the constraints we want to use on the button - Padding, Corner radius, Background Color.

Lets start by adding a simple button with some text:

Button(action: {
    // On click
}) {
    Text("Label")
}

This will render a simple text button:

After adding our modifiers:

Button(action: {
    // On click
}) {
    Text("Label")
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .foregroundColor(Color.white)
}
.background(Color.blue)
.cornerRadius(14)

Custom View Modifiers

The example above is very simple but if your project had many Views with similar styles (common padding values, themed background colors etc) it can get very annoying very quickly to have to repeat the same modifiers. Fortunately SwiftUI lets you create your own custom modifiers.

Lets consider the example above, if you notice the button text doesn't exactly match what we were trying to build. Lets create a custom modifier for the button text:

struct ButtonTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17, weight: .semibold))
            .lineSpacing(22)
    }
}

And lets apply this modifier to our button and voila:

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .modifier(ButtonTextModifier())

Now this way of using custom modifiers is perfectly fine, but personally I'm not a fan of having to use .modifier every time I want to apply a custom modifier. I prefer to create an extension to make this more convenient:

extension View {
    func buttonText() -> some View {
        modifier(ButtonTextModifier())
    }
}

And then use it this way:

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .buttonText()

And thats a wrap! While the examples we covered were rather simple, ViewModifiers are extremely useful and the ability to make custom modifiers really makes them so much more powerful when building apps.