Customize View with View Modifier in Swift UI


You can create a custom modifier to your View called ViewModifier in SwiftUI. You can customize the SwiftUI View for general purposes by using ViewModifier. This time, I will summarize such `View Modifier.

About ViewModifier

It is a protocol to implement the function to customize and return the View by applying it to the View. The functions defined in ViewModifier protocol are:

func body(content: Self.Content) -> Self.Body

View is updated or converted in this function and returned. content is the proxy of the View to qualify. Self.Body is defined by ʻassociated type`, and the type of View to be returned to the conversion process of View is described here.

Use ViewModifier

Let's create a custom Modifier to convert a simple View to a card-type View. It's simple to do, create a custom Modifier struct, apply a value to the content argument of thebody (content:)and return it. After that, apply the Modifier created using to the View you want to apply.

struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
            .shadow(radius: 5)

struct ContentView: View {
    var body: some View {
        VStack {
            // .modifier(_:)、 ModifiedContent(content:modifier:)Either is applicable.
            Text("Hello, world!")
            ModifiedContent(content: Text("Hello, world!"),
                            modifier: CardModifier())

Due to the above, the changes described in the custom Modifier will be applied to the corresponding View as follows. スクリーンショット 2020-09-30 21.45.42.png

in conclusion

By using ViewModifier, you can define the layout to be applied to multiple views in general. Since SwiftUI describes the layout in a method chain, readability will deteriorate if multiple same processes are lined up in solid writing when defining the same layout. In order to keep the code clean, I think it is better to organize the views with the same layout with a custom modifier.


Recommended Posts

Customize View with View Modifier in Swift UI
Manage View status with enum in Swift
Starting with Swift Swift UI
Incorporate View created with Swift UI into ViewController
Progress made with Swift UI
Photo library in Swift UI
[Swift UI] Use Map view
Create Master Detail in Swift UI
Implementing side menus in Swift UI
(For beginners) Swift UI view element collection
I tried using Realm with Swift UI
Shiritori map app made with Swift UI
Swift UI 100 knocks
SKStoreReviewController implementation memo in Swift UI of iOS14
Display around fonts in Japanese with Swift: macOS
Transition to a view controller with Swift WebKit
[Swift] Create an image selection UI with PhotoKit
How to implement UICollectionView in Swift with code only
[Swift] Save Color to User Defaults in Swift UI (memo)
Display 3D objects of SceneKit with Swift UI, etc.
Compare objects in Swift
Swift UI TextView placeholder
Division becomes 0 in Swift
Getting Started with Swift
Multidimensional array in Swift
Customize tabs with animation
List of devices that can be previewed in Swift UI
How to change BackgroundColor etc. of NavigationBar in Swift UI