iOS Image Resizing / Dealing With Blank Space

Question

I have simply dragged UIImageView into storyboard and made it square. I added a pink background to show the effects of the leftover space in the ImageView. In each case I added either a taller image (1st image) and a wider image (2nd image), as well as a text label. Here are my results.

So the obvious question is....how can I get rid of this extra (pink) space and keep the integrity of the photo (that is, to not have to stretch or lose part of the image)? If I wanted to be able to scroll through photos, it would be nice to have them all the same width to the edge so they look neat and orderly (if they were portrait), and if I wanted to have text under each, I'd want the text to be closer to it, rather than have all the blank (pink) space in between if it were landscape. And obviously different size images will give different sizes of blank space.

So I'm thinking what I could do is before displaying the image, get the size of it, then just have a designated distance from either the label or the edge of screen, depending on the orientation of the picture, and then creating/changing the size of the UIImageView with a bit of math and using the image dimensions before inserting the picture into the ImageView. Is this possible? Is there another method I can't quite figure out?

Just look at any decent photo app and they are nice and neatly organized/displayed despite being different sizes, orientations, etc and I'm wondering how to pull this off. I obviously haven't gotten too deep into using images past simply showing them in a pre-determined ImageView.

Thanks for the help/suggestions!

Answer 1

Try this... set your UIImageView to AspectFit (not AspectFill since that will lose some of the image) and using constraints do the following:

• centre the UIImageView in the container both horizontally and vertically
• set the UILabel to float below the UIImageView by whatever distance you desire ("standard" is usually good)
• set the left, right, and top constraints on the UIImageView to be >= whatever distance you desire
• set the bottom constraint on the UILabel to be (once again) >= whatever distance you desire

The effect of this should be that the UIImageView will properly resize itself to its intrinsic size and the constraints should properly position it and the label.