Can I resize just the image of an imageView?

Question

So I have this code:

override func viewDidLoad() {
        super.viewDidLoad()
        let imageView = UIImageView()
        view.addSubview(imageView)
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.layer.borderWidth = 5
        imageView.layer.borderColor = UIColor.green.cgColor
        NSLayoutConstraint.activate([
            imageView.heightAnchor.constraint(equalToConstant: 200),
            imageView.widthAnchor.constraint(equalToConstant: 200),
            imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0),
            imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0),
        ])
        let image = UIImage(named: "3")
        //let image = UIImage(named: "3")?.resizeImageWith(newSize: CGSize(width: 5,height: 5))
        imageView.image = image
    }

That looks like this:

Im trying to resize just the image ( so like from the green border there is a margin) with this extension:

func resizeImageWith(newSize: CGSize) -> UIImage {
        let horizontalRatio = newSize.width / size.width
        let verticalRatio = newSize.height / size.height
        let ratio = min(horizontalRatio, verticalRatio)
        let newSize = CGSize(width: size.width * ratio, height: size.height * ratio)
        UIGraphicsBeginImageContextWithOptions(newSize, false, 0)
        draw(in: CGRect(origin: CGPoint(x: 0, y: 0), size: newSize))
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage!
    }

But when I use that like this:

let image = UIImage(named: "3")?.resizeImageWith(newSize: CGSize(width: 60,height: 60))

I get the following result:

And same with this:

let image = UIImage(named: "3")?.resizeImageWith(newSize: CGSize(width: 5,height: 5))

The image just get worst. Is it possible to just resize the image in order to have a margin from the imageView? Thank you!

Answer 1

I was able to produce what you wanted, but doing away with constraints. Using a container view that holds the imageView as a subview, you can use the container like a frame and set its border width and color.

With the frame in place, you can then resize the image as per your needs by just setting the frame of the imageView. The last 2 lines of the code are commented out, but if you uncomment them, you will see that the image will shrink to fit the new imageView frame size set to (50, 50).

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        let containerView = UIView()

        containerView.layer.borderWidth = 5
        containerView.layer.borderColor = UIColor.green.cgColor

        containerView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        containerView.center = view.center

        let imageView = UIImageView()

        view.addSubview(containerView)
        containerView.addSubview(imageView)


        let image = UIImage(named: "3")!
        imageView.frame = CGRect(origin: imageView.frame.origin, size: CGSize(width: 200, height: 200))
        imageView.image = image
        imageView.contentMode = .scaleAspectFit
        imageView.center = view.convert(containerView.center, to: containerView)

        print("Image Width: \(image.size.width)")
        print("Image Height: \(image.size.height)")

        print("ImageView Width: \(imageView.frame.width)")
        print("ImageView Height: \(imageView.frame.height)")

        print("Container Width: \(containerView.frame.width)")
        print("Container Height: \(containerView.frame.height)")

        print("View Center: \(view.center.x),\(view.center.y)")
        print("Container Center: \(containerView.center.x),\(containerView.center.y)")

        //imageView.frame.size = CGSize(width: 50, height: 50)
        //imageView.center = view.convert(containerView.center, to: containerView)

    }
}

I used .scaleAspectFit so that the image will be forced to fit whatever size you set the imageView to, while maintaining its original aspect ratio. You can of course change this to suit your needs as well. If you need to set the size of your image in different ways, you'll need to change the imageView's contentMode property as appropriate. More info here:

https://developer.apple.com/documentation/uikit/uiimageview

The convert function just helps to layout the imageView where you want it, within its parent view.

The print debug statements are helpful for checking your layout, but of course, unnecessary.

Answer 2

Change the image view content mode to Center:

imageView.contentMode = .center