iOS: Programmatically align UIImageView to bottom using anchors

Question

I am trying to create an UIImageView programmatically (so no storyboard/UI editor), and align it using anchor constraints. The UIImageView should be aligned to the bottom and be scaled to fit the bottom area (like a full-width footer), but maintain aspect ratio, kind of like what is available in the Storyboard editor?

My current code in viewDidLoad() looks like this, but no matter what I do, the image is displayed at the top and it seems the ImageView (not the image) fills the entire height of the parent view.

// Create and add image view
let imgView = UIImageView(image : UIImage(named : "Images/main_bottom.png"))
imgView.translatesAutoresizingMaskIntoConstraints = false
imgView.contentMode = .scaleAspectFit

view.addSubview(imgView)


// Align image view
let margins = view.safeAreaLayoutGuide

NSLayoutConstraint.activate([
    imgView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
    imgView.trailingAnchor.constraint(equalTo: margins.trailingAnchor),
    imgView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
])

Unfortunately that gives the same result. I tried both moving all the code to `viewDidLayoutSubviews()` and only moving the constraints part — Henrik, Jan 30 '20 at 13:47
@KishanBhatiya, can you suggest to me what constaint/code I should write for the `heightAnchor`? — Henrik, Jan 30 '20 at 13:51
add `imgView.heightAnchor.constraint(equalToConstant: 50)` in `NSLayoutConstraint.activate` — Kishan Bhatiya, Jan 30 '20 at 13:53
@KishanBhatiya OK, that seems to have an effect. The problem is that I can't put in 50, as that depends on the screen size/aspect ratio of the image. I need the image to be full width — Henrik, Jan 30 '20 at 13:55
You can use this code: imgView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.5) — Samiul Islam Sami, Jan 30 '20 at 13:56
@Henrik your are activated height constraint not width constraint, width constraint already set according to screen width or you can use multiplier `imgView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.3)` — Kishan Bhatiya, Jan 30 '20 at 13:58
May be this helps: https://stackoverflow.com/questions/41154784/how-to-resize-uiimageview-based-on-uiimages-size-ratio-in-swift-3 — Kishan Bhatiya, Jan 30 '20 at 14:12

score 1 · Accepted Answer · answered Jan 30 '20 at 14:16

I was able to find a solution using the comments above and further experiments, by computing and setting the height anchor from the image ratio.

// Compute image ratio
let ratio = imgView.intrinsicContentSize.height / imgView.intrinsicContentSize.width

// Set height anchor as a computed value of the (auto-scaled) width, and the image ratio
NSLayoutConstraint.activate([
   // ...other contraints go here still...
   imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: ratio)
])

iOS: Programmatically align UIImageView to bottom using anchors

1 Answers1