Custom Text in SwiftUI

In this post, I’m going to talk about how to create custom Text in SwiftUI with ViewModifier.

The Text view in SwiftUI provides a convenient way to display and format text content in a clear and readable manner. But, as you develop more complex interfaces, you may find that you need to style your text in specific ways to meet the design requirements. In this case, you can use View Modifiers to add extra functionality and styling to the Text view.

The ViewModifier protocol in SwiftUI is a powerful tool that allows developers to modify the view in a more structured way. It provides an easy way to apply multiple modifiers to a single view and allows the developer to define custom modifiers that can be used across multiple views. This helps simplify and streamline the process of creating and maintaining complex user interfaces. The ViewModifier protocol also helps to create a more consistent look and feel across the user interface, and it can be used to create a wide range of custom user interface elements.

A View Modifier in SwiftUI is a type that conforms to the ViewModifier protocol. The protocol defines a single method named body that takes in a View and returns a modified version of that View. View Modifiers are applied to views by calling the modifier method on the view, passing in an instance of the View Modifier.

Here’s an example of how to create a View Modifier that adds an icon to the Text view:

struct IconText: ViewModifier {
    private var icon: Image

    init(icon: Image) {
        self.icon = icon
    }

    func body(content: Content) -> some View {
        HStack {
            icon
            content
        }
    }
}

We define a struct called IconText that conforms to the ViewModifier protocol. The body method takes in a Content view and returns a new view with an image on the left.

To use this View Modifier, you can simply call the modifier method on a Text view and pass in an instance of IconText:

Text("Icon button")
    .modifier(IconText(icon: Image(systemName: "play.fill")))

This will result in a Text with the text “Icon button” and a play icon on the left.

It’s worth noting that View Modifiers can be composed and applied to a view multiple times to achieve complex styling.

In conclusion, View Modifiers provide an elegant and reusable way to add functionality and styling to your SwiftUI views. They are a great tool for keeping your code clean and readable and are especially useful when you need to apply the same styling to multiple views. So, next time you’re developing a complex interface in SwiftUI, consider using View Modifiers to help simplify your code.