0

I'm having a problem with scrollable content. Basically, I want to place one ImageView and one Label on the screen with ImageView width equals screen width. height depends on intrinsic content aspect ratio (while width is always equal screen width).

The label is 20 spacing bellow ImageView. That means whole content height may less or equal or even longer than the root view. What I have tried is to put Label and ImageView inside a StackView (ImageView has Aspectfit setting), Then put StackView inside ScrollView. Set up constraints as below.

enter image description here

The problem is the distance between ImageView and top Superview and between ImageView and Label is too big (ideally should be 20). Is there any way to achieve the desired outcome?

PS: I have tried to set stackView distributtion but no help

enter image description here

enter image description here

halfer
  • 19,824
  • 17
  • 99
  • 186
Lê Khánh Vinh
  • 2,591
  • 5
  • 31
  • 77
  • Can not understand the problem actually in storyboard screen shot. Can you show output of this ?? – Bhavin_m Oct 15 '18 at 13:53
  • hi i have added output. Correct behavior should be imageview pin top left and right to the screen. label is bellow imageview 20 – Lê Khánh Vinh Oct 15 '18 at 13:58
  • I think it's because of the image aspect ratio. Try once, set ImageView content mode = Scale to Fill – Bhavin_m Oct 15 '18 at 14:08
  • Hi but the purpose of the setup is to maintain the aspect ratio of the original image (scale height according to width) – Lê Khánh Vinh Oct 15 '18 at 14:11
  • Yes, that is fine and i understand what you want to implement. But just have a look with that try because you will get to know that how you have to create your image in width and height. One thing i can tell you that if you maintain aspect ratio of image your width and height both needs to change according to device. – Bhavin_m Oct 15 '18 at 14:17
  • yes both width and height need to change but I think we can set height depends on width (width is equal to screen width) and original aspect ratio – Lê Khánh Vinh Oct 15 '18 at 14:23
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/181889/discussion-between-ios-wolf-and-le-khanh-vinh). – Bhavin_m Oct 15 '18 at 14:25
  • 1
    Set a background color on your image view and you'll see what's happening. Aspect-Fit changes the way the image is displayed *inside the image view* ... it doesn't change the ***frame*** of the image view. To do that, you'll need to add some code that gets the image size and calculates the Aspect-Fit rectangle, then change the frame of the image view. – DonMag Oct 15 '18 at 14:26
  • Thanks. I'm also think so. I'm finding a function to resize imageView with parameter are its width and original intrinsic aspect ratio – Lê Khánh Vinh Oct 15 '18 at 14:31

1 Answers1

0

tl;dr Remove the aspect ratio constraint and add a height constraint for the UIImageView.

It’s important to understand that UIImageView is basically a container that holds an image, and its dimensions don’t necessarily reflect the image’s dimensions (unless you manually make them equal). When you selected Aspect Fit as UIImageView’s Content Mode, the size of the container didn’t change to correspond the image’s size; this setting only changed the way the image is placed inside the container.

As I can see in your screenshot, the UIImageView’s height is greater than its width; furthermore, the aspect ratio is fixed by the constraint you’ve added. When you placed a landscape-oriented image inside this container, the latter left white bars on the top and the bottom of the image (just like the black bars you see when you watch a widescreen video on an old monitor). Change Content Mode to Aspect Fill or Scale to Fill to see the actual size of the UIImageView.

To fix this, remove the aspect ratio constraint and set up a fixed height for either the UIImageView or the UIStackView. If I were you, I’d probably set the UIStackView’s height equal to Safe Area so that no matter how tall the stack view is, it doesn’t go beyond the screen boundaries.

Yakov Manshin
  • 664
  • 9
  • 24