Search

SwiftUI Custom Modifiers

Custom modifiers encapsulate multiple modifiers in a single structure, and we can apply them later to the views.

struct ImageModifier: ViewModifier {
  func body(content: Content) -> some View {
    content
      .scaledToFill()
      .shadow(color: .black, radius: 5, x: 5, y: 5)
      .cornerRadius(10)
  }
}

The struct must conform to the ViewModifier protocol and implement the method called body that receives a parameter of type Content. It concatenates a chain of modifiers to build a final view.

Let’s see how to implement this.

struct ImageEditor: View {
    var body: some View {
        Image("sampleios")
            .resizable()
            .modifier(ImageModifier())
    }
}

In the above example we are making image content scaled to fill and corner radius as 10. we can also other modifiers. Now we can use this same modifier for multiple images.

We can also customise this so that our modifier takes an input which can change its modifier value.


struct ImageModifier: ViewModifier {
var cornerRadius: CGFloatinit(radius: CGFloat) {
   cornerRadius = radius
}func body(content: Content) -> some View {
    content
      .scaledToFill()
      .shadow(color: .black, radius: 5, x: 5, y: 5)
      .cornerRadius(cornerRadius)
  }
}

Here corner radius can be set by the Image and it will be reflected.

Let see how to make this code cleaner. A better way is to add our custom modifier as an extension on Image


extension Image {
     func imageModifier(cornerRadius: CGFloat = 10) -> some View {
        modifier(MyModifier(radius: cornerRadius))
     }
}

Now we can re-write out ImageEditor struct as:

struct ImageEditor: View {
    var body: some View {
        Image("sampleios")
            .resizable()
            .imageModifier(cornerRadius:50)
    }
}

These custom Modifiers and its extension can be used with any UI component like Image,View ,Text etc.

Keep coding.

14 views0 comments

Recent Posts

See All

Using Combine for making a API Calls Using Combine with API calls is very convenient due to operators and error handling methods from combine Lets us look at a example: Example URL: https://jsonplaceh

Publishing a property with @Published attribute creates a publisher of this type. You access the publisher with the $ operator @Published var heartRate: Double When the property changes, publishing o