CODEWITHSUNDEEP
iosswiftuiimageview
Edoardo
Edoardo

Reputation: 675

Weird positioning of image view. Wrong content mode?

I want my image view to be displayed correctly at the bottom of the main view, but apparently the image is tilted to the top. I have tried to use every possible content mode of the image view, but none of them place the image view in the right position (bottom).

There's something wrong going on with the image, even though I set my layout constraints right. What am I doing wrong?

Image here

import UIKit
import PlaygroundSupport

var mainView = UIView(frame: CGRect(x: 0, y: 0, width: 1000, height: 1000))

let groundView = UIImageView(image: UIImage(named:"GroundSkin.png"))
mainView.addSubview(groundView)
groundView.backgroundColor = .red
groundView.contentMode = .scaleAspectFit
groundView.translatesAutoresizingMaskIntoConstraints = false
groundView.leftAnchor.constraint(equalTo: mainView.leftAnchor).isActive = true
groundView.rightAnchor.constraint(equalTo: mainView.rightAnchor).isActive = true
groundView.heightAnchor.constraint(equalTo: mainView.heightAnchor, multiplier: 1).isActive = true
groundView.bottomAnchor.constraint(equalTo: mainView.bottomAnchor).isActive = true

PlaygroundPage.current.liveView = mainView
PlaygroundPage.current.needsIndefiniteExecution = true

Upvotes: 3

Views: 1207

Answers (1)

Michael Fourre
Michael Fourre

Reputation: 3015

The offending part of this is the heightAnchor constraint of groundView, which you are setting equal to the equivalent constraint of mainView. Doing this will only result in the groundView gripping the top and bottom anchors of the mainView and centering the image vertically in an undesirable way.

One thing that I'm a bit confused about is your expectation with the red background. If you really want your image to fit in a certain area, then it's best to constrain your UIImageView how you want it and then set your content mode based on your requirements. Do this instead of constraining UIImageView to whatever and trying to get the content mode to do things that it isn't meant to do. If this is done, the red background should (optimally) not even show at all; it would be the background color of the mainView that would show underneath it all.

If you want the groundView image to display at the bottom of the mainView while filling the view horizontally, the best approach would be to replace the groundView.heightAnchor constraint with an aspect ratio based on its own size (which you noted is specified at compile time). So if your image was 4x3 in dimension, for example, this constraint:

groundView.heightAnchor.constraint(equalTo: mainView.heightAnchor, multiplier: 1).isActive = true

would turn into:

groundView.heightAnchor.constraint(equalTo: groundView.widthAnchor, multiplier: 3.0/4.0).isActive = true

Using this, the image should still grow and shrink based on device orientation and screen size, but will only do so as long as its aspect ratio matches that which you expect (in this example, 4x3).

In my Playground, I got a test image from the internet and threw it into groundView while setting mainView's backgroundColor attribute to .yellow for demonstration. The result was:

example of hugging bottom of main view

My test photo was not quite the same ratio as yours, but you get the point. The end result is that the image hugs the bottom of the container, resizes to fit the width of the container, and maintains its own aspect ratio.

If you wish to implement this yourself, note of course that your aspect ratio is probably different, so you would have to change 3.0/4.0 to something else until it looks how you would like it to look.

Let me know if this answers your question.

Upvotes: 2

Related Questions