CODEWITHSUNDEEP
iosuiimageviewautolayoutinterface-builder
Johnathon Sullinger
Johnathon Sullinger

Reputation: 7414

Image is not working as expected with constraints

I have a root UIView (for rendering shadow) and it's content is another UIVIew that contains a UIImage and some labels at the bottom. When I look at a sample poster with my constraints set up in interface builder, it looks more or less how I want it.

In this screenshot, the DropshadowUI View holds the content and renders a shadow. The CardView holds both the UIImageView and the UILabels at the bottom. The DropshadowUI View is transparent, the CardView has a blue background and is the full height/width of the dropshadow (w/ a little bit of margin) and the UIImageView has a green background to help distinguish the views while testing. You can see that the UIImageView takes up roughly 80% of the CardView layout, which is desired. The rest of the CardView is made up of the UILabels.

enter image description here

When I run the app however, the constraints don't seem to be working the same way as shown in interface builder. The UIImageView stretches to take the entire height of the CardView. The UILabels are hidden from sight because of this. Judging from the green blur behind my UINavigationBar and UITabBar, it appears that the UIImageView is stretching vertically beyond the extents of the visible area, despite the image not even being that large.

enter image description here

The UIImageView image is set in the interface builder for now (will be set programmatically when this is working). The Content Mode is Aspect Fit. Why does the UIImageView stretch vertically? The Status label has a Bottom Space to bottom of Superview set at 8 points. The Year label's Bottom Space is constrained to the top of Status. The Movie Titles bottom is constrained to the top of Year. Movie Title has it's top constrained to the bottom of the UIImageView. The assumption was that the labels would prevent the image view from growing on the bottom, and instead getting taller by stretching the top (which is constrained to the superview views top.

Is there something wrong with my constraints? I'm still learning the auto-layout system, so if there's something in the screenshots that don't help explain my constraints, let me know what I could do to help clarify them.

Edit

I reset the UIImageView to the suggested constraints and ended up with this at runtime, despite the design-time view looking correct.

enter image description here

Is there a way for me to constrain the UIImageView so that the image can only grow taller, until it runs out of space to fit the rest of the content? I'm missing my bottom label here because now the image is fitting into the UIImageView but pushing everything else to far down. I'd rather it try to fill as much horizontal space as it can, until the siblings beneath it can no longer be pushed further down.

What I get, vs what i want

enter image description here enter image description here

Upvotes: 0

Views: 316

Answers (1)

Nirav Rathod
Nirav Rathod

Reputation: 42

Select your image and go to Layout Issues tool > Reset to Suggested Constraints

Upvotes: 1

Related Questions