How to make AutoLayout adjust to changing image sizes

Question

I have a nib file with an image view and two UILabels, one above the image and one below. The nib gets used for each page on the screen and my view controller uses nested switch statements to determine the image and text to use for each screen. The problem I'm having is that the images are of various sizes, and sometimes the label below the image doesn't appear. I want it to always appear 4px below the image, so I set a vertical space constraint with a constant of 4, but using log statements to print the origins and sizes of the imageview frame and label frame are telling me that it's being placed more than 4px below and probably off the bottom of the screen. I've attached some screenshots to illustrate the problem. The first screenshot shows everything appearing in the correct position. Is there something I need to add in code to make the label always appear correctly regardless of the image height?

Here is a screenshot of the nib file with the constraints:

And here is an example of the code from the view controller that sets the content:

@implementation ContentViewController

- (id)initForContentSet:(int)setNumber andIndex:(int)indexNumber {
    if (self = [super initWithNibName:@"ContentView" bundle:nil]) {
        self.contentSet = setNumber;
        self.indexNum = indexNumber;
    }
    return self;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    [_contentImageView setContentMode:UIViewContentModeScaleAspectFit];
    [_contentText setLineBreakMode:NSLineBreakByWordWrapping];
//set up content
switch (_contentSet) {
    case 1:
        switch (_indexNum) {
            case 0:
                //first exposure page
                [_pageHeader setText:@"The Exposure Triangle"];
                [_contentImageView setImage:[UIImage imageNamed:@"exposure-triangle.jpg"]];
                [_contentText setText:@"Balance the amount of available light with aperture, ISO, and shutter speed settings."];
                break;
            case 1:
                //second exposure page
                [_pageHeader setText:@"Example"];
                [_contentImageView setImage:[UIImage imageNamed:@"exposureexample.jpg"]];
                [_contentImageView sizeToFit];
                [_contentText setText:@"An underexposed photo is too dark, while an overexposed one looks washed out."];
                break;
            default:
                break;
        }
        break;

First, use View Debugging to find out where the label really is! — matt, Sep 07 '15 at 00:51
Check this out : http://stackoverflow.com/questions/26833627/with-auto-layout-how-do-i-make-a-uiimageviews-size-dynamic-depending-on-the-im — Bista, Sep 07 '15 at 06:16

score 0 · Accepted Answer · answered Sep 09 '15 at 23:45

Decreasing the size of the bottom space to superview constraint and calling updateConstraintsIfNeeded on self.view after setting the image solved the problem, except on a few pages which have a lot of text in the UILabel. I had to also scale down the size of the images on those pages to get the label to appear.

How to make AutoLayout adjust to changing image sizes

1 Answers1