CODEWITHSUNDEEP
swiftuiimageview
user2423476
user2423476

Reputation: 2275

Swift programmatically create uiimageview full width of screen keeping height ratio

I'm using the following code to create a uiimageview programmatically. 

var imageView : UIImageView
imageView  = UIImageView(frame:CGRectMake(10, 50, 100, 300));
imageView.image = UIImage(named:"image.jpg")
self.view.addSubview(imageView)

The issue im having is I want the uiimageview to be the full width of the screen and the height to adjust to the current image height. I'm loading different image sizes into this uiimageview.

How can this be done?

Upvotes: 1

Views: 4882

Answers (3)

Waylan Sands
Waylan Sands

Reputation: 375

You can go about this a few ways. I wanted padding either side of my image and for it to sit center.

    view.addSubview(imageView)
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: view.frame.width - 80).isActive = true
    imageView.heightAnchor.constraint(equalToConstant: view.frame.width - 80).isActive = true

Upvotes: 1

vacawama
vacawama

Reputation: 154711

There is no built-in way to have a UIImageView resize itself based upon the image. You have to adjust the height of the imageView by changing the frame's height, or by setting a new aspect ratio constraint when you update the image.

There is a contentMode setting (.scaleAspectFit) on UIImageView that can maintain the aspect ratio of the image within the imageView, but it doesn't resize the imageView itself, but just fits the image within it adding padding above and below the image or to the sides as necessary to maintain the aspect ratio.

Updating the frame:

Here is an extension for UIImageView that changes the frame's height when the image is set:

extension UIImageView {
    func setImageAndUpdateFrameHeight(image: UIImage) {
        self.image = image

        if image.size.width > 0 {
            self.frame.size.height = self.frame.size.width / image.size.width * image.size.height
        }
    }
}

Updating the aspect ratio when using Auto Layout

If you are using Auto Layout, then you want to set a new aspectRatio constraint upon updating the image. Use this subclass of UIImageView to maintain an aspectRatio constraint for your UIImageView. You'll need to add constraints to place the image and set its width.

class ResizingImageView: UIImageView {
    var aspectRatio: NSLayoutConstraint?

    func setImageAndUpdateAspectRatio(image: UIImage) {
        self.image = image

        aspectRatio?.isActive = false
        if image.size.width > 0 {
            aspectRatio = self.heightAnchor.constraint(equalTo: self.widthAnchor, multiplier: image.size.height / image.size.width)
        }
        aspectRatio?.isActive = true
    }
}

Notes:

  1. If setting this up in the Storyboard, drag out a UIImageView and change its class to ResizingImageView in the Identity Inspector.
  2. Set constraints to place the imageView and establish its width (for instance: set leading and trailing constraints to its superview).
  3. Give it a height constraint, and then change the priority of that constraint to Low (250) in the Size Inspector so that the apectRatio constraint can control the height of the imageView.
  4. Add an @IBOutlet to your imageView: @IBOutlet var imageView: ResizingImageView!
  5. When it's time to add an image: imageView.setImageAndUpdateAspectRatio(image: newImage)

Upvotes: 0

cromanelli
cromanelli

Reputation: 576

You have to set the contentMode to .scaleAspectFit .

let imageView = UIImageView(frame: self.view.frame) 
imageView.image = UIImage(named:"image.jpg") 
imageView.contentMode = .scaleAspectFit 
self.view.addSubview(imageView)

Upvotes: 0

Related Questions