Creating ViewModifiers and Styles in SwiftUI

Image by vectorjuice on Freepik

SwiftUI, Apple’s declarative UI framework, provides a simple way to build beautiful User Interfaces across all Apple platforms with the power of Swift. One of the great features of SwiftUI is its ability to easily modify views using ViewModifiers and Styles. In this article, we’ll delve into the details of creating custom ViewModifiers and Styles in SwiftUI.

ViewModifier

A ViewModifier in SwiftUI is a protocol that can be used to create a reusable and composable effect that can be applied to any view. The ViewModifier protocol requires a single function:

body(content: Content) -> some View {
  // Content configurations here
}

which will transform the content and return a new view.

Let’s start by creating a simple custom ViewModifier that changes the font and color of a Text view. We’ll create a ViewModifier that makes the text large and blue.

struct LargeBlueModifier: ViewModifier {
  func body(content: Content) -> some View {
    content
      .font(.largeTitle)
      .foregroundColor(Color.blue)
  }
}

Now that we have our LargeBlueModifier, we can apply it to any view using the .modifier() function.

Text("Hello, SwiftUI!")
  .modifier(LargeBlueModifier())

This will display the text “Hello, SwiftUI!” in a large font size and blue color.

But SwiftUI provides a better way to apply ViewModifiers using extensions. We can create an extension on View to create a new function that applies our ViewModifier.

extension View {
  func largeBlue() -> some View {
    self.modifier(LargeBlueModifier())
  }
}

Now, we can use our custom ViewModifier like this:

Text("Hello, SwiftUI!")
  .largeBlue()

Style

A Style in SwiftUI is a way to modify certain types of views with a consistent appearance. SwiftUI provides styles for several types of views, like ButtonStyle, ToggleStyle, TextFieldStyle, etc.

Let’s create a custom ButtonStyle. We'll make a button with rounded corners and a gradient background.

struct GradientButtonStyle: ButtonStyle {
  func makeBody(configuration: Self.Configuration) -> some View {
    configuration
      .label
      .padding()
      .background(LinearGradient(gradient: Gradient(colors: [.blue,
                                                            .purple]),
                                 startPoint: .leading,
                                 endPoint: .trailing))
         .cornerRadius(10)
         .foregroundColor(.white)
         .scaleEffect(configuration.isPressed ? 0.9 : 1.0)
  }
}

In the makeBody function, we configure the button's appearance. We add padding, a gradient background, rounded corners, and white foreground color. We also add a scale effect to make the button shrink slightly when pressed.

To use our GradientButtonStyle, we apply it using the .buttonStyle() function.

Button(action: {
  print("Button pressed!")
}) {
  Text("Tap me")
}.buttonStyle(GradientButtonStyle())

This will create a button with the text “Tap me” that prints “Button pressed!” to the console when tapped. The button will have our custom gradient background and rounded corners.

ViewModifiers and Styles are powerful tools that allow us to create reusable and consistent modifications to our views, helping us to keep our code clean and maintainable.

Happy SwiftUI coding!