CODEWITHSUNDEEP
iosswiftswiftui
Jason Giorgio Meulenhoff
Jason Giorgio Meulenhoff

Reputation: 139

Accessing modifiers of Image in custom View in SwiftUI

Currently, i have made a custom view in SwiftUI containing an Image with some details. How can we add specific image modifiers outside my view instance?

import Foundation
import SwiftUI
import Combine

struct RemoteImage: View {

    // Hold reference to our remote resource through binding
    @ObjectBinding
    private var resource: RemoteResource

    // Initialize the Image with a string
    init(urlString: String) {

        // Create our resource and request our data
        // Will fetch the resource from the internet
        self.resource = RemoteResource(urlString)
    }

    // Computed var that will return a placeholder image our our actual resource
    private var image: UIImage {
        self.resource.data.flatMap(UIImage.init) ?? UIImage(named: "placeholder")!
    }

    var body: some View {
        Image(uiImage: image)
    }
}

How would i add modifiers from an instance of RemoteImage to Image

RemoteImage(urlString: "image-url-here")
    .resizable()
    .scaledToFit()

If anyone would know a solution to my problem please let me know.

Upvotes: 10

Views: 1412

Answers (2)

LuLuGaGa
LuLuGaGa

Reputation: 14388

If you declare your RemoteImage like this:

import Foundation
import SwiftUI
import Combine

struct RemoteImage: View {

    // Hold reference to our remote resource through binding
    @ObservedObject
    private var resource: RemoteResource

    // Initialize the Image with a string
    init(urlString: String) {

        // Create our resource and request our data
        // Will fetch the resource from the internet
        self.resource = RemoteResource(urlString)
    }

    // Computed var that will return a placeholder image our our actual resource
    private var image: UIImage {
        self.resource.data.flatMap(UIImage.init) ?? UIImage(named: "placeholder")!
    }

    var body: Image {
        Image(uiImage: image)
    }
}

then you can call all Image specific modifiers like this:

RemoteImage(urlString: "image-url-here").body
    .resizable()
    .scaledToFit()

Not ideal, but at least you don't have to redeclare every single modifier manually.

Upvotes: 4

Just a coder
Just a coder

Reputation: 16720

The code below adds two properties, you will be able to call

RemoteImage(urlString: myLink).resizable().renderingMode(myRenderingMode)

You can add any amount you need. 

struct RemoteImage: View {   
    // Hold reference to our remote resource through binding
    @ObjectBinding
    private var resource: RemoteResource

    // Initialize the Image with a string
    init(urlString: String) {

        // Create our resource and request our data
        // Will fetch the resource from the internet
        self.resource = RemoteResource(urlString)
    }

    // Computed var that will return a placeholder image our our actual resource
    private var image: UIImage {
        self.resource.data.flatMap(UIImage.init) ?? UIImage(named: "placeholder")!
    }

    // Put whatever new properties you want here *****************
    private var _resizable: (capInsets: EdgeInsets, resizingMode: Image.ResizingMode) = (EdgeInsets(), .stretch)
    private var _renderingMode: Image.TemplateRenderingMode? = nil
    // *****************

    var body: some View {
        Image(uiImage: image)
           .resizable(capInsets: _resizable.capInsets, resizingMode: _resizable.resizingMode)
           .renderingMode(_renderingMode)
    }

    // Put whatever new functions you want here *****************
    func resizable(capInsets: EdgeInsets = EdgeInsets(), resizingMode: Image.ResizingMode = .stretch) -> RemoteImageComponent {
        var rm = self
        rm._resizable = (capInsets, resizingMode)
        return rm
    }

    func renderingMode(_ renderingMode: Image.TemplateRenderingMode?) -> RemoteImageComponent {
        var rm = self
        rm._renderingMode = renderingMode
        return rm
    }
}

If you need to know what parameters to add to you new properties, then simple click on CMD click on the system function to see what is needed.

Upvotes: 0

Related Questions