Autolayout UIImageView with programatic re-size not following constraints

Question

Sorry for the bother but I'm trying to lazy load several imageViews and then resize it proportionately to the content in a UITableView. I'm also trying (Unwisely perhaps?) to use Autolayout basically for the first time. And I'm not understanding why the constraints aren't working in this case. Here's the code that I'm using to resize the UIImageView after I've loaded the proper image into it.

// Scale the image view and return it.
- (UIImageView *) scaleImageViewForScreenWidth:(UIImageView *)imageView {
    UIImage *imgFromView = [imageView image];
    CGRect newFrame = CGRectMake(0, 0, imgFromView.size.width, imgFromView.size.height);

    float imgFactor = newFrame.size.height / newFrame.size.width;
    newFrame.size.width = [[UIScreen mainScreen] bounds].size.width;
    newFrame.size.height = newFrame.size.width * imgFactor;
    [imageView setFrame:newFrame];
    return imageView;
}

As far as constraints are concerned. I'm trying to attach a Label and UIImageView with a shadow to the bottom of the main imageview. Here are the constraints that I'm applying to a bottom shadow in the imageview. The bottom shadow constraints are:

Height Equals:  83
Align Bottom to: Background Image View
LeadingSpace to: Table View Cell

I'm not getting what I want though. Any ideas? I feel like I'm fighting autolayout.

First golden rule of Autolayout. Don't mix constraints with frame calculations. Second golden rule, update the constraints constant, not the view's frame — Max MacLeod
@MaxMacLeod Please post an answer and I'll select you as the answer! It was so simple I just overlooked it. — Rymnel

Max MacLeod Max MacLeod · Accepted Answer · 2013-06-25T14:35:41

As requested! Here's some guidelines for using Autolayout that should help a lot.

The first thing is that the ideal approach is for you to set things up in Interface Builder so that no further programming is required. So, if - for example - the bounds of your view change, then your view will adjust itself automatically as required.

If that doesn't do the business, then you may have to update the constraints programmatically. Now, the golden rules as I mentioned is that you update the constraints. Resist the temptation to update the underlying UIView frame!

So, you'll do something like:

_myWidthConstraint.constant = 300.f;

The next thing to note is that you should do this in a specific place, and that is in your UIView subclass method updateConstraints:

- (void)updateConstraints
{
    [super updateConstraints];
    _myWidthConstraint.constant = 300.f;
}

How do you trigger that? By invoking:

    [self setNeedsUpdateConstraints];

Hope this helps! For further info check Ole Begemann's excellent article 10 Things You Need To Know About Cocoa Autolayout.

Don't forget the WWDC videos. These are essential!

Also, now there's a book iOS Auto Layout Demystified . Although I've bought it, I haven't had a chance to read it yet. It does look pretty good though.

Autolayout UIImageView with programatic re-size not following constraints

2 Answers