Create a Custom View Modifier in SwiftUI

Written by Team Kodeco

Have you ever found yourself repeating the same modifications to views throughout your SwiftUI project? Creating a custom view modifier can save you time and effort!

To create a custom view modifier, start by defining a new struct that conforms to the ViewModifier protocol. For example, let’s create a custom view modifier that sets the font of a Text view to be bold and italicized:

struct BoldAndItalicModifier: ViewModifier {
  func body(content: Content) -> some View {
    content
      .fontWeight(.bold)
      .italic()
  }
}

In this example, the body function takes in a Content parameter and returns a modified View. Inside the function, we modify the font of the Content, which is typically a view passed into the modifier.

To use this custom view modifier in a view, simply use the .modifier() function and pass in an instance of the custom view modifier:

struct ContentView: View {
  var body: some View {
    Text("Hello, World!")
      .modifier(BoldAndItalicModifier())
  }
}

The text will now be displayed in bold and italicized font:

Custom View Modifiers vs. Custom Views

Custom view modifiers are particularly useful in scenarios where you want to apply consistent styling or behavior to different views. By encapsulating the modifications into a reusable modifier, you can ensure consistency across your app’s UI and reduce code duplication.

In contrast, creating custom views is a suitable approach when you need to define a complex, reusable component that encapsulates both the appearance and behavior of a view. Custom views are ideal for situations where a single view or group of views requires custom layout, interaction or complex view hierarchies.

When deciding between custom view modifiers and custom views, consider:

1. Reusability: If you need to apply the same modifications to multiple views, a custom view modifier is a more efficient choice. It allows you to apply a number of modifications with just a single modifier invocation on each view.
2. Consistency: Custom view modifiers help ensure a consistent look and feel throughout your app. By defining the modifications in one place, you can easily apply them to different views, maintaining visual consistency across your UI.
3. Complexity: If your modifications involve complex view hierarchies, custom views might be a better fit. Custom views allow you to encapsulate the entire component’s logic and appearance, making it easier to manage complex layouts and interactions.

In summary, custom view modifiers are valuable for streamlining repetitive modifications and maintaining consistency, while custom views are ideal for encapsulating complex components with custom layouts and interactions. By choosing the right approach based on your specific needs, you can improve code organization and create a more efficient and maintainable SwiftUI project.

Creating a custom view modifier can be extremely useful in maintaining consistency throughout your project, as well as reducing the amount of repetitive code. So next time you find yourself making the same modifications over and over again, try creating a custom view modifier!