CODEWITHSUNDEEP
swiftuiimageview
Ali Pacman
Ali Pacman

Reputation: 827

How to resize an UIImaveView based on its image?

I want to have an UIImageView fill a container as much as possible but the picture inside it should keep its aspect ratio and the container should fit the size of the picture inside it.

Here is a picture of how it is right now when it won't work:

https://i.sstatic.net/Nciki.jpg

I have solved the problem, but only when first loading the view, when I change the image of the imageView it gets smaller and smaller.

I solved it with this extension:

https://www.hackingwithswift.com/example-code/uikit/how-to-find-an-aspect-fit-images-size-inside-an-image-view

So when getting an UIImage, I call the layout method to layout my UIViews, then I set up the image inside the UIImageView. Next, in the drawing method of the parent UIView, I calculate the contentClippingRect of the UIImageView and then set the constraints of the UIImageView to contentClippingRect and layout again.

My Layout method resets the constraints of the UIImageView to the constraints of the whole container when there is no image inside of the imageView.

But as said, when I change the picture it won't work and I have constraints issues when changing the image.

Here is what I tried:

var image: UIImage? {
    didSet {
        photoView.image = nil
        layout()
        photoView.image = image
    }
}

override func draw(_ rect: CGRect) {
    if photoView.image != nil {
        setPictureFrame()
        layout()
    }
}

private func setPictureFrame() {
    let photoRect = photoView.contentClippingRect
    photoView.clearConstraints()

    photoView.heightAnchor.constraint(equalToConstant: photoRect.height).isActive = true
    photoView.widthAnchor.constraint(equalToConstant: photoRect.width).isActive = true
}

private func layout() {

    var layoutConstraints: [NSLayoutConstraint] = []

    if photoView.image == nil {
        photoView.clearConstraints()
        photoView.constraintsFillWhole(view: photoViewContainer)
    }

    layoutConstraints += [
        photoView.centerXAnchor.constraint(equalTo: self.centerXAnchor),
        photoView.centerYAnchor.constraint(equalTo: photoViewContainer.centerYAnchor),
    ]
    NSLayoutConstraint.activate(layoutConstraints)
}

Thank you very much for your help!

Upvotes: 0

Views: 228

Answers (1)

Aqeel Ahmad
Aqeel Ahmad

Reputation: 757

You can make aspect to fit from storyboard as well. Go to attribute inspector of that imageView you will find content mode from there. here is an exampleenter image description here

you can do this programatically as well.

for swift

yourImageView.contentMode = .scaleAspectFill // or you can use .scaleToFill

for objective c

yourimageView.contentMode = UIViewContentModeScaleAspectFit;

Followings are some contentModes that you can use programatically.

UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit,     
UIViewContentModeScaleAspectFill,   
UIViewContentModeRedraw,             
UIViewContentModeCenter,              
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,

Upvotes: 2

Related Questions