SwiftUI: Image contentMode center-CodePudding

In Swift I can create UIImageView with any size, and then just set contentMode = .center And image in it original size will appear in ImageView in center.

How to achieve this with SwiftUI ?

This is what I'm trying to achieve:

So I would like to create Image (36 x 36) with rounded corners and with background colour. And set image in center. How to do that ?

This is what I tried:

Image("pool_icn")
                .resizable()
                .background(Color.blue)
                .cornerRadius(16)
                .frame(width: 36, height: 36, alignment: .center)
        }

And the result is:

So image resized as well, while I want it to keep original size.

Is that possible with Image ? Or should I wrap image in container ?

CodePudding user response：

I put this together which sort of replicates what you want. I used the stethoscope system image but I'm sure you should be able to update it to specifically what you need...

struct ContentView: View {
  let imageSize: Double = 24
  let circleSize: Double = 36
  
  var body: some View {
    Image(systemName: "stethoscope")
      .resizable()
      .aspectRatio(contentMode: .fit)
      .frame(width: imageSize, height: imageSize)
      .frame(width: circleSize, height: circleSize)
      .background(Color.blue)
      .clipShape(Circle())
  }
}

I added in the imageSize and circleSize just to play around with them a bit.

The output looks about right...

You will only need the Image part. I just added the view to show that it's not using anything else.

A bit more playing

I created an extension on Image to iconify it...

struct ContentView: View {
  var body: some View {
    VStack {
      Image(systemName: "stethoscope")
        .iconified(imageSize: 30, surroundSize: 50, color: .red)
      
      Image(systemName: "car")
        .iconified(imageSize: 100, surroundSize: 150, color: .green)
      
      Image(systemName: "lungs")
        .iconified(imageSize: 20, surroundSize: 36, color: .blue)
      
      Image(systemName: "keyboard.onehanded.right")
        .iconified(imageSize: 40, surroundSize: 60, color: .orange)
    }
  }
}

extension Image {
  func iconified(imageSize: Double, surroundSize: Double, color: Color) -> some View {
    self
      .resizable()
      .aspectRatio(contentMode: .fit)
      .frame(width: imageSize, height: imageSize)
      .frame(width: surroundSize, height: surroundSize)
      .background(color)
      .clipShape(Circle())
  }
}

This works nicely...

Stop resizing the image

If you want the size of the image to stay at whatever it should be then you can do like this...

extension Image {
  func iconified(surroundSize: Double, color: Color) -> some View {
    self
      .frame(width: surroundSize, height: surroundSize)
      .background(color)
      .clipShape(Circle())
  }
}

And that will always keep the image in the centre with the size it has straight from the file. This looks like...